JavaScript编程的单例设计模讲解_基础知识

在Javascript中,单例模式是一种最基本又经常用到的设计模式,可能在不经意间就用到了单例模式。
本文将从最基础的理论开始,讲述单例模式的基本概念和实现,最后用一个例子来讲述单例模式的应用。

理论基础

概念

单例模式,顾名思义就是只有一个实例存在。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

基本结构

最简单的单例模式起始就是一个对象字面量,它将有关联的属性和方法组织到一起。

var singleton = {
  prop:"value",
  method:function(){
  }
}

这种形式的单例模式,所有成员都是公开的,都可以通过singleton来访问。这样的缺点是单例中有一些辅助的方法并不希望暴露给使用者,如果使用者用了这些方法,然后在后面维护的时候,一些辅助方法被删除,这样会造成程序错误。
如何避免这样从的错误呢?

包含私有成员的单例模式

要怎么在类中创建私有成员呢,这通过需要闭包来进行实现,关于闭包的知识,本文不再赘述,大家可以自行Google。
基本形式如下:

var singleton = (function () {
      var privateVar = "private";
      return {
        prop: "value",
        method: function () {
          console.log(privateVar);
        }
      }
    })();

首先是一个自执行的匿名函数,在匿名函数中,声明了一个变量privateVar,返回一个对象赋值给单例对象singleton。在匿名函数外部无法访问到privateVar变量,它就是单例对象的私有变量,只能在函数内部或通过暴露出来的方法去访问这个私有变量。这种形式又被成为模块模式。

惰性实例化

不管是直接字面量或者私有成员的单例模式,两者都是在脚本加载时就被创建出来的单例,但是有时候,页面可能永远也用不到这个单例对象,这样会造成资源浪费。对于这种情况,最佳的处理方式就是惰性加载,就是说在需要的时候才去真正实例化这个单例对象,如何实现呢?

var singleton = (function () {
      function init() {
        var privateVar = "private";
        return {
          prop: "value",
          method: function () {
            console.log(privateVar);
          }
        }
      }
      var instance = null;
      return {
        getInstance: function () {
          if (!instance) {
            instance = init();
          }
          return instance;
        }
      }
    })();

首先将创建单例对象的代码封装到init函数中,然后声明一个私有变量instance表示单例对象的实例,公开一个方法getInstance来获取单例对象。
调用的时候就通过singleton.getInstance()来进行调用,单例对象是在调用getInstance的时候才真正被创建。

适用场合

单例模式是JS中最常使用的设计模式,从增强模块性和代码组织性等方面来说,应该尽可能的使用单例模式。它可以把相关代码组织到一起便于维护,对于大型项目,每个模块惰性加载可以提高性能,隐藏实现细节,暴露出常用的api。常见的类库比如underscore,jQuery我们都可以将其理解为单例模式的应用。

结合实战

前面已经讲过,单例模式是最常用的设计模式之一,我们来举个例子进行说明,
下面的代码主要实现一个简单的日期帮助类,通过单例模式实现:

基本的单例模式结构

var dateTimeHelper = {
      now: function () {
        return new Date();
      },
      format: function (date) {
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      }
    };
console.log(dateTimeHelper.now());

这段代码通过对象字面量实现单例模式,使用的时候直接调用方法即可。

惰性加载实现单例模式

 var dateTimeHelper = (function () {
      function init() {
        return {
          now: function () {
            return new Date();
          },
          format: function (date) {
            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
          }
        }
      }
      var instance = null;
      return {
        getInstance: function () {
          if (!instance) {
            instance = init();
          }
          return instance;
        }
      }
    })();
console.log(dateTimeHelper.getInstance().now())

这就是惰性加载的单例模式。

下面再来看几个实例:
实现1: 最简单的对象字面量

var singleton = {

    attr : 1,

    method : function(){ return this.attr; }

  }

var t1 = singleton ;

var t2 = singleton ;

    那么很显然的, t1 === t2 。

    十分简单,并且非常使用,不足之处在于没有什么封装性,所有的属性方法都是暴露的。对于一些需要使用私有变量的情况就显得心有余而力不足了。当然在对于 this 的问题上也是有一定弊端的。

    实现2:构造函数内部判断

    其实和最初的JS实现有点类似,不过是将对是否已经存在该类的实例的判断放入构造函数内部。

function Construct(){

  // 确保只有单例

  if( Construct.unique !== undefined ){

    return Construct.unique; 

  }

  // 其他代码

  this.name = "NYF";

  this.age="24";

  Construct.unique = this;

}

var t1 = new Construct() ;

var t2 = new Construct() ;

    那么也有的, t1 === t2 。

    也是非常简单,无非就是提出一个属性来做判断,但是该方式也没有安全性,一旦我在外部修改了Construct的unique属性,那么单例模式也就被破坏了。 

    实现3 : 闭包方式   

    对于大着 灵活 牌子的JS来说,任何问题都能找到 n 种答案,只不过让我自己去掂量孰优孰劣而已,下面就简单的举几个使用闭包实现单例模式的方法,无非也就是将创建了的单例缓存而已。

var single = (function(){

  var unique;

  function Construct(){

    // ... 生成单例的构造函数的代码

  }

  unique = new Constuct();

  return unique;

})();

    只要 每次讲 var t1 = single; var t2 = single;即可。 与对象字面量方式类似。不过相对而言更安全一点,当然也不是绝对安全。

    如果希望会用调用 single() 方式来使用,那么也只需要将内部的 return 改为

  return function(){

    return unique;

  } 

    以上方式也可以使用 new 的方式来进行(形式主义的赶脚)。当然这边只是给了闭包的一种例子而已,也可以在 Construct 中判断单例是否存在 等等。 各种方式在各个不同情况做好选着即可。

总结

单例模式的好处在于对代码的组织作用,将相关的属性和方法封装在一个不会被多次实例化的对象中,让代码的维护和调试更加轻松。隐藏了实现细节,可以防止被错误修改,还防止了全局命名空间的污染。另外可以通过惰性加载提高性能,减少不必要的内存消耗。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
单例模式
javascript单例模式、javascript 单例、单例模式讲解、javascript编程、javascript编程培训,以便于您获取更多的相关知识。

时间: 2024-09-02 12:28:57

JavaScript编程的单例设计模讲解_基础知识的相关文章

javascript编程起步(第三课)_基础知识

javascript编程起步第三课 第三课终于和大家见面了, 大家要感谢 Actions 的辛勤劳动啊, 好好利用论坛给大家提供的资源和教程, 希望大家一起学习提高 :D 大家有什么意见, 建议或者想法, 可以到本版的教程问答区 或 站务管理版的 建议或意见 去发表, 我们会及时给您反馈 :) 下面是今天的学习重点 A.补充上课的变量内容 B.if语句的基本语法 C.window.com()基本用法 A.变量 1.变量的类型规则 javascript是无类型的他的变量可以放任何数据类型的值. 2

javascript编程起步(第六课)_基础知识

mouseDown事件和mouseUp事件 大家知道,mouseDown事件和mouseUp事件的组合就是click事件,但是如果在链接上按下鼠标,并移到链接之外在放开鼠标,那么就只有mouseD own事件了.这两个事件可以增加图标按钮的图像效果,   至于mouseDown和mouseUp的属性,它们是伴随着Click事件发生的,这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的 ,这3个鼠标事件也有modifier属性.   (注意:如果在onClick事件

javascript编程起步(第七课)_基础知识

过年到现在一直都比较忙,辜负大家了. 今天就学习函数吧,虽然语句还没有说完. 函数是javascript语言的一个很重要的内容,但也很复杂. 下面来看看javascript函数. 函数是有function加函数名和一对带有参数括号,以及大括号组成的,其中大括号里是 主体javascript语句. 例: function hanshuname(js) //hanshuname是函数名. { document.write(js,"<br>"); //是函数的主体语句. } 函数

JavaScript编程中布尔对象的基本使用_基础知识

Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false). 检查布尔值检查布尔对象是 true 还是 false. 源代码示例: <!DOCTYPE html> <html> <body> ​ <script> var b1=new Boolean(0); var b2=new Boolean(1); var b3=new Boolean(""); var b4=new Boolean(null); var b5

javascript编程起步(第五课)_基础知识

鼠标事件(上)   随着课程的进行,能跟着下来的人是越来越少了,不知道是不是因为没有太多的表现,只是死记的东西,大家都没有兴趣啊.其实网页上 的很多特效,动作大都是用javascript来实现的,没有javascript的网页,就象一个人没有了肌肉一样.但是所有的动作都是有函数来控制的 ,而控制语句是基础中的基础.希望大家能耐心的学下去.今天的课程就轻松一下,学习点能见到效果的. 主要内容就是基于鼠标的事件,有如下几种: 1.mouseover(鼠标移至) 2.mouseout(鼠标移出) 3.

javascript编程起步(第四课)_基础知识

前一段有人给我说,第二课就看不明白了,我不知道是不是写的太笼统了,不够细致,还是其他的,有什么问题,大家给提出来,当然我也不 是什么js高手,只不过想把爱好者领进门而已.希望大家多多参与. 今天的主要任务就是for循环.另外就是数据类型.既for in(现在还没有讲数组和对象,先了解一下). 数据类型的转换: 如果运算的数据类型不是一样的话,js脚本会尽力执行内部转换来解决,但js不了解你的心思.所以得到的结果可能和你想要的不一样. em:   3+3   // result=6   3+"3&

总结JavaScript设计模式编程中的享元模式使用_基础知识

享元模式不同于一般的设计模式,它主要用来优化程序的性能,它最适合解决大量类似的对象而产生的性能问题.享元模式通过分析应用程序的对象,将其解析为内在数据和外在数据,减少对象的数量,从而提高应用程序的性能. 基本知识 享元模式通过共享大量的细粒度的对象,减少对象的数量,从而减少对象的内存,提高应用程序的性能.其基本思想就是分解现有类似对象的组成,将其展开为可以共享的内在数据和不可共享的外在数据,我们称内在数据的对象为享元对象.通常还需要一个工厂类来维护内在数据. 在JS中,享元模式主要有下面几个角色

讲解JavaScript中for...in语句的使用方法_基础知识

 这里是JavaScript支持的另外一个循环.它被称为for...in循环.这个循环是用于循环一个对象的属性. 因为我们还没有讨论的对象,所以使用这一循环可能会感觉不太明白.但是,一旦你会对JavaScript对象了解后,那么会发现这个循环非常有用.语法 for (variablename in object){ statement or block to execute } 从对象每次迭代一个属性分配给变量名(variablename),这个循环持续到该对象的所有属性都用尽.例子: 下面是打

JavaScript中用let语句声明作用域的用法讲解_基础知识

语法 let variable1 = value1 参数variable1 要声明的变量的名称. value1 赋给变量的初始值. 备注使用 let 语句声明一个变量,该变量的范围限于声明它的块中.  可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值.  使用 let 声明的变量,在声明前无法使用,否则将会导致错误. 如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined. 示例: var l = 10; { let l = 2; // A