浅谈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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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实现ODBC数据分页显示一例
2006/10/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python+os根据文件名自动生成文本
2019/03/21 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python的in,is和id函数代码实例
2020/04/18 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
超市中秋节活动方案
2014/02/12 职场文书
寄语学生的话
2014/04/10 职场文书
项目申请汇报材料
2014/08/16 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
新生开学寄语大全
2015/05/28 职场文书