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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
原生JS实现天气预报
Jun 16 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
原生js 秒表实现代码
2012/07/24 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python实现图像拼接
2020/03/05 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
python实现图片转字符画
2021/02/19 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
初中生自我评价
2014/02/01 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
课外活动总结范文
2014/07/09 职场文书
室内趣味活动方案
2014/08/24 职场文书
科技活动周标语
2014/10/08 职场文书
培训计划通知
2015/07/15 职场文书
大学副班长竞选稿
2015/11/21 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
mysql幻读详解实例以及解决办法
2022/06/16 MySQL