浅谈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实现的页面日历
Nov 04 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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编程网上资源导航
2006/10/09 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
如何在PHP中读写文件
2020/09/07 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Python实现登录接口的示例代码
2017/07/21 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python的exec、eval使用分析
2017/12/11 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python输入二维数组方法
2018/04/13 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
医务人员自我评价
2014/01/26 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
滴水洞导游词
2015/02/10 职场文书