这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
观察者模式又称发布订阅模式,是一种最常用的设计模式之一了。下面这篇文章主要给大家深入的介绍了 Javascript 中观察者模式的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
简介
观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。讲道理,如果我们写的不是稍微底层的代码,可能不会用到它。 但是有了它会让代码更灵活,更加规整,减少冗余代码,方便分模块,分功能开发。
使用观察者模式的好处:
引入
在前端业务中,可能用的比较多的地方可能就是自定义事件了。 其实浏览器的事件也是观察者模式
- div.onclick = function click() {
- console.log('click')
- }
这里 function click 订阅了 div 的 click 事件,当我们的鼠标点击操作,事件发布,对应的 function 就会执行。这个 function click 就是一个观察者。
具象化理解
其实单纯的看代码实现,也可以理解。但是万物都是有联系的,这些编程模式设计之初也是来源于生活经验吧,所以,具象的理解也是很重要的体验。
我们举一个结婚办酒席的例子。比如你的一个好朋友要结婚了,'结婚'这件事情不是天天发生,一辈子就那么一… 两次 (maybe more),所以我们的'去参加他的婚礼'肯定不是天天发生,只是在特定的时候。我肯定不能天天去问他,'今天你结婚吗,我来参加酒席啊'。一次两次还行,天天问,sb 啊。假如是一个找不到对象的单身汪,被你天天这么问,还不得杀了你。。
那这里就需要有一个事件发布了,也就是'通知你'。
我作为一个观察者,去订阅他'结婚' 的这个事件,就是我们是好朋友,他的婚礼我肯定去,我们已经说好了。那么我就是观察者,'我去参加婚礼'就是对应而来的动作。当我订阅了'结婚' 这个事件,我就不需要天天去问他了,我该干嘛干嘛,该去泡妞,约饭,看电影,约… 就干嘛。
当他发布'结婚' 这个事件,通知到我了,我就在特定的时候,去 do'参加婚礼酒席'这个行为 function …
- //模拟代码
- //我订阅了'marry' 事件
- wo.on('marry',
- function() {
- //去参加婚礼酒席
- })
- //然后他发布。比如浏览器的点击
- // 对应的我的 function就会执行
解耦 / 模块 / 功能
其实在代码中是需要一个类似于中间服务的, 管理发布订阅的中间者。
比如浏览器中的事件处理程序,他提供了订阅的接口,然后接收'事件' 信号 发布给你。让 js 代码跟浏览器之间有了联系,互动。而本来是两个不同的东西。
在我看来,观察者模式最大的好处就是在于解耦,会让我们一锅端的代码,分功能,分模块的抽离开,更加清晰,开发成本变低,也容易维护。
比如:
1、我们项目里的 view 展示层跟 model(数据处理) 逻辑层,最开始写页面,ajax,字符串拼接,请求回一个接口拼一下,然后给 dom。可能我们一个 js 文件,一个 function 里面又请求了接口,又去负责 view 的展示。
- var xhr = new XMLHttpRequest ()
- xhr.open('get',url)
- xhr.onreadystatechange = function () {
- if(this.readyState !== 4) return
- if(this.status === 200) {
- divs.innerhtml = '<p>' + this.response + '</p>'
- //
- }
- }
- xhr.responseType = 'json'
- xhr.send(null)
其实应该是请求跟 展示渲染分开的。
- //请求
- function getData () {
- var xhr = new XMLHttpRequest ()
- xhr.open('get',url)
- xhr.onreadystatechange = function () {
- if(this.readyState !== 4) return
- if(this.status === 200) {
- this.emit('渲染')
- // 发布
- }
- }
- xhr.responseType = 'json'
- xhr.send(null)
- }
- //渲染
- function view () {}
- xhr.on('渲染',view)
直接在状态码 200 那里放个 callback,也能做到。但是,如果我有两个甚至渲染函数,处理不同的东西,我每次还要改成不同的函数吗。 这个相同请求的过程是不是还要写一遍。
用观察者的话
- function view1 () {}
- function view2 () {}
- function view3 () {}
- function view4 () {}
- if(我要渲染view1) {
- xhr.on('渲染',view1) //订阅
- xhr.on('渲染',view2)
- }else{
- xhr.on('渲染',view3)
- xhr.on('渲染',view4)
- }
好处就在于我的 getData 这个功能,方法就只负责请求数据,然后他会暴露一个接口,供我去添加方法。这样我的 getData 就相对来说是比较完整的功能模块,就算我有再多的情况,我的 getData 里面的代码是不会改动的了。
有时候我们经常为了实现业务,添加一个新的功能,而去更改我们之前写好的代码,导致我们本来的功能模块被改的面目全非。
而且会有好多的重复代码。
过程? or 模块?
当然封好一个 好的完整的功能模块是挺难的一件事情,但我们起码要有个开始。
订阅去添加方法,发布了事件池就执行。
2、MV* 类框架
MVC 也是一种设计模式,这里面也都应用了观察者。
他内部也都是各种发布订阅,好像是一个观察者模型,从而实现了一个模拟的内存中的 dom 改变,计算出那个 DOM 节点应该改变。当然具体实现要做好多事情… 就不…
3、redux
简单实现一个 createstore 函数
- //这是一个工厂函数,可以创建store
- const createStore = (reducer) = >{
- let state; // 定义存储的state
- let listeners = [];
- // getState的作用很简单就是返回当前是state
- const getState = () = >state;
- //定义一个派发函数
- //当在外界调用此函数的时候,会修改状态
- const dispatch = (action) = >{
- //调用reducer函数修改状态,返回一新的状态并赋值给这个局部状态变量
- state = reducer(state, action);
- //依次调用监听函数,通知所有的监听函数
- listeners.forEach(listener = >listener());
- }
- //订阅此状态的函数,当状态发生变化的时候记得调用此监听函数
- const subscribe = function(listener) {
- //先把此监听 加到数组中
- listeners.push(listener);
- //返回一个函数,当调用它的时候将此监听函数从监听数组移除
- return function() {
- listeners = listeners.filter(l = >l != listener);
- }
- }
- //默认调用一次dispatch给state赋一个初始值
- dispatch();
- return {
- getState,
- dispatch,
- subscribe
- }
- }
- let store = createStore(reducer);
- //把数据渲染到界面上
- const render = () = >{
- document.body.innerText = store.getState();
- }
- // 订阅状态变化事件,当状态变化时用监听函数
- store.subscribe(render);
- render();
- var INCREASE_ACTION = {
- type: 'INCREMENT'
- };
- document.addEventListener('click',
- function(e) {
- //触发一个Action
- store.dispatch(INCREASE_ACTION);
- })
4、在 node 中的作用 大多数时候我们不会直接使用 EventEmitter,而是在对象中继承它。包括 fs、net、 http 在内的,只要是支持事件响应的核心模块都是 EventEmitter 的子类。
实现一个可以发布订阅的类
- 'use strict'
- class EmitterEvent {
- constructor() {
- //构造器。实例上创建一个事件池
- this._event = {}
- }
- //on 订阅
- on (eventName, handler) {
- // 根据eventName,事件池有对应的事件数组,
- 就push添加,没有就新建一个。
- // 严谨一点应该判断handler的类型,是不是function
- if(this._event[eventName]) {
- this._event[eventName].push(handler)
- } else {
- this._event[eventName] = [handler]
- }
- }
- emit (eventName) {
- // 根据eventName找到对应数组
- var events = this._event[eventName];
- // 取一下传进来的参数,方便给执行的函数
- var otherArgs = Array.prototype.slice.call(arguments,1)
- var that = this
- if(events) {
- events.forEach((event) => {
- event.apply(that, otherArgs)
- })
- }
- }
- // 解除订阅
- off (eventName, handler) {
- var events = this._event[eventName]
- if(events) {
- this._event[eventName] = events.filter((event) => {
- return event !== handler
- })
- }
- }
- // 订阅以后,emit 发布执行一次后自动解除订阅
- once (eventName, handler) {
- var that = this
- function func () {
- var args = Array.prototype.slice.call(arguments,0)
- handler.apply(that, args)
- this.off(eventName,func)
- }
- this.on(eventName, func)
- }
- }
- var event = new EmitterEvent()
- function a (something) {
- console.log(something,'aa-aa')
- }
- function b (something) {
- console.log(something)
- }
- event.once('dosomething',a)
- event.emit('dosomething', 'chifan')
- //event.emit('dosomething')
- // event.on('dosomething',a)
- // event.on('dosomething',b)
- // event.emit('dosomething','chifan')
- // event.off('dosomething',a)
- // setTimeout(() => {
- // event.emit('dosomething','hejiu')
- // },2000)
当我们需要用的时候,只需要继承一下这个 EmitterEvent 类。要操作的实例就可以用 on,emit 方法,也就是可以用发布订阅。比如 XHR,组件…
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0512/327484.html