js设计模式-工厂模式 单例模式 观察者模式 发布订阅模式 原型模式 代理模式 迭代器模式

1 工厂模式

// 工厂模式: 调用函数返回对象function factory(name, age){return {name: name,age: age}
}const person1 = factory('Tom', 18);
// 类似的库使用工厂函数的有: jQuery, React.createElement,axios.create,vue.createApp等

2 单例模式

// 单例模式：单例方法返回唯一实例 单例模式的核心是确保只有一个实例，并提供全局访问
// 单例模式实现class SingleTon {static #instance = null;static getInstance(){if(!this.#instance){this.#instance = new SingleTon();}return this.#instance;}
}
// 这是单例模式的方法
const singleTon1 = SingleTon.getInstance();
const singleTon2 = SingleTon.getInstance();
console.log(singleTon1 === singleTon2); // true
// 类似的库使用单例模式的有: vue.use vant中的notify等

3 观察者模式

// 观察者模式：一个对象可能有一个或多个观察者，当对象状态发生变化时，会通知所有观察者（执行对应的回调）
// 最典型的例子是DOM事件 如下就是一个简单的观察者模式
const button = document.getElementById('button');
button.addEventListener('click', function(){console.log('click');
})
// 可以有多个事件监听器（观察者）
button.addEventListener('click', function(){console.log('click2');
})

4 发布订阅模式

// 发布订阅模式：发布者和订阅者之间没有直接联系，通过第三方来实现调度（事件总线）
// 一般来说有四种行为 $on注册事件 $off清除事件 $emit触发时间 $once仅触发一次
// 现在简单的实现一个发布订阅模式
class MygoEventBus{#handlers = {}$on(event, callback){if(!this.#handlers[event]){this.#handlers[event] = []}this.#handlers[event].push(callback)}$emit(event, ...args){this.#handlers[event] ||  (this.#handlers[event] = [])this.#handlers[event].forEach(callback => {callback(...args)})}$off(event){this.#handlers[event] = undefined}$once(event, callback){this.$on(event, (...args) => {callback(...args)this.$off(event)})}
}// 测试代码
const bus = new MygoEventBus();
bus.$on('click', function(){console.log('click');
})
bus.$on('click', function(){console.log('click2');
})
bus.$emit('click');
bus.$emit('click');
bus.$off('click');
bus.$emit('click');
bus.$once('click', function(){console.log('click3');
})
bus.$emit('click');
bus.$emit('click');
// 输出结果为 click click2 click click2 click3

5 原型模式

// 原型模式：类似于使用object.create()方法创建对象
// 通过原型模式创建对象
const person = {name: 'Tom',age: 18
}const person2 = Object.create(person);
// 再Vue中数组和对象的响应式原理就是通过原型模式实现的

6 代理模式

// 代理模式：代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问
// 下面举例一个应用场景（类似于DNS查找）就是数据缓存中间件 代码如下：
class AreaData{cache = {}getAreaCode(code){if(!this.cache[code]){// 模拟请求数据console.log('请求数据')this.cache[code] = 'area' + code}return this.cache[code]}
}const areaData = new AreaData();
console.log(areaData.getAreaCode(1));
// 第二次请求数据时，直接返回缓存数据
console.log(areaData.getAreaCode(1));
console.log(areaData.getAreaCode(2));

7 迭代器模式

// 迭代器模式：只要一个对象实现了迭代器协议和next方法，就可以被for...of循环遍历
// 实现迭代器可以使用generator或者手动实现
// [Symbol.iterator]要求返回一个迭代器对象，迭代器对象要求有next方法，next方法返回一个对象，对象有value和done两个属性
const obj = {[Symbol.iterator]: () =>{function* gen(){yield 1;yield 2;yield 3;}return gen();}
}for(let item of obj){console.log(item); // 1 2 3
}// 手动实现迭代器
const obj2 = {data: [1, 2, 3],[Symbol.iterator]: function(){let index = 0;let that = this;return {next(){return {value: that.data[index],done: index++ === that.data.length}}}}
}for(let item of obj2){console.log(item); // 1 2 3
}// 迭代器模式模仿python中的range
function* range(end){for(let i = 0; i < end; i ++){yield i;}
}for(let item of range(10)){console.log(item); // 0 1 2 3 4 5 6 7 8 9
}