浅谈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不同页面传值的改进版
Sep 30 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
javascript中expression的用法整理
May 13 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
AJAX实现指定部分页面刷新效果
Oct 16 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 数据库树的遍历方法
2009/02/06 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
python绘制立方体的方法
2018/07/02 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python实现手机销售管理系统
2019/03/19 Python
Python实现打印实心和空心菱形
2019/11/23 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
应聘护士自荐信
2013/10/21 职场文书
医学院四年学习生活的自我评价
2013/11/06 职场文书
50岁生日感言
2014/01/23 职场文书
私人委托书格式
2014/09/10 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang