浅谈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 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
javascript实现简易聊天室
Jul 12 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
JS原形与原型链深入详解
May 09 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 操作调试的方法
2012/07/12 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php验证码生成器
2017/05/24 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
在Python中移动目录结构的方法
2016/01/31 Python
python daemon守护进程实现
2016/08/27 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
顺丰快递Java软件工程师面试题
2015/07/31 面试题
大学校园活动策划书
2014/02/04 职场文书
班级团队活动方案
2014/08/14 职场文书
工会趣味活动方案
2014/08/18 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
遗失说明具结保证书
2015/02/26 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
python基础之停用词过滤详解
2021/04/21 Python