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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
详解javascript函数的参数
Nov 10 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
一些PHP写的小东西
2006/12/06 PHP
PHP实现文件下载详解
2014/11/27 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python中异常捕获方法详解
2017/03/03 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
DOM和JQuery对象有什么区别
2016/11/11 面试题
企业催款函范本
2015/06/24 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript