JS设计模式学习

灰太狼 2022-07-14 12:39 170阅读 0赞

## **单例模式** ##

单例模式：确保类只能被实例化一次。  
在该实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的新实例；如果实例已经存在，它直接返回该对象的引用。  
在[JavaScript][]里，实现单例的方式有很多种，其中最简单的一个方式是使用对象字面量的方法，其字面量里可以包含大量的属性和方法：

<script type="text/javascript">
    var mySingleton = {
        name:"lisi",
        age:23,
        sayName:function(){
         
            console.log("Hello lisi");
        }
    };
    </script>

如果以后要扩展该对象，你可以添加自己的私有成员和方法，然后使用闭包在其内部封装这些变量和函数声明。只暴露你想暴露的public成员和方法，样例代码如下：

<script type="text/javascript">
    var mySingleton = function(){
         
        //声明私有变量和方法
        var name = "lisi";
        function showName(){
         
            console.log(name);
        }
        //公有变量和方法(可以访问私有变量和方法)
        return {
            publicMethod:function(){
         
                showName();
            },
            publicVar:"我是公有变量"
        };
    };
    var single = mySingleton();
    single.publicMethod();//lisi
    console.log(single.publicVar);//我是公有变量
    </script>
     <script type="text/javascript">
    var mySingleton = (function(){
          
        var instance;//保存实例的引用
        function init(){
          
            //私有变量和函数
            var privateVar = "lisi";
            function privateMethod(){
          
                console.log(privateVar);
            }
            return {
                //公有变量和函数
                publicMethod :function(){
          
                    privateMethod();
                },
                publicVar:"我是公有变量"
            };
        }
        return {
            getInstance:function(){
          
                if(!instance){
                    //只有在用到的时候才进行初始化
                    instance = init();
                }
                //如果存在则直接返回，不存在则新初始化一个实例
                return instance;
            }
        };
    })();
    mySingleton.getInstance().publicMethod();//lisi
    console.log(mySingleton.getInstance().publicVar);//我是公有变量
    </script> 
    
     模块模式 
     该模式使用闭包封装私有状态和组织。它提供了一种包装混合公有/私有方法和变量的方式，防止其泄漏至全局作用域，并与别的开发人员的接口发生冲突。通过该模式，只需返回一个公有API，其他的一切则都维持在私有闭包里。
    
    
    jQuery等类库封装就采用了模块模式。 
    
    Demo: 
     <script type="text/javascript">
    var myModule = (function(){
          
        //私有变量
        var myPrivateVar = 12;
        //私有函数
        var myPrivateMethod = function(foo){
          
            console.log(foo);
        };
        return {
            //公有变量
            myPublicVar:"foo",
            //调用私有变量和方法的公有函数
            myPublicMethod:function(bar){
          
                //增加私有变量计数器值
                myPrivateVar++;
                myPrivateMethod(bar);
            }
        };
    })();
    console.log(myModule.myPublicVar);//foo
    myModule.myPublicMethod("hello world");//hello world
    </script> 
     观察者模式 
     观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
    
    
    使用观察者模式的好处： 
    
     
      
       支持简单的广播通信，自动通知所有已经订阅过的对象。 
       页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。 
       发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变。
    
    
    JS里对观察者模式的实现是通过回调来实现的 
    
    Demo： 
      
     <script type="text/javascript">
    function Observer() {
          
        this.fns = [];//存放回调的数组
    }
    Observer.prototype = {
        //增加一个订阅
        subscribe: function (fn) {
          
            this.fns.push(fn);
        },
        //删除一个订阅
        unsubscribe: function (fn) {
          
            //过滤退订的函数
            this.fns = this.fns.filter(function (el) {
          
                                if (el !== fn) {
                                    return el;
                                }
                            }
                        );
        },
        //发布
        public: function (args, thisObj) {
          
            var scope = thisObj || window;
            // console.log(scope);//window
            this.fns.forEach(function (el) {
          
                                el.call(scope, args);
                            }
                        );
        }
    };
    //创建一个pubsub对象
    //该对象原型上有发布、订阅、退订三个方法
    var o = new Observer();
    var f1 = function (data) {
          
        console.log('王五: ' + data + ', 赶紧干活了！');
    };
    var f2 = function (data) {
          
        console.log('李四: ' + data + ', 找他加点工资去！');
    };
    //订阅
    o.subscribe(f1);
    o.subscribe(f2);
    //发布
    o.public("老板回来了！");
    //王五退订
    o.unsubscribe(f1);
    //再次发布，只会触发李四对应的回调
    o.public("老板回来了！");
    </script> 
     构造函数模式 
     对于构造函数大家都不陌生，构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。我们可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。
    
    
    Demo: 
     <script type="text/javascript">
    function Person(name,age){
          
        this.name = name;
        this.age = age;
        this.sayInfo = function(){
          
            console.log(this.name + "---" + this.age);
        }
    }
    var person1 = new Person("lisi",23);
    var person2 = new Person("wangwu",24);
    person1.sayInfo();//lisi---23
    person2.sayInfo();//wangwu---24
    //这样貌似看上去很完美，但是sayInfo()在每次创建对象的时候都重新定义了(下面代码返回false表明，两个实例的sayInfo不是同一个)，最好的方法是让所有Person类型的实例都共享这个sayInfo()方法，这样如果有大批量的实例的话，就会节约很多内存。
    console.log(person1.sayInfo == person2.sayInfo);//false
    </script> 
     工厂模式 
     工厂模式就好比现实生活中的工厂可以产生大量相似的产品，工厂模式适用于：做同样的事情，实现相同的效果。其解决了创建多个相似对象的问题。 
    
    Demo: 
     <script type="text/javascript">
    function createPerson(name,age,job){
          
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.job = job;
        obj.sayInfo = function(){
          
            console.log(this.name+"--"+this.age+"--"+this.job);
        };
        return obj;
    }
    var person1 = createPerson("lisi",23,"student");
    var person2 = createPerson("wangwu",34,"worker");
    person1.sayInfo();//lisi--23--student
    person2.sayInfo();//lisi--23--student
    //返回都是object 无法识别对象的类型 不知道他们是哪个对象的实列
    console.log(typeof person1);//object
    console.log(typeof person2);//object
    </script> 函数createPerson能接受三个参数name,age,job等参数，可以无数次调用这个函数，每次返回都会包含三个属性和一个方法的对象。
    
    
    工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题(避免了产生大量的重复代码)。 
    
    优点：解决了创建多个相似对象的问题 
    
    缺点：没有解决对象识别的问题(即怎样确定一个对象的类型)

