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设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
随机推荐
- windows 隐藏文件方法
隐藏: 然后在里面输入:attrib +s +a +h +r f:\123 (f的意思就是F盘,123就是你新建的文件夹名字),然后按回车,你会发现F盘下的123文件夹不见的,其实就是被你隐藏了. 文 ...
- nginx 重写 rewrite 基础及实例
nginx rewrite 正则表达式匹配 大小写匹配 ~ 为区分大小写匹配 ~* 为不区分大小写匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 文件及目录匹配 -f和!-f用来判断是否 ...
- C++ Data Member内存布局
如果一个类只定义了类名,没定义任何方法和字段,如class A{};那么class A的每个实例占用1个字节的内存,编译器会会在这个其实例中安插一个char,以保证每个A实例在内存中有唯一的地址,如A ...
- jsp:forward response.sendRedirect
jsp中<jsp:forward page=""/>和response.sendRedirect("")两种跳转的区别 一.response.sen ...
- Spark RDD解密
1. 基于数据集的处理: 从物理存储上加载数据,然后操作数据,然后写入数据到物理设备; 基于数据集的操作不适应的场景: 不适合于大量的迭代: 不适合交互式查询:每次查询都需要对磁盘进行交互. 基于数 ...
- Scala 深入浅出实战经典 第52讲:Scala中路径依赖代码实战详解
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- android 虚线
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
- Java socket 多线程编程 示例
参照网上代码: 1.工程: 2.代码: Client.java package com.my.socket.test; import java.io.BufferedReader; import ja ...
- 在java项目中使用log4j的实例
测试log4j的项目结构 Log4j.properties的路径为 src/config/log4j Log4j.properties文件的内容 下面定义日志输出级别是 INFO,并且配置了2个 ...
- Django 源码小剖: 初探中间件(middleware)
因为考虑到文章的长度, 所以 BaseHandler 的展开被推迟了. 在 BaseHandler 中隐藏着中间件的信息, 较常见的 SessionMiddleware 就已经默认安装. BaseH ...