浅谈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 相关文章推荐
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP6新特性分析
2016/03/03 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
vue2 全局变量的设置方法
2018/03/09 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python 创建一维的0向量实例
2019/12/02 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
推荐信格式要求
2014/05/09 职场文书
考博专家推荐信
2014/05/10 职场文书
博士生求职信
2014/07/06 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
七年级作文之冬景
2019/11/07 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记