JS设计模式1-单例模式
单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存,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-单例模式的更多相关文章
- [JS设计模式]:单例模式(1)
什么是单例模式 所谓单例,就是一个类只有一个实例,实现的方法一般是先判断是否存在实例,如果存在就直接返回,如果不存在就创建了再返回.这样确保了一个类只有一个实例对象. 实现的单例有很多种方式,最简单的 ...
- js设计模式总结-单例模式
单例模式 解决的问题 保证实例只有一个,避免多个实现,从全局来看,这个实例的状态是唯一的. 实现原理 设置一个变量来记录实例,通过检测该变量是否为空来决定是否创建实例 非透明单例 所谓非透明就是用户在 ...
- JS设计模式之---单例模式
单例模式是保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式在现在面向对象的语言Java,C#,C++等等中也有很多用到,其实它在Javascript中使用同样非常广泛. var Cre ...
- JS设计模式之单例模式
单例模式 单例模式的定义是:保证一个类只有一个实例,并提供一个访问它的全局访问点.比如说购物车,在一个商城中,我们只需要一个购物车,购物车在整个商城中是唯一的,不需要多次创建,即使多次点击购物车按钮, ...
- JS 设计模式二 -- 单例模式
单例模式 概念 单例模式 就是保证一个类只有一个实例,并提供一个访问它的全局访问点. 实现方法 先判断实例是否存在,如果存在直接返回,如果不存在就创建实例后在返回,确保了一个类只有一个实例对象. va ...
- 浅谈js设计模式之单例模式
单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器中的 window 对象等.在 JavaS ...
- JS设计模式之单例模式(一)
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这 就确保了一个类只有一个实例对象. 在JavaScript里,实现单例的方式有很多种, ...
- Js常用的设计模式(1)——单例模式
<Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
随机推荐
- hibernate spring annotation setup
First step setup for the pom.xml with hibernate dependency , hibernate dependency need to before the ...
- j$(function() j$(document).ready 区别
$j(document).ready(function(){}); // 或者 $j(function(){}); 第一个是直接使用Jquery调用function,第二个是在文档加载完毕后才去调用 ...
- IOS图像拉伸解决方案
UIButton实现背景拉伸,即图片两端不拉伸中间拉伸的办法有如下两种: 第一种方法很简单而且使用性更广.做法就是直接拉伸想要setBackgroundImage的image,代码如下: UIImag ...
- 【C++沉思录】句柄2
1.[C++沉思录]句柄1 存在问题: 句柄为了绑定到Point的对象上,必须定义一个辅助类UPoint,如果要求句柄绑定到Point的子类上,那就存在问题了.2.有没有更简单的办法呢? 句柄使用Po ...
- android studio 修改成自己jks(keystore)签名文件
项目中有微信分享和微信支付,微信支付后台设置是正式签名md5值不便调试,最初直接在后台创建二个应用一个测试一个正式的,但二个人同时开发这个测试版本的md5又遇到麻烦,所以想到android studi ...
- phpStorm无法使用svn1.8的解决办法
1.安装SVN的Command Lines Tools. 2.在phpStorm的SVN属性中,将Use Command Line Client填入:C:\Program Files\Tortoise ...
- 【国内独家首发】iPhone4 iOS7不完美越狱教程新鲜出炉
准备工作: 1.Mac (OSX 10.8以上系统): 2.iPhone 4 (iPhone3, 1 iOS 7.0.2): 3.iPhone 4数据线一根: 4.下载越狱工具包:ios7_jb_ki ...
- 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 ...
- 是时候放弃sublime了
今天下午在忍无可忍之下终于卸载了sublime,最为一个在gui下最顺手的编辑器,放弃是需要非常充足的理由的. 放弃sublime无非是因为以下几点原因: 收费.我用的是未注册版的sublime,保存 ...
- [AX2012 R3]在SSRS报表中使用QR二维码
AX2012是自带生成QR二维码的类,可以很方便的用在SSRS报表中,下面演示如何在RDP的报表中使用二维码,首先从定义临时表开始: 字段URL是要用于二维码的字符串,QrCode是container ...