js中常见设计模式总结

js中常见设计模式总结

单例模式

1.只有一个实例。2.可以全局访问。3.节省内存开销

function single(name){
		this.name=name;	
        this.obj=null;
}
single.prototype.getName=function(){
  console.log(this.name)
}
single.prototype.createObj=function(name){
	if(!this.obj){
		this.obj=new single(name)
   }
   return this.obj;
}
let a=single.createObj("小明");
let b=single.createObj("小红");
console.log(a===b)//true

策略模式

1. 根据不同参数采用不同策略 2.情况决定行为

 function diam(radius){
  return  radius*2;
}
function  area(radius){
return radius*radius*Math.PI;
}
function circumference(radius){
return 2*Math.PI*radius;
}
function calculate(state,r){
return state(r);
}
var result=calculate(area,10);//计算半径为10圆的面积

组合模式

1.组合事件，一次完成多项功能

var MacroCommand=function(){
	return {
       list:[],
       add:function(task){
		this.list.push(task);
    },
    excute:function(){
    for(let i=0;i<this.list.length;i++){
    this.list[i].excute();
 	}
   }
 }
}
 const c1 = MacroCommand() // 基本对象

c1.add({
  excute: () => console.log('煮咖啡') // ②：基本对象调用这里的 excute，
})

const c2 = MacroCommand() // 组合对象

c2.add({
  excute: () => console.log('打开电视')
})

c2.add({
  excute: () => console.log('打开音响')
})

const c3 = MacroCommand()

c3.add({
  excute: () => console.log('打开空调')
})

c3.add({
  excute: () => console.log('打开电脑')
})

const macroCommand = MacroCommand()
macroCommand.add(c1)
macroCommand.add(c2)
macroCommand.add(c3)
macroCommand.excute()
// 煮咖啡
// 打开电视
// 打开音响
// 打开空调
// 打开电脑

命令模式

1.降低了系统耦合度 2.通过调用者调用接受者执行

const setCommand = function(button, command) {
    button.onClick = function() {
        command.excute()
    }
}

// --------------------  上面的界面逻辑由A完成，下面的由B完成

const menu = {
    updateMenu: function() {
        console.log('更新菜单')
    },
}

const UpdateCommand = function(receive) {
    return {
        excute: receive.updateMenu,
    }
}

const updateCommand = UpdateCommand(menu) // 创建命令

const button1 = document.getElementById('button1')
setCommand(button1, updateCommand)