单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存,window对象。单例模式在js开发中单例模式的用途非常广泛,比如页面中有一个登录浮窗,无论单击多少次登录窗口,这个窗口只会创建一次,那么这个窗口就适合用单例模式来创建。

1、单例模式实例:

要实现单例模式并不复杂,无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次取该类实例的时候,之间返回之前创建的对象。

 var Sign=function(name){
     this.name=name;
     this.instance=null;
 }

 Sign.prototype.getName=function(){
     return this.name;
 }

 Sign.getInstance=function(name){
     if(!this.instance){
         this.instance=new Sign(name);
     }
     return this.instance;
 }

 var obj1=Sign.getInstance("gao");
 var obj2=Sign.getInstance("xiang");
 alert(obj1===obj2);   //true

2.用代理实现单例模式。

我们可以把负责管理单例的逻辑转移到代理类Signleton中。

 var createDiv=function(html){
     this.html=html;
     this.init();
 }

 createDiv.prototype.init=function(){
     var div=document.createElement("div");
     document.innerHTML=this.html;
     document.body.appendChild(div);
 }

 var Signleton=(function(){
     var instance;
     return function(html){
         if(!instance){
             instance=new createDiv(html);
         }
         return instance;
     }
 })();

 var obj1=new Signleton("h1");
 var obj2=new Signleton("h2");
 alert(obj1===obj2)  //true

这样写的好处显而易见,复用性强。

3.惰性单例

什么是惰性单例,就是指在需要的时候在实现单例,比如在点击登录按钮的时候再创建登录浮窗。而不是页面已加载就已经创建好登录浮窗,因为有些用户并不需要登录,而只是看看天气,看看新闻。

 var createLogin=(function(){
     var div;
     return function(){
         if(!div){
             div=document.createElement('div');
             div.innerHTML='登录窗口';
             div.style.display='none';
             document.body.appendChild(div);
         }
         return div;
     }
 })();

 document.getElementById('loginBtn').addEventListener('click',function(){
     var loginWindow=createLogin();
     loginWindow.style.display='block';
 },false);

4.通用惰性单例。

上一段代码违反了单一职责原则,如果有一天我们并不是createDiv,而是createFrame,createScript时就必须改动源代码了。我们需要把不变的部分隔离出来。实现一个通用的函数。

这个逻辑始终是一样的。

 var obj;
 if(!obj){
   obj=xxx;
 }

现在封装一个getSignle函数。

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

创建对象的方法fn被当场参数传入getSignle函数中,之后让getSignle返回一个函数,resule标志对象是否被创建,如果没创建,result保存fn的执行结果,由于result存放在闭包环境中,所以不会被销毁,在下次请求时,直接返回已经存在的result。

 var createLoginDiv=function(){
     var div=document.createElement("div");
     div.innerHTML="我是登录窗口";
     div.style.display='none';
     document.body.appendChild(div);
     return div;
 }

 var divLayout=getSignle(createLoginDiv);

 document.getElementById("loginBtn").addEventListener('click',function(){
     var loginWindow=divLayout();
     loginWindow.style.display='block';
 },false);

JS设计模式1-单例模式的更多相关文章

  1. [JS设计模式]:单例模式(1)

    什么是单例模式 所谓单例,就是一个类只有一个实例,实现的方法一般是先判断是否存在实例,如果存在就直接返回,如果不存在就创建了再返回.这样确保了一个类只有一个实例对象. 实现的单例有很多种方式,最简单的 ...

  2. js设计模式总结-单例模式

    单例模式 解决的问题 保证实例只有一个,避免多个实现,从全局来看,这个实例的状态是唯一的. 实现原理 设置一个变量来记录实例,通过检测该变量是否为空来决定是否创建实例 非透明单例 所谓非透明就是用户在 ...

  3. JS设计模式之---单例模式

    单例模式是保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式在现在面向对象的语言Java,C#,C++等等中也有很多用到,其实它在Javascript中使用同样非常广泛. var Cre ...

  4. JS设计模式之单例模式

    单例模式 单例模式的定义是:保证一个类只有一个实例,并提供一个访问它的全局访问点.比如说购物车,在一个商城中,我们只需要一个购物车,购物车在整个商城中是唯一的,不需要多次创建,即使多次点击购物车按钮, ...

  5. JS 设计模式二 -- 单例模式

    单例模式 概念 单例模式 就是保证一个类只有一个实例,并提供一个访问它的全局访问点. 实现方法 先判断实例是否存在,如果存在直接返回,如果不存在就创建实例后在返回,确保了一个类只有一个实例对象. va ...

  6. 浅谈js设计模式之单例模式

    单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器中的 window 对象等.在 JavaS ...

  7. JS设计模式之单例模式(一)

    单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这 就确保了一个类只有一个实例对象. 在JavaScript里,实现单例的方式有很多种, ...

  8. Js常用的设计模式(1)——单例模式

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...

  9. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  10. js设计模式总结1

    js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...

随机推荐

  1. hibernate spring annotation setup

    First step setup for the pom.xml with hibernate dependency , hibernate dependency need to before the ...

  2. j$(function() j$(document).ready 区别

    $j(document).ready(function(){}); // 或者  $j(function(){}); 第一个是直接使用Jquery调用function,第二个是在文档加载完毕后才去调用 ...

  3. IOS图像拉伸解决方案

    UIButton实现背景拉伸,即图片两端不拉伸中间拉伸的办法有如下两种: 第一种方法很简单而且使用性更广.做法就是直接拉伸想要setBackgroundImage的image,代码如下: UIImag ...

  4. 【C++沉思录】句柄2

    1.[C++沉思录]句柄1 存在问题: 句柄为了绑定到Point的对象上,必须定义一个辅助类UPoint,如果要求句柄绑定到Point的子类上,那就存在问题了.2.有没有更简单的办法呢? 句柄使用Po ...

  5. android studio 修改成自己jks(keystore)签名文件

    项目中有微信分享和微信支付,微信支付后台设置是正式签名md5值不便调试,最初直接在后台创建二个应用一个测试一个正式的,但二个人同时开发这个测试版本的md5又遇到麻烦,所以想到android studi ...

  6. phpStorm无法使用svn1.8的解决办法

    1.安装SVN的Command Lines Tools. 2.在phpStorm的SVN属性中,将Use Command Line Client填入:C:\Program Files\Tortoise ...

  7. 【国内独家首发】iPhone4 iOS7不完美越狱教程新鲜出炉

    准备工作: 1.Mac (OSX 10.8以上系统): 2.iPhone 4 (iPhone3, 1 iOS 7.0.2): 3.iPhone 4数据线一根: 4.下载越狱工具包:ios7_jb_ki ...

  8. Snippet: align a TextView around an image

    A few weeks ago I discovered the Spans on Android,after reading the wonderful post by Flavien Lauren ...

  9. 是时候放弃sublime了

    今天下午在忍无可忍之下终于卸载了sublime,最为一个在gui下最顺手的编辑器,放弃是需要非常充足的理由的. 放弃sublime无非是因为以下几点原因: 收费.我用的是未注册版的sublime,保存 ...

  10. [AX2012 R3]在SSRS报表中使用QR二维码

    AX2012是自带生成QR二维码的类,可以很方便的用在SSRS报表中,下面演示如何在RDP的报表中使用二维码,首先从定义临时表开始: 字段URL是要用于二维码的字符串,QrCode是container ...