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 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
this和执行上下文实现代码
Jul 01 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
详解angularjs 学习之 scope作用域
Jan 15 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php 学习资料零碎东西
2010/12/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python3.4爬虫demo
2019/01/22 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
django框架forms组件用法实例详解
2019/12/10 Python
python 元组的使用方法
2020/06/09 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
大学生职业规划书的范本
2014/02/18 职场文书
大学生党员承诺书
2014/05/20 职场文书
高效课堂标语
2014/06/26 职场文书
委托证明书
2014/09/17 职场文书
医院营销工作计划
2015/01/16 职场文书
明星邀请函
2015/02/02 职场文书
交通事故案件代理词
2015/05/23 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
从原生JavaScript到React深入理解
2022/07/23 Javascript