前言：这段时间都在学习Vue的知识，虽然手边放着一本js高程，但确实好久没有好好复习了。温故而知新，因此特意把JS常见的设计模式总结，希望对大家有所帮助...
1. 工厂模式
释义：像工厂一样流水线般生产一个个对象
核心：return一个对象，创建不同的引用类型
// 工厂模式
function createPerson (){
//定义工厂
let person = {
name:'人',
walk:function(){
console.log('walk')
}
}
return person
}
let tangj = createPerson()
console.log(tangj.name) // 人
2. 构造函数模式
释义：在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用自定义的构造函数，在构造函数内部，this关键字引用的是新创建的对象。
核心：属性邦到this上，方法绑到prototype上，使用new来新增实例
function People(){
this.name = '人' //把属性写在构造函数内部
}
People.prototype.walk = function(){
console.log('walk') //方法写在原型对象上
}
let tangj = new People()
console.log(tangj.name) //人3. 单例模式
释义：保证一个类只有一个实例，并且仅提供一个访问它的全局访问点
核心：产生一个类的唯一实例
//单例模式
function createPeople (){
let name;
return function (useName){
return name || (name = useName) //如果name存在返回name，如果不存在返回传入的值
}
}
let single = createPeople()
console.log(single('tangj')) //tangj
console.log(single()) //tangj
console.log(single('tangjSir')) //tangj
4. 混合模式
释义：一般继承的过程就是混合模式
核心：提供能够被一个或一组子类简单继承功能的类
//混合模式
function People(name,age){
this.name = name
this.age = age
}
People.prototype.sayName = function(){
console.log(this.name)
}
function Student(name,age,score){
People.call(this,name,age);
this.score = score;
}
function creat(prototypeObj){
let empty = function(){};
empty.prototype = prototypeObj;
return new empty()
}
Student.prototype = creat(People.prototype);
Student.prototype.work = function(){
console.log('work')
}
5. 模块模式
核心：闭包
let Person = (function(){
let name = '小明';
function sayName(){
console.log(name)
}
return {
name:name,
sayName:sayName
}
})()
Person.sayName()//小明6. 发布订阅模式
释义：多个订阅者绑定一个发布者，当订阅者监听到发布者变化执行回调函数
核心：绑定事件
let EventCenter = (function(){
let events = {};
function on(evt,handler){
//实现监听
//使用“或”是为了可以对同一个事件多次进行回调
events[evt] = events[evt] || [];
events[evt].push({
handler:handler
})
}
function fire(evt,args){
if(!events[evt]){
return
}
for(let i = 0;i<events[evt].length;i++){
//遍历实现对同一事件的多次回调
events[evt][i].handler(args)
}
}
function off(name){
delete events[name];
}
return {
on:on, //订阅者
fire:fire, //发布者
off:off //取消订阅
}
})()
EventCenter.on('hello',function (num){
console.log(num)
})
EventCenter.on('hello',function(num){
console.log(num)
})
EventCenter.fire('hello',1) //打印两次 1