浅谈Angular 观察者模式理解


Posted in Javascript onNovember 01, 2018

观察者模式意图

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

实现过程

在老师教程中学到了 Angularjs 中的观察者模式

不使用观察者模式,登录时不实时获取当前登录用户,必须刷新界面

浅谈Angular 观察者模式理解

使用观察者模式

浅谈Angular 观察者模式理解

代码

Services:

// 观察者
    self.observerCallbacks = [];

    // 注册观察者
    self.reisterObserverCallback = function(callback){
      self.observerCallbacks.push(callback);
    };

    // 通知观察者
    self.notifyObserver = function(currentLoginTeacher){
      angular.forEach(self.observerCallbacks, function(callback){
        callback(currentLoginTeacher);
      });
    };

Controller:

// 注册观察者
          teacher.reisterObserverCallback(function(teacher){
           $scope.data.CurrentLoginTeacher = teacher;
          });
使用时调用self.notifyObserver方法。只要是注册过的观察者都会得到一个通知。

时序图

浅谈Angular 观察者模式理解

总结

观察者模式:我觉得用一个词来总结,就是群发。
当一个对象发生改变的同时,需要其他对象也改变,但是并不知道具体有多少个对象改变。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
详解vuex状态管理模式
Nov 01 #Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 #Javascript
Vue.js 事件修饰符的使用教程
Nov 01 #Javascript
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
微信小程序实现留言板
Oct 31 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python读取二进制mnist实例详解
2017/05/31 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
个人找工作的自我评价
2013/10/17 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
中学运动会广播稿
2014/01/19 职场文书
大学活动邀请函
2014/01/28 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
python基于turtle绘制几何图形
2021/06/15 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android