浅谈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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript二维数组转置实例
Jan 22 Javascript
js中this用法实例详解
May 05 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
微信小程序登录换取token的教程
May 31 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 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中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python采集腾讯新闻实例
2014/07/10 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python查看模块,对象的函数方法
2018/10/16 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
全球性的女装店:storets
2019/06/12 全球购物
Linux机考试题
2015/07/17 面试题
软件毕业生个人鉴定
2014/03/03 职场文书
幼儿评语大全
2014/04/30 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
英语邀请函范文
2015/02/02 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript