学习JavaScript设计模式(单例模式)


Posted in Javascript onNovember 26, 2015

单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器的window对象。在js开发中,单例模式的用途同样非常广泛。试想一下,当我们单击登录按钮的时候,页面中会出现一个登录框,而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。

1、单例模式的使用场景

在使用一种模式之前,我们最好要知道,这种模式的使用场景。用了这么久的单例模式,竟全然不知!用它具体有哪些好处呢?

1).可以用它来划分命名空间(这个就是就是经常用的了)

2).利用分支技术来封装浏览器之间的差异(这个还真没用过,挺新鲜)

3).借助单例模式,可以把代码组织的更为一致,方便阅读与维护(这个也用过了)

2、最基本的单例模式

最简单的单例其实就是一个对象字面量。它把一批有一定关联的方法和属性组织在一起。

var Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法1');
  },
  method2 : function(){
    alert('我是方法2');
  }
};

这个对象可以被修改。你可以添加属性和方法。你也可以用delete运算符删除现有成员。这实际上违背了面向对象设计的一条原则:类可以被扩展,但不应该被修改。如果某些变量需要保护,那么可以将其定义在闭包中。

对象字面量只是创建单例的方法之一。也并非所有的对象字面量都是单例,那些只是用来模仿关联数组或容纳数据的对象字面量显然不是单例。

3、借用闭包创建单例

闭包主要的目地 保护数据

// 命名空间
var BHX = {} ;
BHX.Singleton = (function(){
  // 添加自己的私有成员
  var a1 = true ;
  var a2 = 10 ;
  var f1 = function(){
    alert('f1');
  }
  var f2 = function(){
    alert('f2');
  }        
  // 把块级作用域里的执行结果赋值给我的单例对象
  return {
      attr1: a1 , 
      attr2: a2 ,
      method1 : function(){
        return f1();
      },
      method2 : function(){
        return f2();
      }            
  } ;
})();

alert(BHX.Singleton.attr1);
BHX.Singleton.method1();

这种单例模式又称模块模式,指的是它可以把一批相关的方法和属性组织为模块并起到划分命名空间的作用。

4、单例模式用于划分命名空间

1)、防止全局声明的修改

/*using a namespace*/

var BHX = {};
BHX.Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法1');
  },
  method2 : function(){
    alert('我是方法2');
  }        
};
BHX.Singleton.attr1;
var attr1 = false;

这样以来,即使我们在外面声明了相同的变量,也能在一定程度上防止attr1的被修改。

2)、防止其它来源代码的修改

现在网页上的JavaScript代码往往不止用一个来源,什么库代码、广告代码和徽章代码。为了避免与自己代码的冲突,可以定义一个包含自己所有代码的对象。

var XGP = {};
XGP.Common = {
  //A singleton with common methods used by all objects and modules
}
XGP.ErrorCodes = {
  //An object literal used to store data
}
XGP.PageHandler = {
  //A singleton with page specific methods and attributes.
}

3)、用作专用代码封装

在拥有许多网页的网站中,有些代码是所有网页都要用到的,他们通常被存放在独立的文件中;而有些代码则是某个网页专用的,不会被用到其他地方。最好把这两种代码分别包装在自己的单例对象中。

我们经常要用Javascript为表单添加功能。出于平稳退化方面的考虑,通常先创建一个不依赖于Javascript的、使用普通提交机制完成任务的纯HTML网页。

XGP.RegPage = {
  FORM_ID: 'reg-form',
  OUTPUT_ID: 'reg-result',

  handleSubmit: function(e){
    e.preventDefault(); //stop the normal form submission

    var data = {};
    var inputs = XGP.RegPage.formEl.getElementByTagName('input');

    for(var i=0, len=inputs.length; i<len; i++){
      data[inputs[i].name] = inputs[i].value;
    }

    XGP.RegPage.sendRegistration(data);
  },
  sendRegistration: function(data){
    //make an xhr request and call displayResult() when response is recieved
    ...
  },
  displayResult: function(response){
    XGP.RegPage.outputEl.innerHTML = response;
  },
  init: function(){
    XGP.RegPage.formEl =$(XGP.RegPage.Form_ID);
    XGP.RegPage.outputEl = $(XGP.RegPage.OUTPUT_ID);
    //hijack the form submission
    addEvent(XGP.RegPage.formEl, 'submit', XGP.RegPage.handleSubmit);
  }
}
//invoke initialization method after the page load
addLoadEvent(XGP.RegPage.init);

