定义

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

1. 实现单例模式

var Singleton = function( name ) {

    this.name = name;

};

Singleton.prototype.getName = function() {

    alert ( this.name );

};

Singleton.getInstance = function( name ) {

    if ( !this.instance ) {   //这里的this指的是Singleton，所以两次调用的都是同一个this

        this.instance = new Singleton( name );

    }

    return this.instance;

};

var a = Singleton.getInstance( 'sven1' );

var b = Singleton.getInstance( 'sven2' );

alert ( a === b ); // true

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

2.透明的单例模式

var Singleton = (function() {

  var instance;

  var Singleton = function(name) {

    if ( instance ) {

      return instance;

    }

    this.name = name;

    return instance = this;

  };

  Singleton.prototype.getName = function() {   //就近原则，用的是上面的Singleton

    alert ( this.name );

  };

  return Singleton;

})();

var a = new Singleton( 'sven1' );

var b = new Singleton( 'sven2' );

console.log(a == b)

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

3.Javascript中的单例模式

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

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

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

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

（1）

<html>

  <body>

    <button id="loginBtn">登录</button>

  </body>

  <script>

  var loginLayer = (function() {

    var div = document.createElement( 'div' );

    div.innerHTML = '我是登录浮窗';

    div.style.display = 'none';

    document.body.appendChild( div );

    return div;

  })();

  document.getElementById( 'loginBtn' ).onclick = function(){

  loginLayer.style.display = 'block'; };

  </script>

 </html>

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

（2）

<html>

  <body>

    <button id="loginBtn">登录</button>

  </body>

  <script>

  var createLoginLayer = function() {

    var div = document.createElement( 'div' );

    div.innerHTML = '我是登录浮窗';

    div.style.display = 'none';

    document.body.appendChild( div );

    return div;

  };

  document.getElementById( 'loginBtn' ).onclick = function(){

    var loginLayer = createLoginLayer();

    loginLayer.style.display = 'block';

  };

  </script>

</html>

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

（3）

<html>

  <body>

    <button id="loginBtn">登录</button>

  </body>

  <script>

  var createLoginLayer = (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' ).onclick = function(){

    var loginLayer = createLoginLayer();

    loginLayer.style.display = 'block';

  };

  </script>

</html>

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

4.通用的单例模式

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

<html>

  <body>

    <button id="loginBtn">登录</button>

  </body>

  <script>

  var getSingle = function(fn){

    var result;

    return function() {

      return result || ( result = fn .apply(this, arguments ) );

    }

  };

  var createLoginLayer = function() {

    var div = document.createElement( 'div' );

    div.innerHTML = '我是登录浮窗';

    div.style.display = 'none';

    document.body.appendChild( div );

    return div;

  };

  var createMask = function() {

    var div = document.createElement( 'div' );

    div.innerHTML = 'mask';

    div.style.display = 'none';

    document.body.appendChild( div );

    return div;

  };

  var createSingleLoginLayer = getSingle( createLoginLayer );

  var createMask = getSingle( createMask );

  document.getElementById( 'loginBtn' ).onclick = function(){

    var loginLayer = createSingleLoginLayer();

    var mask = createMask();

    loginLayer.style.display = 'block';

    mask.style.display = 'block';

  };

  </script>

</html>

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

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

5. ES6中的单例模式

class SingletonApple {

  constructor(name, creator, products) {

      this.name = name;

      this.creator = creator;

      this.products = products;

  }

  //静态方法

  static getInstance(name, creator, products) {

    if(!this.instance) {

      this.instance = new SingletonApple(name, creator, products);

    }

    return this.instance;

  }

}

let appleCompany = SingletonApple.getInstance('苹果公司', '乔布斯', ['iPhone', 'iMac', 'iPad', 'iPod']);

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

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

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

