目錄
- 簡介
- 實作
- 創建觀察者物件
簡介
觀察者模式由稱作發布-訂閱者模式或訊息機制，該模式定義一種依賴關系，旨在解決主體物件與觀察者之間功能的耦合，
例如案例：想實作一個評論模塊，當用戶發送訊息時，在展示模塊末尾追加新的評論，同時用戶訊息模塊中的訊息數量會相應增加，洗掉評論時，用戶訊息模塊數量減少，但是該評論模塊之前有有多個開發人員參與，模塊之間閉包獨立，不想讓新實作的代碼參與到之前的專案代碼中，那么觀察者模式就是解決該需求的利器，
實作
創建觀察者物件
首先需要先創建一個觀察者物件，該物件里面有一個訊息容器，并且存在訂閱訊息，取消訂閱訊息，發送訂閱訊息這三個動作方法，
var Observer = (function () {
var _message = {};
return {
//注冊訂閱資訊
register: function () {},
//取消訂閱資訊
remove: function () {},
//發送訂閱資訊
send: function () {},
};
})();
以上已經形成觀察者物件的雛形，接下來就是實作這三個方法了，register作用是將訂閱者注冊的訊息推入訊息佇列，因此該方法接收兩個數，訊息型別及相應的處理動作，
register: function (type, fn) {
//如果該訊息型別尚未存在則先創建一個訊息型別
if (typeof _message[type] === undefined) {
_message[type] = fn;
} else {
//如果此訊息型別存在了，則向該型別的訊息序列中推入一條執行方法
_messagep[type].push(fn);
}
}
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);
}
}
最后一個功能便是注銷方法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);
}
}
}
三個方法均已經實作，下面就來測驗吧
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啦"}
代碼地址：https://github.com/CcXxWw112233/base_demo/tree/master/designMode/observer
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255233.html
標籤：其他
上一篇：css實作垂直居中的方式