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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
微信小程序实现自定义底部导航
Nov 18 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php构造函数与析构函数
2016/04/23 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python实现从wind导入数据
2019/12/03 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
解决python 找不到module的问题
2020/02/12 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
小学班干部竞选演讲稿
2014/04/24 职场文书
人代会标语
2014/06/30 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL