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 相关文章推荐
一个基于jquery的文本框记数器
Sep 19 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
简述Vue中容易被忽视的知识点
Dec 09 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
TensorFlow Session会话控制&Variable变量详解
2018/07/30 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python3.5安装python3-tk详解
2019/04/26 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
用python读取xlsx文件
2020/12/17 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
竞选班长演讲稿
2013/12/30 职场文书
交通安全教育制度
2014/02/02 职场文书
服装采购员岗位职责
2014/03/15 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
学校党支部承诺书
2015/04/30 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang