浅谈Angular 观察者模式理解
观察者模式意图
定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
实现过程
在老师教程中学到了 Angularjs 中的观察者模式
不使用观察者模式,登录时不实时获取当前登录用户,必须刷新界面
使用观察者模式
代码
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 观察者模式理解
观察者模式意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 实现过程 在老师教程中学到了 Angularjs 中的观察者模式 不使用观察者模式,登录时不实时获取当前登录用户,必须刷新界面 使用观察者模式 代码 Services: // 观察者 self.observerCallbacks = []; // 注册观察者 self.reisterObserverCallback = function(callback){ self.obs
-
浅谈angular懒加载的一些坑
写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang
-
浅谈Angular中ngModel的$render
在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode
-
浅谈angular表单提交中ng-submit的默认使用方法
在表单提交的时候,我使用了一个button,但ng-submit写在form标签中,然而button中我未使用任何方法访问submit()函数 <div ng-app="dkr"> <div ng-controller="logincontrol"> <form ng-submit="submit(user)"> <div>账号名 <input type="text" ng
-
浅谈Angular的12个经典问题
1. 请解释Angular 2应用程序的生命周期hooks是什么? Angular 2组件/指令具有生命周期事件,是由@angular/core管理的.@angular/core会创建组件,渲染它,创建并呈现它的后代.当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它.Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作.构造函数会在所有生命周期事件之前执行.每个接口都有一个前缀为ng的hook方
-
浅谈Angular路由复用策略
一.引言 路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除:当然在绝大多数场景下这是合理的. 但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验:一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退--用户懵逼了. Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利用Component
-
浅谈Angular的$q, defer, promise
1. $q $q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 2. defer defer的字面意思是延迟,$q.defer() 可以创建一个deferred实例(延迟对象实例). deferred 实例旨在暴露派生的Promise 实例,以及被用来作为成功完成或未成功完成的信号API,以及当前任务的状态.这听起来好复杂的样子,总结$q, defer, promise三者之间的关系如下所示. var deferred = $q
-
浅谈Angular路由守卫
引言 在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单. 什么是路由守卫? Angular 的 Route 路由参数中除了熟悉的 path.component 外,还包括四种是否允许路由激活与离开的属性. canActivate 控制是否允许进入路由. canActivateChild
-
浅谈Nodejs观察者模式
一.前言 Nodejs使用有些日子了,近来再回顾下其API.多使用新特性,以期有更高层次的掌握,本次API的总结区别于单纯对英文版的汉化,会多做些扩展和自己的理解,希望对大家有所帮助,先从最核心的Events开始 Nodejs的Events实现了一种观察者模式,其支持了Nodejs的核心机制,且http / fs / mongoose等都继承了Events,可以添加监听事件.这种设计模式在客户端的组件编程思想里经常会用到,我们先简单了解下该模式. 首次接触 观察者模式是在Extjs框架的 Ext
-
浅谈Angular文字折叠展开组件的原理分析
自己写了个Angular的文字折叠组件,这种组件其实很多地方都能用到效果如下 展开后的效果 折叠后的效果 先放全部代码,使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可 .directive('textfold', function() { return { restrict: 'EA', template: '<p style="font-size: 14px; border-left:5px solid #dddddd; pa
随机推荐
- ASP.NET登录注册页面实现
- JS判断是否为JSON对象及是否存在某字段的方法(推荐)
- Aut2Exe编译au3脚本为可执行文件
- jQuery常见面试题之DOM操作详析
- apache mysql php 源码编译使用方法
- 利用PHP函数计算中英文字符串长度的方法
- JavaScript实现时钟滴答声效果
- ajax+node+request爬取网络图片的实例(宅男福利)
- PHP判断远程url是否有效的几种方法小结
- 使用jQuery判断浏览器滚动条位置的方法
- JSP for循环中判断点击的是哪个按钮
- Node.js实现文件上传
- IIS防盗链 ISAPI Rewrite图片防盗链规则写法
- 重命名administrator账号的批处理文件
- Linux下安装Redis并设置相关服务
- Linux查找包含指定文字的文件(linux查找指定文件)
- 再分享70+免费的jquery 图片滑块效果插件和教程
- Byshell后门:无进程无DLL无硬盘文件
- Google推广的十二点技巧
- 路由器CPU性能不容忽视提高性能第一位