浅谈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 相关文章推荐
jquery实现动态改变div宽度和高度
May 08 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
一些实用性较高的js方法
Apr 19 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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模板类代码
2008/09/07 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php PDO异常处理详解
2016/11/20 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
jquery弹出框的用法示例(2)
2013/08/26 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python安装whl文件过程图解
2020/02/18 Python
python中if及if-else如何使用
2020/06/02 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
车间工艺员岗位职责
2013/12/09 职场文书
清洁工岗位职责
2014/01/29 职场文书
中层干部培训方案
2014/06/16 职场文书
人大调研汇报材料
2014/08/14 职场文书
人大代表选举标语
2014/10/07 职场文书
文明家庭事迹材料
2014/12/20 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL