浅谈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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
详解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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python监控nginx端口和进程状态
2019/09/06 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
艺术用品:Arteza
2018/11/25 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
中秋节超市促销方案
2014/01/30 职场文书
校庆接待方案
2014/03/18 职场文书
奥运会口号
2014/06/13 职场文书
安全月宣传标语
2014/10/07 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python