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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
js瀑布流布局的实现
Jun 28 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
求职自荐信
2013/12/14 职场文书
软件项目实施计划书
2014/05/02 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
营运督导岗位职责
2015/04/10 职场文书