設計模式之觀察者模式

觀察入微

觀察者模式(Observer):又被稱爲發佈-訂閱模式或消息機制,定義一種依賴關係,解決了主體對象與觀察者之間功能的耦合。

舉個新聞評論的栗子
大體思路如圖所示:
在這裏插入圖片描述
在這裏插入圖片描述

// 新聞的觀察者 
var NevsObserver = (function() {
	// 存放消息方法
	var _message = {};
	return {
		// 註冊事件 
		register: function(type, func) {
			if(typeof _message[type] === 'undefined') {
				_message[type] = [func]
			} else {
				_message[type].push(func)
			}
		},
		// 執行方法,如果方法存在則執行,方法不存在則return
		fire: function(type, msg) {
			if(!_message[type])  return;
			// 消息類型存在
			const args = {
				type: type,
				msg: msg || {}
			};
			i = 0;
			// 遍歷方法下存在的方法
			for(; i < _message[type].length; i++) {
				_message[type][i].call(this, args)
			}
		},
		// 將方法從_message中remove
		remove: function(type, func) {
			if(_message[type] instanceof Array) {
				var i = _message[type].length - 1
				for(; i > 0; i --) {
					_message[type][i] == func && _message[type].splice(i, 1)
				}
			}
		}
	}
})()
  • 測試
// 註冊新增評論事件
NevsObserver.register('addComment', function(e) {
	console.log(e.type, "評論參數:" + e.msg)
})

// 執行新增評論事件
NevsObserver.fire('addComment', {
	id: 11,
	name: "Ya Du",
	content: "我新加的評論"
})

在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章