JavaScript设计模式之观察者模式
简介
观察者模式由称作发布-订阅者模式或消息机制,该模式定义一种依赖关系,旨在解决主体对象与观察者之间功能的耦合。
例如案例:想实现一个评论模块,当用户发送消息时,在展示模块末尾追加新的评论,同时用户消息模块中的消息数量会相应增加,删除评论时,用户消息模块数量减少。但是该评论模块之前有有多个开发人员参与,模块之间闭包独立,不想让新实现的代码参与到之前的项目代码中,那么观察者模式就是解决该需求的利器。
实现
创建观察者对象
首先需要先创建一个观察者对象,该对象里面有一个消息容器,并且存在订阅消息,取消订阅消息,发送订阅消息这三个动作方法。
var Observer = (function () { var _message = {}; return { //注册订阅信息 register: function () {}, //取消订阅信息 remove: function () {}, //发送订阅信息 send: function () {}, };})();123456789101112
以上已经形成观察者对象的雏形,接下来就是实现这三个方法了。register作用是将订阅者注册的消息推入消息队列,因此该方法接收两个数,消息类型及相应的处理动作。
register: function (type, fn) { //如果该消息类型尚未存在则先创建一个消息类型 if (typeof _message[type] === undefined) { _message[type] = [fn]; } else { //如果此消息类型存在了,则向该类型的消息序列中推入一条执行方法 _message[type].push(fn); } }123456789
send方法作用是当观察者发布一条消息时,将所有订阅者订阅的消息一次性全部执行。该方法接收两个参数,消息类型及动作执行时需要传递的参数。
send: function (type, args) { //校验当前消息队列中有没有注册该类型 if (!_message[type]) return; //定义消息信息 var events = { type: type, args: args || {}, }; i = 0; len = _message[type].length; //遍历消息动作 for (; i < len; i++) { //依次执行注册消息对应的动 _message[type][i].call(this, events); } }12345678910111213141516
最后一个功能便是注销方法remove,其功能是将订阅者注销的消息从消息队列中移除,因此我们需要两个参数,消息类型和要执行的某一个动作。
remove: function (type, fn) { //如果该消息动作队列存在 if (_message[type] instanceof Array) { var i = _message[type].length - 1; for (; i >= 0; i--) { //如果该动作存在则在消息动作序列中移除相应动作 _message[type][i] == fn && _message[type].splice(i, 1); } } }12345678910
三个方法均已经实现,下面就来测试吧
var fn_1 = function (param) { console.log("type_1_1", param);};var fn_2 = function (param) { console.log("type_1_2", param);};var fn_3 = function (param) { console.log("type_2_1", param);};var fn_4 = function (param) { console.log("type_2_2", param);};Observer.register("type_1", fn_1);Observer.register("type_1", fn_2);Observer.register("type_2", fn_3);Observer.register("type_2", fn_4);Observer.remove("type_2", fn_4);Observer.send("type_1", "吃饭啦!");Observer.send("type_2", "唱k啦");//打印结果//type_1_1 {type: "type_1", args: "吃饭啦!"}//type_1_2 {type: "type_1", args: "吃饭啦!"}//type_2_1 {type: "type_2", args: "唱k啦"}123456789101112131415161718192021222324252627
代码地址:https://github.com/CcXxWw112233/base_demo/tree/master/designMode/observer
赞 (0)