js单例模式详解实例


Posted in Javascript onNovember 21, 2013

什么是单例?

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

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 );
Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
微信小程序版翻牌小游戏
Jan 26 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
Ajax同步与异步传输的示例代码
Nov 21 #Javascript
jquery与prototype框架的详细对比
Nov 21 #Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 #Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 #Javascript
探讨javascript是不是面向对象的语言
Nov 21 #Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 #Javascript
Javascript对象属性方法汇总
Nov 21 #Javascript
You might like
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
js的event详解。
2006/09/06 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
零基础小白多久能学会python
2020/06/22 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
读书心得体会
2013/12/28 职场文书
学术会议主持词
2014/03/17 职场文书
工商管理专业自荐信
2014/06/03 职场文书
大学同学聚会感言
2015/07/30 职场文书
大学新生入学感想
2015/08/07 职场文书
任命书格式模板
2015/09/22 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA