浅谈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之锁定表格栏位
Jun 29 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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/12/25 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
办理暂住证介绍信
2014/01/11 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
师范生自荐信模板
2014/05/28 职场文书
公务员年度考核评语
2014/12/31 职场文书
酒店宣传语大全
2015/07/13 职场文书
初中英语教学随笔
2015/08/15 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
总结python多进程multiprocessing的相关知识
2021/06/29 Python