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 form action动态修改方法
Nov 04 Javascript
详细讲解JS节点知识
Jan 31 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
解析Vue.js中的组件
Feb 02 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
layDate插件设置开始和结束时间
Nov 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
Windows下的PHP安装pear教程
2014/10/24 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
可输入的下拉框
2006/06/19 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Vue开发环境跨域访问问题
2020/01/22 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
wxPython实现分隔窗口
2019/11/19 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
优秀乡村医生事迹材料
2014/05/28 职场文书
保护地球的标语
2014/06/17 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2014年仓库工作总结
2014/11/20 职场文书
档案工作个人总结
2015/03/03 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
golang定时器
2022/04/14 Golang