浅谈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 相关文章推荐
js跑马灯代码(自写)
Apr 17 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
javascript页面倒计时实例
Jul 25 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
原生js二级联动效果
Jun 20 Javascript
Vue自定义指令详解
Jul 28 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
javascript实现弹出层效果
Dec 10 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
php广告加载类用法实例
2014/09/23 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
js转html实体的方法
2016/09/27 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
python将unicode转为str的方法
2017/06/21 Python
Python实现二维数组输出为图片
2018/04/03 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
消防战士优秀事迹材料
2014/02/13 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
社区党员公开承诺书
2014/08/30 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
与死神共舞观后感
2015/06/15 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
css3 文字断裂效果
2022/04/22 HTML / CSS
JAVA springCloud项目搭建流程
2022/05/11 Java/Android