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 Tools tab使用介绍
Jul 14 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vue项目环境变量配置的实现方法
Oct 12 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python实现自动发送邮件功能
2021/03/02 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
教师自荐信范文
2015/03/06 职场文书
硕士论文致谢范文
2015/05/14 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers