发布订阅模式封装

发布订阅设计模式

(function () {
	/*
	 * 真实项目中的封装（类库、插件、组件）基本上都是基于面向对象的思想
	 *    1. 创建类和类的实例，每一个实例之间是相互独立的，有自己的私有属性方法，还能拥有公共的属性方法
	 *    2. 只要保证方法中的THIS是实例，这样各个方法中就可以实现信息的通信
	 *    ......
	 */
	const hasOwn = Object.prototype.hasOwnProperty;//检验对象中是否存在某个属性obj.hasOwnProperty('a')==hasOwn.call(obj,'a')=>检验对象obj是否有a属性
	
	class Sub {
		// 创建一个事件池
		$pond = {};
		//事件池的结构
		// AA:[func1,func2,...funcN],
        // BB:[fn1,fn2,...fnN],
        // [type]:[func1,func2,...funcN]
		

		// 向事件池中追加方法
		$on(type, func) {
			// 每一次增加的时候，首先验证是否存在这个自定义事件：存在则把方法加入到指定事件类型的容器末尾（但是需要做去重处理）、不存在则创建一个自定义事件，属性值是空数组，再把方法加入到数组中
			let $pond = this.$pond,
				arr = null;
			!hasOwn.call($pond, type) ? $pond[type] = [] : null;
			arr = $pond[type];
			!arr.includes(func) ? arr.push(func) : null;
		}

		// 从事件池中移除方法
		$off(type, func) {
			let $pond = this.$pond,
				arr = $pond[type];
			if (!arr) return;
			for (let i = 0; i < arr.length; i++) {
				if (func === arr[i]) {
					// SPLICE删除改变原来的数据（原始数组中移除这些项，移除项后面的每一项都会向前改变其索引），为了防止数据塌陷问题，我们在移除的时候，应该不去改变数据的结构，而是把当前项赋值为null
					// arr.splice(i, 1);
					arr[i] = null;
					break;
				}
			}
		}

		// 通知事件池中的方法执行
		$emit(type, ...params) {
			let $pond = this.$pond,
				arr = $pond[type];
			if (!arr) return;
			for (let i = 0; i < arr.length; i++) {
				let itemFunc = arr[i];
				if (typeof itemFunc !== "function") {
					// 此时把非函数的项都移除掉
					arr.splice(i, 1);
					i--;
					continue;
				}
				itemFunc(...params);
			}
		}
	}

	// 暴露给全局用的API
	/* window.subscribe = function subscribe() {
		return new Sub;
	}; */

	let sub = new Sub;
	['$on', '$off', '$emit'].forEach(item => {
		window[item] = function anonymous(...params) {
			sub[item](...params);
		};
	});
})();