浅谈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 Event学习第五章 高级事件注册模型
Feb 07 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vue实现简单跑马灯效果
May 25 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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实现递归循环每一个目录
2010/08/08 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
vue-router单页面路由
2017/06/17 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python statsmodel的使用
2020/12/21 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
Android面试题附答案
2014/12/08 面试题
党员个人剖析材料2014
2014/10/08 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
PHP正则表达式之RCEService回溯
2022/04/11 PHP