一入前端深似海,从此红尘是路人系列第七弹之孤独的剑客-单例模式

简介: 单例模式,它犹如一名孤独的剑客,它是一个只允许被实例化一次的对象。剑客是孤独的,是高傲的,行走江湖仅凭身上一把锋利的利剑,不会多携带任何东西(节省系统资源)。它有一个剑气领域,一个只属于它的空间,别人进不去的空间(命名空间)。

单例模式,它犹如一名孤独的剑客,它是一个只允许被实例化一次的对象。剑客是孤独的,是高傲的,行走江湖仅凭身上一把锋利的利剑,不会多携带任何东西(节省系统资源)。它有一个剑气领域,一个只属于它的空间,别人进不去的空间(命名空间)。

一、剑域-命名空间

我们所知道的,每个剑客高手当其拔剑的时候都会有一个自己的剑域,而踏入者,结果只有一个-死。

当单例模式给我们提供了一个命名空间的时候,它会约束每个人定义的变量,让每个变量都是“孤立”的,使每个人定义的变量不会产生冲突,这样每个人都可以井井有条的管理好自己对象上的属性和方法。


var Qiang = {
  g : function(id){
    return document.getElementById(id);
  },
  css : function(id,key,value){
    // 简单的一个样式属性设置
    this.g(id).style[key] = value;
  }
}

再者就是模块的分明,实际开发当中也是可以用单例模式进行模块的控制。


qiang.dom.addClass            // 添加元素类
qiang.dom.append              // 插入元素
qiang.event.stopPropagation   // 阻止冒泡
qiang.event.preventDefault    // 阻止默认行为
qiang.string.encodeHTML       // 将字符串进行html编码

二、十八般武艺-创建小型代码库

每一个优秀的剑客都有自己招式,而每个招式又都是一层一层的心法进行修炼的。

如上代码写到的,我们在创建自己的小型方法代码库的时候也是可以用单例模式来规范我们自己代码库的各个模块。


var Module = {
  Title : {
    title_level1 : function(){},
    title_level2 : function(){}
    // ...
  },
  Form : {
    form_text   : function(){},
    form_pwd    : function(){},
    form_select : function(){},
    // ...
  },
  Table : {
    table_normal  : function(){},
    table_special : function(){}
    // ...
  },
  // ...
}

三、招式模仿-静态变量

优秀的剑客不仅仅有自己的招式,还可以在观看别人的招式后,进行快速的模仿。

我们的JavaScript当中其实是没有static这类的关键字,但很多时候我们又需要这样的一种变量。JavaScript是灵活多变的,访问变量的方式很多种,例如定义在全局中,再就是定义在函数内部,然后在函数内部定义特权方法进行访问。但要求改变量不能被修改,那么全局定义这一种方式肯定是行不通的。那么我们就可以通过定义在函数内部然后在通过特权方法进行访问便可以做到了,具体操作如下:


//管理静态变量
var Conf = (function(){
  // 私有变量
  var conf = {
    MAX_NUM:100,
    MIN_NUM:1,
    COUNT:1000
  }
  // 返回取值器对象
  return {
    // 取值器方法
    get:function(name){
      return conf[name] ? conf[name] : null;
    }
  }
})();

使用方式:


var count = Conf.get('COUNT');
console.log(count); //1000

四、慵懒剑客-惰性单例

剑客是孤独的,也是慵懒的,每个剑客都向往着那种安静的喝着酒,沐浴在懒懒的阳光中。无需拔剑的时候从不拔剑毁了自己片刻的宁静。

包括以上的几种情况,还有一种比较常见的情况便是当单例对象需要做一个延时创建的时候,我们可以通过一种“惰性创建”进行延迟创建。


// 惰性单例
var LazySingle = (function(){
  // 单例实例引用
  var _instance = null;
  // 单例
  function Single(){
    // 这里定义私有属性和方法
    return {
      publicMethod:function(){},
      publicProperty:'1.0'
    }
  }
  // 获取单例对象接口
  return function(){
    // 如果为创建单例将创建单例
    if(!_instance){
      _instance = Single();
    }
    // 返回单例
    return _instance;
  }
})();

单例模式,一名孤独的剑客,行走在JavaScript这样的江湖中,它的地位不容小觑!

原文发布时间为:2016年10月23日
原文作者:qiangdada 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
4月前
|
设计模式 前端开发 Java
前端设计模式之【单例模式】
前端设计模式之【单例模式】
24 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-单例模式1
前端学习笔记202306学习笔记第五十一天-单例模式1
27 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-单例模式3
前端学习笔记202306学习笔记第五十一天-单例模式3
24 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-单例模式2
前端学习笔记202306学习笔记第五十一天-单例模式2
36 0
|
9月前
|
设计模式 前端开发 JavaScript
前端实现设计模式之单例模式
单例模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点来访问该实例。单例模式在前端开发中经常被用于管理全局状态、资源共享或限制某个类的实例化次数。本文将介绍如何在前端中实现单例模式,并提供具体的代码示例和解读。
108 0
|
前端开发
前端学习案例-单例模式的调用1
前端学习案例-单例模式的调用1
58 0
前端学习案例-单例模式的调用1
|
前端开发
前端学习案例2-单例模式的应用2
前端学习案例2-单例模式的应用2
36 0
前端学习案例2-单例模式的应用2
|
前端开发
前端学习案例1-单例模式的应用1
前端学习案例1-单例模式的应用1
44 0
前端学习案例1-单例模式的应用1
|
设计模式 前端开发
前端学习案例2-设计模式之单例模式2
前端学习案例2-设计模式之单例模式2
52 0
前端学习案例2-设计模式之单例模式2