浅谈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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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 clearstatcache()函数详解
2010/03/02 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
详解PHP中的Traits
2015/07/29 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python模拟登录验证码(代码简单)
2016/02/06 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python实现指定ip端口扫描方式
2019/12/17 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
2014年学校领导班子对照检查材料
2014/09/19 职场文书
实习工作表现评语
2014/12/31 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
golang中的空接口使用详解
2021/03/30 Python