《JavaScript设计模式与开发实践》模式篇(1)—— 单例模式

栏目: JavaScript · 发布时间: 7年前

内容简介:使用 CreateDiv 单例类,它的作用是负责在页 面中创建唯一的 div 节点指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点创建唯一的浮窗

使用 CreateDiv 单例类,它的作用是负责在页 面中创建唯一的 div 节点

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( 'sven1' ); 
var b = new ProxySingletonCreateDiv( 'sven2' );
alert( a === b );  //true
复制代码

惰性单例

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

应用场景:

创建唯一的浮窗

var getSingle = function( fn ){
   var result;
   return function(){
       return result || ( result = fn .apply(this, arguments ) );
   } 
};
var createLoginLayer = function(){

    var div = document.createElement( 'div' );
    div.innerHTML = '我是登录浮窗';
    div.style.display = 'none';  
    document.body.appendChild( div );

    return div;
};
var createSingleLoginLayer = getSingle( createLoginLayer );
document.getElementById( 'loginBtn' ).onclick = function(){ 
    var loginLayer = createSingleLoginLayer(); 
    loginLayer.style.display = 'block';
};
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

运营攻略

运营攻略

陈辉 / 人民邮电出版社 / 2017-12 / 59

《运营攻略 移动互联网产品运营提升笔记》深入浅出地告诉大家什么是运营,梳理了移动互联网时代各类运营方向的工作重点与工作方法,结合实例指出了每类运营方向的提升要点;结合作者的亲身经历,解答了无数运营人与产品人纠结的运营与产品到底有什么异同的问题;指明了运营人的核心竞争力,并对处于不同阶段的运营人提出了相应的建议与要求;尤为难得的是,《运营攻略 移动互联网产品运营提升笔记》中还阐述了内容型产品与工具型......一起来看看 《运营攻略》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试