Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Entwurfsmuster Serie 2: Singleton-Muster

不言
Freigeben: 2018-04-02 13:55:09
Original
1555 Leute haben es durchsucht

本篇文章给大家分享的是JavaScript设计模式系列二:单例模式,有感兴趣的朋友可以看一下

单例模式

前言:本系列代码已上传到GitHub地址 https://github.com/HolyZheng/...

什么是单例模式?

单例模式的定义:一个类仅有一个实例,并且可以在全局访问
什么时候需要用到单例模式呢?其实单例模式在日常开发中的使用非常的广泛,例如各种浮窗、像登录浮窗等,无论我们点击多少次,都是同一个浮窗,浮窗从始至终只创建了一次。这种场景就十分适合运用单例模式。


代码实现

我们创建一个“最老的人”的类,很明显,“最老的人”有且只有一个。这很符合我们单例模式的运用场景。我们先来看看完整代码:

var oldestMan = function (name) {
  this.name = name;
}

oldestMan.prototype.getName = function () {
  console.log(this.name);
}
//引入一个代理函数和闭包的概念
var createOldestMan = (function () {
  var instance;
  return function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
})();

var personA = createOldestMan("holz");
var personB = createOldestMan("Amy");
personA.getName();  //  holz
personB.getName();  //  holz
Nach dem Login kopieren

我们可以在控制台上看到即使调用了两次createOldestMan并且赋了不一样的值,但两次getName()输出的都是第一次的“holz”。这就是单例模式。

代码看不太懂?没关系,现在给大家一一讲解。
首先我们创建了一个oldestMan类,创建了一个name属性。然后我们通过 prototype 给它添加一个getName()方法用来获取oldestMan的名字,相信到这里大家都是懂的,然后下面一段代码就是重点了,也比较难理解。我们打这段代码单独拿出来将一下。

//引入一个代理函数和闭包的概念
var createOldestMan = (function () {
  var instance;
  return function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
})();
Nach dem Login kopieren

首先,我们不用管什么是代理函数,之所以叫它代理函数是因为它辅助我们实现单例模式的效果,这段函数第一个关键点是 createOldestMan() 是一个立即执行函数。立即函数在声明的时候就会立即执行,也就是在声明createOldestMan的时候这个函数就会执行,它会声明一个instance 变量,然后返回一个函数给createOldestMan。createOldestMan就相当于:

var createOldestMan = function (name) {
      if (!instance) {
         instance = new oldestMan(name);
      }
      return instance;
  }
Nach dem Login kopieren

第二个关键点是:这里利用了 闭包 的概念。

闭包是什么呢?我只需要记住当函数在定义时的语法作用域之外被调用,却还能访问定义时的语法作用域时,就是产生了闭包。

我们来看一下我们的代码,函数先定义了一个instance,然后再返回一个function(name),这个function(name)里面用到了instance变量。在正常情况下,在立即执行函数执行之后,instance变量就会被JavaScript的垃圾回收机制回收,但是因为function(name)被返回到了外部,而function(name)随时会被调用,随时会访问到instance变量,所以instance变量被保留在了内存中。这就产生了闭包。也就是说,function(name)被赋值给了外部的createOldestMan,在外部的语法作用域中执行,但还可以访问到定义时内部的语法作用域中的instance。

所以在 立即执行函数闭包 的作用下,instance只被申请了一次,也就是只有一个instance。也就是说,我们无论执行多少次createOldestMan("..."),instance只会是第一次的那个值。所以我们就可以判断instance是否已经被实例化了,来给instance赋值,如果instance已经被实例化,就返回instance。这就达到了一个类只有一个实例的效果。

通用的单例模式

我还可以改造一下代码,因为在开发中,我们可能不仅只有一个单例,所以我们应该让代码能够变得各个单例通用。我们应该在哪里改呢?没错,改代理函数。我们只需要把代理函数中的oldestMan()提取出来,改为以参数的形式传值,不局限于oldestMan()。

var singleObj;
var createSingleton = function (fn) {
  return function (text) {
    if (!singleObj) {
      singleObj = new fn (text);
    }
    return singleObj;
  }
}
Nach dem Login kopieren

这样我们就可以把单例作为参数传进去,用它实现不同的单例了。
完整代码是这样的:

var oldestMan = function (name) {
  this.name = name;
}

oldestMan.prototype.getName = function () {
  console.log(this.name);
}

//一个通用的代理函数
var singleObj;
var createSingleton = function (fn) {
  return function (text) {
    if (!singleObj) {
    singleObj = new fn (text);
    }
    return singleObj;
  }
}

var person_1 = createSingleton(oldestMan)("holz");
var person_2 = createSingleton(oldestMan)("tom");
person_1.getName(); //holz
person_2.getName(); //holz
Nach dem Login kopieren

同样,即使再次调用createSingleton并传入不同的值,输出的依旧是第一次的“holz”。


总结

单例模式的定义:一个类仅有一个实例,并且可以在全局访问。
适用场景:其实单例模式在日常开发中的使用非常的广泛,例如各种浮窗、像登录浮窗等,无论我们点击多少次,都是同一个浮窗,浮窗从始至终只创建了一次。这种场景就十分适合运用单例模式。

相关推荐:

JavaScript设计模式系列一:工厂模式



Das obige ist der detaillierte Inhalt vonJavaScript-Entwurfsmuster Serie 2: Singleton-Muster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage