定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点 。就想我们在开发中有些对象只需要一个，例如window对象。

1. 实现单例模式

  1. var Singleton = function( name ) {
  2.     this.name = name;
  3. };
  4. Singleton.prototype.getName = function() {
  5.     alert ( this.name );
  6. };
  7. Singleton.getInstance = function( name ) {
  8.     if ( !this.instance ) {   //这里的this指的是Singleton，所以两次调用的都是同一个this
  9.         this.instance = new Singleton( name );
  10.     }
  11.     return this.instance;
  12. };
  13. var a = Singleton.getInstance( 'sven1' );
  14. var b = Singleton.getInstance( 'sven2' );
  15. alert ( a === b ); // true

我们通过 Singleton.getInstance 来获取 Singleton 类的唯一对象，这种方式相对简单，这种方式非常类似于Java的单例模式实现，但有 一个问题，就是增加了这个类的“不透明性”，Singleton 类的使用者必须知道这是一个单例类， 跟以往通过 new的方式来获取对象不同，这里偏要使用 Singleton.getInstance 来获取对象。 那么有没有办法直接New出来的就是一个单例的对象呢？

2.透明的单例模式

  1. var Singleton = (function() {
  2.   var instance;
  3.   var Singleton = function(name) {
  4.     if ( instance ) {
  5.       return instance;
  6.     }
  7.     this.name = name;
  8.     return instance = this;
  9.   };
  10.   Singleton.prototype.getName = function() {   //就近原则，用的是上面的Singleton
  11.     alert ( this.name );
  12.   };
  13.   return Singleton;
  14. })();
  15. var a = new Singleton( 'sven1' );
  16. var b = new Singleton( 'sven2' );
  17. console.log(a == b)

虽然现在完成了一个透明的单例类的编写，但它同样有一些缺点。
为了把 instance 封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回，真正的 Singleton 构造方法，这增加了一些程序的复杂度，阅读起来也不是很舒服。 所以说有利有弊吧

3.Javascript中的单例模式

前面提到的几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从 “类”中创建而来。在以类为中心的语言中，这是很自然的做法。比如在 Java 中，如果需要某个对象，就必须先定义一个类，对象总是从类中创建而来的。

但 JavaScript 其实是一门无类(class-free)语言（虽然ES6中有了类的概念），也正因为如此，生搬单例模式的概念并无 意义。在 JavaScript 中创建对象的方法非常简单，既然我们只需要一个“唯一”的对象，为什 么要为它先创建一个“类”呢?

单例模式的核心是确保只有一个实例，并提供全局访问。

问题：现在有一个需求是点击页面上的登录按钮，显示一个登录弹窗，很显然这个弹窗是唯一的，也就是单例的

（1）

  1. <html>
  2.   <body>
  3.     <button id="loginBtn">登录</button>
  4.   </body>
  5.   <script>
  6.   var loginLayer = (function() {
  7.     var div = document.createElement( 'div' );
  8.     div.innerHTML = '我是登录浮窗';
  9.     div.style.display = 'none';
  10.     document.body.appendChild( div );
  11.     return div;
  12.   })();
  13.   document.getElementById( 'loginBtn' ).onclick = function(){
  14.   loginLayer.style.display = 'block'; };
  15.   </script>
  16.  </html>

上面解决方案是在页面加载完成的时候便创建好这个 div 浮窗，这个浮窗一开始肯定是隐藏状态的，当用户点击登录按钮的时候，它才开始显示，但是有时候我们根本不需要进行登录操作，如果一开始就被创建好其实是一种浪费资源的行为，DOM资源可是很珍贵的

（2）

  1. <html>
  2.   <body>
  3.     <button id="loginBtn">登录</button>
  4.   </body>
  5.   <script>
  6.   var createLoginLayer = function() {
  7.     var div = document.createElement( 'div' );
  8.     div.innerHTML = '我是登录浮窗';
  9.     div.style.display = 'none';
  10.     document.body.appendChild( div );
  11.     return div;
  12.   };
  13.   document.getElementById( 'loginBtn' ).onclick = function(){
  14.     var loginLayer = createLoginLayer();
  15.     loginLayer.style.display = 'block';
  16.   };
  17.   </script>
  18. </html>

上面的方法，虽然做到了点击时才创建，但失去了单例的效果。当我们每次点击登录按钮的时候，都会 创建一个新的登录浮窗 div。虽然我们可以在点击浮窗上的关闭按钮时(此处未实现)把这个浮 窗从页面中删除掉，但这样频繁地创建和删除节点明显是不合理的，也是不必要的。

（3）

  1. <html>
  2.   <body>
  3.     <button id="loginBtn">登录</button>
  4.   </body>
  5.   <script>
  6.   var createLoginLayer = (function(){
  7.     var div;
  8.     return function() {
  9.       if ( !div ) {
  10.         div = document.createElement( 'div' );
  11.         div.innerHTML = '我是登录浮窗';
  12.         div.style.display = 'none';
  13.         document.body.appendChild( div );
  14.       }
  15.       return div;
  16.     }
  17.   })();
  18.   document.getElementById( 'loginBtn' ).onclick = function(){
  19.     var loginLayer = createLoginLayer();
  20.     loginLayer.style.display = 'block';
  21.   };
  22.   </script>
  23. </html>

上述方法，用一个变量来判断是否已经创建过登录浮窗，和上面上面实现单例的类的原理是一样的

4.通用的单例模式

如果在项目中用到了很多单例的情况，如果每个都做判断，其实是相当复杂的事情，但能不能写一个通用的方法，经过这个方法处理的就是单例的

  1. <html>
  2.   <body>
  3.     <button id="loginBtn">登录</button>
  4.   </body>
  5.   <script>
  6.   var getSingle = function(fn){
  7.     var result;
  8.     return function() {
  9.       return result || ( result = fn .apply(this, arguments ) );
  10.     }
  11.   };
  12.   var createLoginLayer = function() {
  13.     var div = document.createElement( 'div' );
  14.     div.innerHTML = '我是登录浮窗';
  15.     div.style.display = 'none';
  16.     document.body.appendChild( div );
  17.     return div;
  18.   };
  19.   var createMask = function() {
  20.     var div = document.createElement( 'div' );
  21.     div.innerHTML = 'mask';
  22.     div.style.display = 'none';
  23.     document.body.appendChild( div );
  24.     return div;
  25.   };
  26.   var createSingleLoginLayer = getSingle( createLoginLayer );
  27.   var createMask = getSingle( createMask );
  28.   document.getElementById( 'loginBtn' ).onclick = function(){
  29.     var loginLayer = createSingleLoginLayer();
  30.     var mask = createMask();
  31.     loginLayer.style.display = 'block';
  32.     mask.style.display = 'block';
  33.   };
  34.   </script>
  35. </html>

我们发现在开发中并不会单独使用弹出窗，遮罩层和弹出窗是经常结合在一起使用，上面的方法就能使弹出窗和遮罩层都是单例的，其中核心的方法就是getSingle

在getSingle函数中，创建对象的方法 fn 被当成参数动态传入 getSingle 函数 ，result 变量因为身在闭包中，它永远不会被销毁。在将来的请求中，如果 result 已经被赋值，那么它将返回这个值 。

5. ES6中的单例模式

  1. class SingletonApple {
  2.   constructor(name, creator, products) {
  3.       this.name = name;
  4.       this.creator = creator;
  5.       this.products = products;
  6.   }
  7.   //静态方法
  8.   static getInstance(name, creator, products) {
  9.     if(!this.instance) {
  10.       this.instance = new SingletonApple(name, creator, products);
  11.     }
  12.     return this.instance;
  13.   }
  14. }
  1. let appleCompany = SingletonApple.getInstance('苹果公司', '乔布斯', ['iPhone', 'iMac', 'iPad', 'iPod']);

ES6有类，也有静态方法，实现单例模式也显得非常的简单，学过Java的同学能看出几乎和Java的实现一模一样，直接调用SingletonApple的静态方法getInstance就能获得一个单例对象。

