js单例模式详解实例

这篇文章主要介绍了什么是单例单例模式、使用场景,提供了3个示例给大家参考

什么是单例?

单例要求一个类有且只有一个实例,提供一个全局的访问点。因此它要绕过常规的控制器,使其只能有一个实例,供使用者使用,而使用着不关心有几个实例,因此这是设计者的责任

In JavaScript, Singletons serve as a shared resource namespace which isolate implementation code from the global namespace so as to provide a single point of access for functions.

在javascript中,单例被当做一个全局的命名空间,提供一个访问该对象的一个点。

使用场景

In practice, the Singleton pattern is useful when exactly one object is needed to coordinate others across a system. 

单例比较适用于一个对象和其他系统进行交互。

类比

单例有点类似于一个小组的小组长,在一段时间内只有一个小组长,有小组长来指定组员的工作,分配和协调和组员的工作。

实例1:这个是最简单的单例,通过key,value的形式存储属性和方法

var A = {
   xx:3,
   yy:4,
   B:function(el){

   },
   C:function(el){

   },
   D:function(el){

   },
   E:function(el){

   }
}

实例2:首先创建一个实例的引用,然后判断这个实例是否存在,如果不存在那么就创建,存在的话,就直接返回,保证有且只有一个。

var mySingleton = (function () {

// Instance 存储一个单例实例的引用
var instance;

function init() {

// Singleton

// 私有的方法和变量
function privateMethod(){
    console.log( "I am private" );
}

var privateVariable = "Im also private";

return {

  // 共有的方法和变量
  publicMethod: function () {
    console.log( "The public can see me!" );
  },

  publicProperty: "I am also public"
};

};

return {

// 如果实例不存在,那么创建一个
getInstance: function () {

  if ( !instance ) {
    instance = init();
  }

  return instance;
}

};

})();

var singleA = mySingleton;
var singleB = mySingleton;
console.log( singleA === singleB ); // true

实例3:

var SingletonTester = (function () {
  // options: an object containing configuration options for the singleton
  // e.g var options = { name: "test", pointX: 5};
  function Singleton( options )  {
    // set options to the options supplied
    // or an empty object if none are provided
    options = options || {};
    // set some properties for our singleton
    this.name = "SingletonTester";
    this.pointX = options.pointX || 6;
    this.pointY = options.pointY || ;
  }
  // our instance holder
  var instance;
  // an emulation of static variables and methods
  var _static  = {
    name:  "SingletonTester",
    // Method for getting an instance. It returns
    // a singleton instance of a singleton object
    getInstance:  function( options ) {
      if( instance  ===  undefined )  {
        instance = new Singleton( options );
      }
        return  instance;
    }
  };
  return  _static;
})();
var singletonTest  =  SingletonTester.getInstance({
  pointX:  5
});
// Log the output of pointX just to verify it is correct
// Outputs: 5
console.log( singletonTest.pointX ); 

单例模式

单例模式也称作为单子模式,更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。

下面是维基百科对单例模式的介绍:

在应用单例模式时,生成单例的类必须保证只有一个实例的存在,很多时候整个系统只需要拥有一个全局对象,才有利于协调系统整体的行为。比如在整个系统的配置文件中,配置数据有一个单例对象进行统一读取和修改,其他对象需要配置数据的时候也统一通过该单例对象来获取配置数据,这样就可以简化复杂环境下的配置管理。

单例模式的思路是:一个类能返回一个对象的引用(并且永远是同一个)和一个获得该实例的方法(静态方法,通常使用 getInstance 名称)。那么当我们调用这个方法时,如果类持有的引用不为空就返回该引用,否者就创建该类的实例,并且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法,避免其他函数使用该构造函数来实例化对象,只通过该类的静态方法来得到该类的唯一实例。

对于 JS 来说,巨大的灵活性使得其可以有多种方式实现单例模式,使用闭包方式来模拟私有数据,按照其思路可得:

  1. var single = (function(){
  2. var unique;
  3. function getInstance(){
  4. if( unique === undefined ){
  5. unique = new Construct();
  6. }
  7. return unique;
  8. }
  9. function Construct(){
  10. // ... 生成单例的构造函数的代码
  11. }
  12. return {
  13. getInstance : getInstance
  14. }
  15. })();

以上,unique便是返回对象的引用,而 getInstance便是静态方法获得实例。Construct 便是创建实例的构造函数。

可以通过 single.getInstance() 来获取到单例,并且每次调用均获取到同一个单例。这就是 单例模式 所实现的效果。

不过,对于JS来说,显然以上循规蹈矩的方式显得过于笨重,在不同的场景以不同的方式实现单体模式正是 JS 的优势

实现1: 最简单的对象字面量

  1. var singleton = {
  2. attr : 1,
  3. method : function(){ return this.attr; }
  4. }
  5. var t1 = singleton ;
  6. var t2 = singleton ;

那么很显然的, t1 === t2 。

十分简单,并且非常使用,不足之处在于没有什么封装性,所有的属性方法都是暴露的。对于一些需要使用私有变量的情况就显得心有余而力不足了。当然在对于 this 的问题上也是有一定弊端的。

实现2:构造函数内部判断

其实和最初的JS实现有点类似,不过是将对是否已经存在该类的实例的判断放入构造函数内部。

  1. function Construct(){
  2. // 确保只有单例
  3. if( Construct.unique !== undefined ){
  4. return Construct.unique;
  5. }
  6. // 其他代码
  7. this.name = "NYF";
  8. this.age="24";
  9. Construct.unique = this;
  10. }
  11. var t1 = new Construct() ;
  12. var t2 = new Construct() ;

