发布订阅设计模式
(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);
};
});
})();