5、惰性单例

前面所讲的单例模式又一个共同点:单例对象都是在脚本加载时被创建出来。对于资源密集的或配置开销甚大的单例,更合理的做法是将其实例化推迟到需要使用他的时候。

这种技术就是惰性加载(lazy loading)。

实现步骤如下:

1).将所有代码移到constructor方法中

2).全权控制调用时机(正是getInstance所要做的)

XGP.lazyLoading = (function(){
  var uniqInstance;

  function constructor(){
    var attr = false;
    function method(){

    }

    return {
      attrp: true,
      methodp: function(){

      }
    }
  }

  return {
    getInstance: function(){
      if(!uniqInstance){
        uniqInstance = constructor();
      }
      return uniqInstance;
    }
  }
})();

6、分支技术

分支是一种用来把浏览器间的差异封装在运行期间进行设置的动态方法中的技术。

// 分支单例 (判断程序的分支 <浏览器差异的检测>)
var Ext = {} ;
var def = false ;
Ext.More = (function(){
  var objA = {    // 火狐浏览器 内部的一些配置
      attr1:'FF属性1'
      // 属性1 
      // 属性2 
      // 方法1 
      // 方法2
  } ;
  var objB = {    // IE浏览器 内部的一些配置
      attr1:'IE属性1'
      // 属性1 
      // 属性2 
      // 方法1 
      // 方法2             
  } ;
  return (def) ?objA:objB;
})();
alert(Ext.More.attr1);

比如说,如果网站中要频繁使用xhr,每次调用都要再次运行浏览器嗅探代码,这样会严重缺乏效率。更有效的做法是在脚本加载时一次性地确定针对浏览器的代码。这正是分支技术所做的事情。当然,分支技术并不总是更高效的选择,在两个或者多个分支中只有一个分支被用到了,其他分支就占用了内存。

在考虑是否使用分支技术的时候,必须在缩短时间和占用更多内存这一利一弊之间权衡一下。

下面利用分支技术实现XHR:

var XHR = (function(){
  var standard = {
    createXhrObj: function(){
      return new XMLHttpRequest();
    }
  };
  var activeXNew = {
    createXhrObj: function(){
      return new ActiveXObject('Msxml2.XMLHTTP');
    }
  };
  var activeXOld = {
    createXhrObj: function(){
      return new ActiveXObject('Microsoft.XMLHTTP');
    }
  };

  var testObj;
  try{
    testObj = standard.createXhrObj();
    return testObj;
  }catch(e){
    try{
      testObj = activeXNew.createXhrObj();
      return testObj;
    }catch(e){
      try{
        testObj = activeXOld.createXhrObj();
        return testObj;
      }catch(e){
        throw new Error('No XHR object found in this environment.');
      }
    }
  }
})();

7、单例模式的弊端

了解了这么多关于单例的知识,我们再来看看它的弊端。

由于单例模式提供的是一种单点访问,所以它有可能导致模块间的强耦合。因此也就不利于单元测试了。

综上,单例还是留给定义命名空间和实现分支型方法这些用途。

通过七点不同方面对单例模式的介绍,大家是不是对单例模式有了更深入的了解,希望这篇文章可以帮到大家。

Javascript 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
js实现双人五子棋小游戏
May 28 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 #Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 #Javascript
Javascript BOM学习小结(六)
Nov 26 #Javascript
js实现延时加载Flash的方法
Nov 26 #Javascript
学习JavaScript设计模式(链式调用)
Nov 26 #Javascript
学习JavaScript设计模式(继承)
Nov 26 #Javascript
js图片跟随鼠标移动代码
Nov 26 #Javascript
You might like
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
浅谈PHP中的
2016/04/23 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
速比涛英国官网:Speedo英国
2019/07/15 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
单位实习证明怎么写
2014/01/17 职场文书
审计主管岗位职责
2014/01/31 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
大学生英语演讲稿
2014/04/24 职场文书
证婚人婚礼致辞
2015/07/28 职场文书