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

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

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

李一花 2018-07-19 14:01:34 浏览633
展开阅读全文

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

一、剑域-命名空间

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

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


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 

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


网友评论

登录后评论
0/500
评论
李一花
+ 关注
所属云栖号: 前端那些事儿