[JavaScript]: http://lib.csdn.net/base/javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 js设计模式

一、单例模式 1. 定义保证一个类仅有一个实例，并提供一个访问它的全局访问点 2. 核心确保只有一个实例，并提供全局访问 3. 实现在vue脚

秒速五厘米/ 2022年12月06日 15:20/ 0 赞/ 136 阅读

相关 js设计模式

转自：[https://www.cnblogs.com/libin-1/p/6337115.html][https_www.cnblogs.com_libin-1_p_633

╰+攻爆jí腚メ/ 2022年10月01日 12:56/ 0 赞/ 224 阅读

相关 JS设计模式学习

单例模式单例模式：确保类只能被实例化一次。在该实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的新实例；如果实例已经存在，它直接返回该对象的引用。

灰太狼/ 2022年07月14日 12:39/ 0 赞/ 171 阅读

相关关于js的设计模式之学习（一）---观察者模式

关于设计模式大家应该不陌生吧，今天我正好在看组件的时候看到有关于设计模式的东西，所以决定写下来以供以后学习和复习，不然脑子总是喜欢忘掉啊设计模式有很多种，什么观察者

╰半橙微兮°/ 2022年07月12日 16:55/ 0 赞/ 21 阅读

相关设计模式学习

一工厂模式工厂方法的定义及使用场景工厂模式的通用模式代码二抽象工厂模式

r囧r小猫/ 2022年07月11日 11:16/ 0 赞/ 183 阅读

相关 js设计模式

（1）单例模式 > 定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现方法：先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了

雨点打透心脏的1/2处/ 2022年06月15日 01:57/ 0 赞/ 203 阅读

相关 js设计模式

正文 1. 单例模式(SingleTon) 定义也叫单例模式，核心思想是确保一个类只对应一个实例。虽然js是弱类型的语言，但是js也有构造函数和实例。所以

绝地灬酷狼/ 2022年05月21日 04:24/ 0 赞/ 206 阅读

相关设计模式学习

[设计模式之工厂模式、单例模式–来自郝文龙][Link 1] [【java设计模式】之单例（Singleton）模式][java_ _Singleton] [【java

浅浅的花香味﹌/ 2022年05月14日 15:25/ 0 赞/ 209 阅读

相关设计模式学习

设计模式六大原则 [http://www.uml.org.cn/sjms/201211023.asp\1][http_www.uml.org.cn_sjms_201211

旧城等待，/ 2022年03月30日 15:51/ 0 赞/ 203 阅读

相关设计模式学习

设计模式的使用是为了可重用代码、让代码更容易被他人理解、保证代码可靠性学好设计模式，做一个能Coding的IT民工。设计模式的分类（一）：创建型（5种）

淩亂°似流年/ 2021年06月24日 15:58/ 0 赞/ 430 阅读