javascript单例模式的理解
javascript单例模式的理解阅读目录理解单例模式使用代理实现单例模式理解惰性单例编写通用的惰性单例单例模式使用场景回到顶部理解单例模式单例模式的含义是: 保证一个类只有一个实例 ...
浅析 JavaScript 中的函数 currying 柯里化
原文:浅析 JavaScript 中的函数 currying 柯里化何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...
浅析 JavaScript 中的函数 uncurrying 反柯里化
柯里化柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
[转] JavaScript 单例模式
定义确保一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式使用的场景比如线程池.全局缓存等.我们所熟知的浏览器的window对象就是一个单例,在JavaScript开发中,对于这种只需要 ...
Javascript单例模式概念与实例
前言和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...
轻松掌握：JavaScript单例模式
单例模式定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点: 实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例; 主要用于:全局缓存.登录浮窗等只需要 ...
浅析JavaScript访问对象属性和方法及区别
属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸.跳跃等. 在JavaScript中通常使用”."运算符来存取对象的属性的值.或 ...
深入理解 JavaScript 单例模式（Singleton Pattern）
概念单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在. 核心:确保只有一个实例,并提供全局访问. 实现思路一个类能返回对象一个引用(永远是同 ...
浅析JavaScript事件流——冒泡
一.什么是事件冒泡流我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...

随机推荐

3dmax 3dmax计算机要求 3dmax下载
渲染首先是要X64兼容台式电脑,笔记本不行,笔记本就是学生拿来玩还行,渲染大图笔记本真的是发热. 配置一般的电脑和笔记本千万不要尝试安装3dmax2019了,很卡的,3dmax2019只有64位,没有 ...
BZOJ.4842.[NEERC2016]Delight for a Cat(费用流)
BZOJ 参考这儿. 首先如果一个活动的时间满足条件,那么另一个活动也一定满足.还有就是这题就是费用流没有为什么.不妨假设最初所有时间都用来睡觉,那么我们要对每个$k$大小区间选出\([t2,k- ...
lvm快照备份数据库(Mysql5.7)
备份的目的能够防止由于机械故障以及人为误操作带来的数据丢失,例如将数据库文件保存在了其它地方. 备份的分类以操作过程中服务的可用性分: 冷备份:cold backup mysql服务关闭,mysq ...
HTML入门13
构建表格使用colspan和rowspan添加无单位的数字值作为属性来实现行合并和列合并: <col>来定义列的样式,每一个<col>都会制定每列的样式,对于不需要指定列的样 ...
虚拟机下Ubuntu扩容及磁盘重新分区-Gparted
转自: https://blog.csdn.net/timsley/article/details/50742755
CommonsChunkPlugin
CommonsChunk 插件的作用就是提取代码中的公共代码,然后将公共模块打包到一个独立的文件中,以便在其它的入口和模块中使用,原理就是把多个入口共同的依赖都给定义成一个新入口多种打包情况: 单一 ...
Json对象与Json字符串的转化、JSON字符串与Java对象的转换
一.Json对象与Json字符串的转化 1.jQuery插件支持的转换方式: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符 ...
【ASP】response和sever对象实现用户登录
1.问题提出设计两个登录界面:一个register.asp页面用于输入账号,密码等信息进行登录.另一个页面welcome.asp用于显示登录成功的信息.利用request的两个对象response和 ...
微信小程序如何发送短信验证码，无需搭建服务器
自从微信小程序提供云开发支持,开发者无需搭建后台服务器,使用微信提供的核心API就可以实现应用功能,此时就需要小程序能够自己发送短信,比如短信验证码,榛子云短信(http://smsow.zhenzi ...
俄罗斯方块(三)："流动"的方块
问题的提出: 俄罗斯方块允许90度的坡,是不是有点不够科学#(滑稽) 想办法加一种会“滑坡”的方块本文两大部分: 详细的描绘是怎样的“流动” 写代码,并整合进游戏本文基于我写的俄罗斯方块(一): ...

浅析Javascript单例模式

定义