美文网首页
面试题2:实现Singleton模式

面试题2:实现Singleton模式

作者: IvyAutumn | 来源:发表于2018-12-28 19:35 被阅读0次

    知识点:JS设计模式之单例模式
    参考来源:
    http://www.cnblogs.com/TomXu/archive/2012/02/20/2352817.html
    https://blog.csdn.net/yisuowushinian/article/details/52003127

    一、单例模式的概念

    保证一个类仅有一个实例,并且提供一个访问它的全局访问点。

    实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

    单例模式典型的应用场景:单击按钮时,页面中会出现一个登陆浮窗,而该登录浮窗是唯一的,无论单击多少次按钮,这个浮窗都会被创建一次,则适合用单例模式创建。

    二、单例模式的作用和注意事项

    • 模式作用:
      1、模块间通信
      2、系统中某个类的对象只能存在一个
      3、保护自己的属性和方法
    • 注意事项:
      1、注意this的使用
      2、闭包容易造成内存泄露,不需要的要赶快干掉
      3、注意new的成本。(继承)

    三、单例模式的实现方法

    1. 使用命名空间
      最简单的方式是使用对象字面量
    var Singleton = {
      prop1: "prop1"
      prop2: "prop2"
      method1: function () {
        console.log("I am a method.");
      }
    }
    

    2.使用闭包封装私有变量
    这种方法把一些变量封装在闭包内部,只暴露一些接口跟外界通信

    var user = (function(){
        var _name = 'sven',
            _age = 29;
    
        return{
            getUserInfo: function(){
                return _name + '-' + _age;
            }
        }
    })();
    

    用下划线来约定私有变量_name和_age,他们被封装在闭包产生的作用域中,外部是访问不到这两个变量的,这就避免了对全局的命令污染。

    四、引入代理实现单例模式

    var CreateDiv = function(html) {
        this.html = html;
        this.init();
    };
    
    CreateDiv.prototype.init = function() {
        var div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
    
    var ProxySingletonCreateDiv = (function() {
        var instance;
        return function(html) {
            if (!instance) {
                instance = new CreateDiv(html);
            }
            return instance;
        }
    })();
    
    var a = new ProxySingletonCreateDiv('seven1');
    var b = new ProxySingletonCreateDiv('seven2');
    

    引入代理实现单例模式的特点:
    我们负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中。这样一来,CreateDiv就变成了一个普通的类,他跟ProxySingletonCreateDiv组合起来可以达到单例模式的效果。

    五、惰性单例

    惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点。

    //获取单例
    var getSingle = function(fn){
        var result;
        return function (){
            return result || (result=fn.apply(this,arguments));
        };
    };
    
    //创建div登录框
    var createLoginLayer=function (){
        var div= document.createElement('div');
        div.innerHTML='我是登录框';
        document.body.appendChild(div);
        return div;
    };
    
    //创建iframe的dom节点
    var createIframe=function(){
        //创建irame节点的代码
    }
    
    var createSingleLoginLayer = getSingle(createLoginLayer);
    var createSingleIframe=getSingle(createIframe);
    
    var loginLayer1 = createSingleLoginLayer();
    var loginLayer2 = createSingleLoginLayer();
    
    var iframe1=createSingleIframe();
    var iframe2=createSingleIframe();
    

    创建对象和管理单例的职责被分布在两个不同的方法中,这两个方法组合起来才具有单例模式的威力。

    相关文章

      网友评论

          本文标题:面试题2:实现Singleton模式

          本文链接:https://www.haomeiwen.com/subject/iifslqtx.html