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 setattribute批量设置css样式
Nov 26 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
JavaScript中的细节分析
Jun 30 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
原生js实现点击轮播切换图片
Feb 11 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
输出控制类
2006/10/09 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
学生信息管理系统python版
2018/10/17 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
使用python模拟高斯分布例子
2019/12/09 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
微观物理专业自荐信
2014/01/26 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
暖春观后感
2015/06/08 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL