单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存,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. xcode中嵌入framework(接入快用最新SDK遇到的问题)

      但xcode设置中并没有找到Embed Frameworks这个选项,使用以下方式添加 当遇到dyld: Library not loaded:xxxx  Reason: image not fo ...

  2. 【转】兼容iOS 10 资料整理

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

  3. ubuntu下安装Node.js(源码安装)

    最近使用hexo的过程中出现了问题,中间载nodejs安装的时候也耽误了些许时间,所以在此记录一下安装的过程. 环境:ubuntu14.0.4LTS,安装nodejs版本node-v0.10.36.t ...

  4. DataTable 排序

    DataTable newdtb = new DataTable(); newdtb.Columns.Add("Id", typeof(int)); newdtb.Columns. ...

  5. 基于Bootstrap的后台通用模板

    人总是比较刁的,世界的时尚趋势不断变化,对系统UI的审美也在不断疲劳中前进,之前觉得好好的UI,过了半年觉得平平无奇,不想再碰,需要寻求新的兴奋点. 下面这套UI就是半年前的(今日:2015-12), ...

  6. java生成解析xml的另外两种方法JAXB

     JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实例文档反 ...

  7. 计算A/3,不用除法

    int DividedBy3(int A) { ; ; i <= ; i += ) p += A << i; return (-p); }

  8. c#上iOS apns p12文件制作记录

    1.在桌面上建一个"apns_p12"文件夹,所有的保存和生成文件都放在这里 2.从钥匙串中生成CertificateSigningRequest.certSigningReque ...

  9. python + hadoop (案例)

    python如何链接hadoop,并且使用hadoop的资源,这篇文章介绍了一个简单的案例! 一.python的map/reduce代码 首先认为大家已经对haoop已经有了很多的了解,那么需要建立m ...

  10. 数据人员Sql必会列转行

    列转行上一篇博客已经介绍过了. 下面介绍一下行转列的实现 假设我们有一个数据表: CREATE TABLE row_to_line ( ) NOT NULL, -- 学生名称 yingyu integ ...