那么也有的, t1 === t2 。

也是非常简单,无非就是提出一个属性来做判断,但是该方式也没有安全性,一旦我在外部修改了Construct的unique属性,那么单例模式也就被破坏了。

实现3 : 闭包方式

对于大着 灵活 牌子的JS来说,任何问题都能找到 n 种答案,只不过让我自己去掂量孰优孰劣而已,下面就简单的举几个使用闭包实现单例模式的方法,无非也就是将创建了的单例缓存而已。

  1. var single = (function(){
  2. var unique;
  3. function Construct(){
  4. // ... 生成单例的构造函数的代码
  5. }
  6. unique = new Constuct();
  7. return unique;
  8. })();

只要 每次讲 var t1 = single; var t2 = single;即可。 与对象字面量方式类似。不过相对而言更安全一点,当然也不是绝对安全。

如果希望会用调用 single() 方式来使用,那么也只需要将内部的 return 改为

return function(){

return unique;

}

以上方式也可以使用 new 的方式来进行(形式主义的赶脚)。当然这边只是给了闭包的一种例子而已,也可以在 Construct 中判断单例是否存在 等等。 各种方式在各个不同情况做好选着即可。

总结

总的来说,单例模式相对而言是各大模式中较为简单的,但是单例模式也是较为常用并且很有用的模式。在JS中尤为突出(每个对象字面量都可以看做是一个单例么~)。

记住,是否严格的只需要一个实例对象的类(虽然JS没有类的概念),那么就要考虑使用单例模式。

使用数据缓存来存储该单例,用作判断单例是否已经生成,是单例模式主要的实现思路。

时间: 2024-10-16 07:15:11

js单例模式详解实例的相关文章

9种Java单例模式详解(推荐)

单例模式的特点 一个类只允许产生一个实例化对象. 单例类构造方法私有化,不允许外部创建对象. 单例类向外提供静态方法,调用方法返回内部创建的实例化对象.  懒汉式(线程不安全) 其主要表现在单例类在外部需要创建实例化对象时再进行实例化,进而达到Lazy Loading 的效果. 通过静态方法 getSingleton() 和private 权限构造方法为创建一个实例化对象提供唯一的途径. 不足:未考虑到多线程的情况下可能会存在多个访问者同时访问,发生构造出多个对象的问题,所以在多线程下不可用这种

Java的位运算符详解实例

Java的位运算符详解实例——与(&).非(~).或(|).异或(^).右移(>>).左移(<<).无符号右移(>>>) 位运算符主要针对二进制, 它包括了:“与”.“非”.“或”.“异或”."右移"."左移"."无符号右移". 从表面上看似乎有点像逻辑运算符, 但逻辑运算符是针对两个关系运算符来进行逻辑运算, 而位运算符主要针对两个二进制数的位进行逻辑运算. 下面详细介绍每个位运算符. 1.与运

iOS开发——UI篇OC篇&amp;UICollectionView详解+实例

UICollectionView详解+实例 实现步骤: 一.新建两个类 1.继承自UIScrollView的子类,比如HMWaterflowView * 瀑布流显示控件,用来显示所有的瀑布流数据 2.继承自UIView的子类,比如HMWaterflowViewCell * 代表着瀑布流数据中的一个单元(一个格子) 3.总结 HMWaterflowView和HMWaterflowViewCell的关系实际上类似于 UITableView和UITableViewCell的关系 二.设计HMWater

开胃小菜——impress.js代码详解

README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看impress.js并没有遇到太大的阻碍,读代码用了一个小时,写这篇文章用了近三个小时,果然写文章比读代码费劲多了. 个人感觉impress.js的代码量(算上注释一共不到1000行)和难度(没有jQuery的各种black magic= =)都非常适合新手学习,所以写一个总结,帮助大家理解源码. 考

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

常用经典SQL语句大全完整版--详解+实例 《来自网络,很全没整理,寄存与此》

常用经典SQL语句大全完整版--详解+实例 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRANT,REVOKE,COMMIT,ROLLBACK) 首先,简要介绍基础语句: 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop data

[Android]Message,MessageQueue,Looper,Handler详解+实例

转http://www.eoeandroid.com/forum-viewthread-tid-49595-highlight-looper.html 一.几个关键概念 1.MessageQueue:是一种数据结构,见名知义,就是一个消息队列,存放消息的地方.每一个线程最多只可以拥有一个MessageQueue数据结构. 创建一个线程的时候,并不会自动创建其MessageQueue.通常使用一个Looper对象对该线程的MessageQueue进行管理.主线程创建时,会创建一 个默认的Loope

ORACLE函数之GREATEST函数详解实例

1           语法 GREATEST(expr_1, expr_2, ...expr_n) 2           说明 GREATEST(expr_1, expr_2, ...expr_n)函数从表达式(列.常量.计算值)expr_1, expr_2, ... expr_n等中找出最大的数返回.在比较时,OracIe会自动按表达式的数据类型进行比较,以expr_1的数据类型为准. 3    允许使用的位置 过程性语句和SQL语句. 4           示例 4.1        

Node.js npm 详解

Node.js npm 详解 一.npm简介 安装npm请阅读前辈的文章,很详细的介绍. npm的全称:Node Package Manager. (1)通俗的理解 其实从字面意思就可以理解这个产品有什么作用翻译为"Node包管理器".对,就是Node的包的一个管理工具,目前我尝试的有 下载并安装包(npm install [pkg]) 升级安装包(npm update [pkg]) 卸载安装包(npm uninstall/rm [pkg]),可以指定卸载包的版本号 - 其实这些命令很