浅谈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实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
js Date概念详细介绍
Nov 22 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 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实现大流量下抢购方案
2017/12/15 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
python计算auc指标实例
2017/07/13 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
高级方案规划工程师岗位职责
2013/11/29 职场文书
超市营业员岗位职责
2013/12/20 职场文书
个人授权委托书
2014/04/03 职场文书
团组织推荐意见
2015/06/05 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers