浅谈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 相关文章推荐
超级退弹代码
Jul 07 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 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/06/02 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
python虚拟环境完美部署教程
2019/08/06 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
C++面试题目
2013/06/25 面试题
打架检讨书800字
2014/01/10 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
 python中的元类metaclass详情
2022/05/30 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers