浅谈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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue模块移动组件的实现示例
May 20 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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+MySQL的聊天室设计
2006/10/09 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
js模拟微博发布消息
2017/02/23 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
运动会通讯稿200字
2014/02/16 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
家长对孩子的评语
2014/04/18 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2016猴年春节问候语
2015/11/11 职场文书
python基础之匿名函数详解
2021/04/21 Python
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang