浅谈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_ibm
May 16 Javascript
ie 调试javascript的工具
Apr 29 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python 字符串常用函数详解
2019/09/11 Python
在Django中实现添加user到group并查看
2019/11/18 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
优秀员工自荐书范文
2013/12/08 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
代办委托书怎样写
2014/04/08 职场文书
工作所在部门证明
2014/09/21 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android