初见JavaScript 观察者模式

原创 小滴00 译文 JavaScript 164阅读 2017-11-25 15:31:33 举报

观察者模式

小玄老师的包子铺开张了,但是不一定几点出笼新包子 。

菜牙去买包子,得知今天的卖完了,便跟小玄要了电话号码以便询问包子情况。

阿新也去买包子,同样得知今天的卖完了,也要了电话号。

‘小玄老板,包子今天蒸好了吗? ’,‘刚卖完,下次你请早啊。’

今后的几天,小玄每天都要接到很多人的催包子电话,非常疲惫。

小玄老板想到一个好办法,每天新包子出笼的时候,就给食客群发短信通知。食客如有需求就可以第一时间得到消息。

订阅者:菜牙、小新、路人甲

发布者:小玄

发布信息:包子出笼了

DOM模拟

页面上有 树 石头 云这些元素,我想通过点击按钮让这些元素都开始做运动

这篇文章共享之前我仍是要引荐下我自个的前端群:657137906,不论你是小白仍是大牛,小编我都挺期待,不定期共享干货,包含我自个整理的一份2017最新的前端材料和零根底入门教程,期待初学和进阶中的小伙伴。

下面这段代码可以实现我们的需求。我已经尽量克制我删除他们的欲望了(太难看了)。后续订阅者增加困难,行为修改困难,事件与行为解耦困难。在下文中,我们将会改变这些代码!

初见JavaScript观察者模式

刚接触js的朋友估计写过这种代码,不具备复用性、健壮性以及可维护性。我们一起改造一下

把DOM元素和行为分离开来,DOM元素作为订阅主体。 将用户与定制事件存储到clientList中

初见JavaScript观察者模式

如何进行元素的注册呢,clientlist作为订阅列表 ,通过 DOM-callBack数组映射对照方式绑定 订阅者和行为

初见JavaScript观察者模式
添加订阅者,这里我们要注意的是并没有用订阅者节点对象来进行行为操作,而是使用this动态指针保证业务清晰。此时我们存储到clientlist的DOM列表元素 还只是字符串哦~

初见JavaScript观察者模式

发布模块,同样遍历订阅列表,根据DOM内容作为主序列,通过下标联动callBack数组,取出DOM中每一项字符串作为节点对象参数得到对应的节点对象,通过apply将DOM节点对象作为行为调用主体替代上文订阅行为中的this。

初见JavaScript观察者模式

发布指令,注册过的订阅者都会按照注册行为进行改变

初见JavaScript观察者模式

JS代码,数组版

初见JavaScript观察者模式

JS代码,json版本

初见JavaScript观察者模式

初见JavaScript观察者模式
同学们可以思考下两种数据结构处理方式,优劣都在哪里? 希望对于这个粗糙的模型进行属于你的改进

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复