javascript设计模式-优快云博客

本文介绍了JavaScript中的六项设计模式原则，并详细解析了发布订阅者模式、工厂模式、单例模式及装饰者模式等概念与应用实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript架构中设计模式的6个原则 1：单一职责 2：开闭原则：这一段程序对扩展时开放的，对修改是封闭的， 3：里氏替换原则 4：接口隔离 5：依赖倒置一：发布订阅者模式(观察者模式)：定义了一种一对多的关系，让多个观察者对象同时监听某一主题对象，这一主题对象发生变化时，就会通知所有的观察者对象，使得他们能够自动更新自己。 var center={ list:[], //用于登记vip信息的箱子 addvip:function(callback){ this.list.push(callback) }, delvip:function(){ var index=-1; for(var i=0;i<this.list.length;i++){ if(callback==this.list[i]){ index=i; break; //跳出循环 } } this.list.splice(index,1) }, callvip:function(){ //将数组中保存的函数都运行一遍

}
复制代码

} vue2.0中数据双向是通过数据劫持实现的，用到了发布订阅者模式， var dog={}; Object.defineProperty(dog,'name',{ set:function(value){ name=value; console.log(value); }, get:function(){ return '<'+ name +">"; } }); dog.name="gou"; console.log(dog.name);

二：工厂模式：原型模式： function fn(){

 }
 fn.prototype.name="kang"//把属性写在原型上
复制代码

三：单例模式：保证一个类只有一个实例，并且提供一个访问它的全局访问点，有些对象只需要一个，传统的单例模式：和new创建对象的调用不一样，调用者要调用xxx.getInstance才能获得该单例， function singleton(name){ this.name=name } Singleton.getinstance=function(name){ if(this.instance){ return this.instance }else{ this.instance=new Singleton(name); return this.instance; } }; var a=Singleton.getInstance('a'); var b=Singleton.getInstance('b');

var Mvp=function(){ var instace=null function Mvp(yourname){

    if(instance){
        return instance
    }else{
        this.name=yourname
        instance=this
    }
}
Mvp.prototype.say=function(){
    console.log(this.name)
}
return Mvp;
复制代码

}()

四：装饰者模式： function f(){console.log("a")} function f1(callback){ callback() } f1(f)