JS-观察者模式

  • 观察者对象包含
    • 一个消息容器
    • 三个方法
      • 订阅(注册)消息方法
      • 发布订阅的消息方法
      • 取消(移除)订阅方法
// 将观察者放在闭包中,当页面加载就立即执行
var Observer = (function () {
	// 防止消息队列暴漏而被篡改故将消息容器作为静态私有变量保存
	var _messages = {}
	return {
		// 注册信息接口
		regist(type, fn) {
			// 如果消息不存则应该创建一个该消息类型
			if (typeof _messages[type] === 'undefined') {
				// 将动作推入到该消息对应的动作执行队列中
				_messages[type] = [fn]
				// 如果此消息存在
			}else {
				// 将动作方法推入该消息对应的动作执行序列中
				_messages[type].push(fn)
			}
		},
		// 发布信息接口
		fire(type, args) {
			// 如果该消息没有被注册,则返回
			if (!_messages[type]) {
				return
			}
			var events = {
				type: type,
				args: args || {}
			},
			len = _messages[type].length
			// 遍历消息动作
			for (var i = 0; i < len; i++) {
				// 依次执行注册的消息对应的动作序列
				_messages[type][i].call(this, events)
			}
		},
		// 移除信息接口
		remove(type, fn) {
			// 如果消息动作队列存在
			if (_messages[type] instanceof Array) {
				// 从最后一个消息动作遍历
				for (var i = _messages[type].length - 1; i >= 0; i--) {
					// 如果存在该动作则在消息动作序列中移除相应动作
					_messages[type][i] === fn && _messages[type].splice(i, 1)
				}
			}
		}
	}
})()

// 注册一个消息
Observer.regist('test', function(e) {
	console.log(e.type, e.args.msg)
})
// 发布这则消息
Observer.fire('test', { msg: '传递参数' })
今天你学习了吗!!!
原文地址:https://www.cnblogs.com/nayek/p/12003289.html