zoukankan      html  css  js  c++  java
  • JavaScript设计模式(二)

    什么是单例模式?  

     单例模式从字面上的理解是不困难的,js上就是指只有一个对象实例。

    为什么需要单例模式?

     我们可以将一些成员变量封装在一个单例对象中,每次访问这些变量都只能从这个单例对象进行访问,这样我们就可以看作将这些成员变量封装在了一个命名空间当中,可以避免无意间改写代码 。

    如何创建单例模式?

    最简单的方法

    var Singleton = {
        attribute1: true,
        attribute2: 10,
        method:function(){
            console.log("A simple singleton example");
        }
    }

    即通过对象字面量创建对象就是最简单的单例模式的实现了。 

    但是呢,通过这种方法创建的单例对象是没有私有变量的,如果我们不希望私有变量暴露出来,我们可以使用闭包的方式创建单例模式。 

    闭包方式创建拥有私有变量的单例对象

      

    var Singleton = (function(){
        var instance;
        function initInstance(){
            var object = new Object();
            object.msg = "Singleton instance";
            return object;
        }
        return {
            getInstance:function(){
                if(!instance){
                    instance = initInstance();
                }
                return instance;
            }
        };
    })();
    
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
    instance1 === instance2;//true

    即首先创建了一个立即执行函数,这样可以形成块级作用域,instance等变量也就成了私有变量。 最后,我们返回了一个含有函数的对象,通过调用这个函数,就会得到一个实例了,并且我们也只能访问到这个实例的msg属性,不能访问到instance属性,这刚好是满足我们的需求的。 

    其他方式;

    function Universe() {
    
        // 判断是否存在实例
        if (typeof Universe.instance === 'object') {
            return Universe.instance;
        }
    
        // 其它内容
        this.start_time = 0;
        this.bang = "Big";
    
        // 缓存
        Universe.instance = this;
    
        // 隐式返回this
    }
    
    // 测试
    var uni = new Universe();
    var uni2 = new Universe();
    console.log(uni === uni2); // true

    即我们创建了一个构造函数, 然后进入之后就判断实例是否存在,如果存在,就直接返回,否则就创建,隐式返回实例,最后,不管我们怎么new,得到的一定都是一样的。 

    这里比较重要的步骤就是 Universe.instance = this 这个缓存步骤了。

  • 相关阅读:
    P3703 [SDOI2017]树点涂色
    CF1446D2 Frequency Problem (Hard Version)
    P3703 [SDOI2017]树点涂色
    ESP8266 Ticker库
    CSS 动画
    Sublime 安装
    XMLHttpRequest.responseText
    数据结构
    Linux 无需公网IP,远程SSH访问Linux服务器!
    Linux 安装
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6658074.html
Copyright © 2011-2022 走看看