Javascript单例模式介绍到此结束，有不对的地方请及时指出

浅析Javascript单例模式的更多相关文章

  1. javascript单例模式的理解

    javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...

  2. 浅析 JavaScript 中的 函数 currying 柯里化

    原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...

  3. 浅析 JavaScript 中的 函数 uncurrying 反柯里化

    柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...

  4. [转] JavaScript 单例模式

    定义 确保一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式使用的场景 比如线程池.全局缓存等.我们所熟知的浏览器的window对象就是一个单例,在JavaScript开发中,对于这种只需要 ...

  5. Javascript单例模式概念与实例

    前言 和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...

  6. 轻松掌握：JavaScript单例模式

    单例模式 定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点: 实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例; 主要用于:全局缓存.登录浮窗等只需要 ...

  7. 浅析JavaScript访问对象属性和方法及区别

    属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸.跳跃等. 在JavaScript中通常使用”."运算符来存取对象的属性的值.或 ...

  8. 深入理解 JavaScript 单例模式 （Singleton Pattern）

    概念 单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在. 核心:确保只有一个实例,并提供全局访问. 实现思路 一个类能返回对象一个引用(永远是同 ...

  9. 浅析JavaScript事件流——冒泡

    一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...

随机推荐

  1. 洛谷.5300.[GXOI/GZOI2019]与或和(单调栈)

    LOJ BZOJ 洛谷 想了一个奇葩的单调栈,算的时候要在中间取\(\min\),感觉不靠谱不写了=-= 调了十分钟发现输出没取模=v= BZOJ好逗逼啊 题面连pdf都不挂了 哈哈哈哈 枚举每一位. ...

  2. 如何给小学生讲清楚ECC椭圆曲线加密

    对于RSA这套公私钥加密的思路,我以为我挺明白的,运用的娴熟自如. 当然现在RSA用的不多,而是基于ECC曲线来做签名验签,最大名鼎鼎的莫过于比特币. 可是前两天和别人讲代码,被问了ECC为什么可以用 ...

  3. JS精度问题（0.1+0.2 = 0.3吗？)

    一.引出问题 0.1+0.2 = 0.3吗?在JS中是这样的吗?我们写个测试代码不就知道了吗? 结果出人意料,并不像我们所想象的那样.那么这到底是为什么呢? 二.原因分析 JS浮点数存储机制: 三.解 ...

  4. Java IO 整理

    1.Java IO中的操作类之间的继承关系 2.在java中使用File类表示文件本身,可以直接使用此类完成文件的各种操作,如创建.删除 3.RandomAccessFile类可以从指定位置开始读取数 ...

  5. AWSS3异步等待上传成功返回结果

    /// <summary> /// 流上传文件 /// </summary> /// <param name="data">流内容</pa ...

  6. docker之使用System.Drawing生成图片缺少Gdiplus.dll错误

    1.在docker 上找到并运行需要System.Drawing的镜像 然后退出执行另一语句 docker run -it container01 进入镜像以方便安装gdiplus docker ex ...

  7. for循环：用turtle画一颗五角星

    import turtle # 设置初始位置 turtle.penup() turtle.left(90) turtle.fd(200) turtle.pendown() turtle.right(9 ...

  8. linux操作命令之压缩命令

    常用的压缩格式:    .zip     .gz     .bz2 一..zip格式压缩 zip 压缩文件名 源文件 压缩文件 zip -r 压缩文件名 源目录 压缩目录 解压缩 unzip 压缩文件 ...

  9. VBS列出windows更新列表

    Set objSession = CreateObject("Microsoft.Update.Session") Set objSearcher = objSession.Cre ...

  10. 请不要在JDK7及以上用Json-lib了

    [Json-lib 介绍] Json-lib 是以前 Java 常用的一个 Json 库,最后的版本是 2.4,分别提供了 JDK 1.3 和 1.5 的支持,最后更新时间是 2010年12月14日. ...