Série de modèles de conception JavaScript 2 : modèle Singleton

Cet article partage avec vous la deuxième série de modèles de conception JavaScript : le mode singleton. Les amis intéressés peuvent jeter un œil au

Mode Singleton

Avant-propos : Le code de cette série a. été téléchargé sur l'adresse GitHub https://github.com/HolyZheng/...

Quel est le modèle singleton ?

单例模式 définition : 一个类仅有一个实例，并且可以在全局访问.
Quand devez-vous utiliser le modèle singleton ? En fait, le mode singleton est largement utilisé dans le développement quotidien, comme diverses fenêtres flottantes, telles que les fenêtres flottantes de connexion, etc. Peu importe le nombre de fois où nous cliquons, c'est la même fenêtre flottante, et la fenêtre flottante n'est créée qu'une seule fois. du début à la fin. Ce scénario est très adapté à l’utilisation du mode singleton.

---

Implémentation du code

Nous créons une classe de « personne la plus âgée ». Évidemment, il n'y a qu'une seule « personne la plus âgée ». Ceci est très cohérent avec le scénario d’application de notre modèle singleton. Jetons d'abord un coup d'œil au code complet :

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

Nous pouvons voir sur la console que même si createOldestMan est appelé deux fois et attribué des valeurs différentes, la sortie des deux getName() C'était le premier "holz". C'est le modèle singleton.

Vous ne comprenez pas le code ? Ce n’est pas grave, je vais vous l’expliquer un par un maintenant.
Nous avons d’abord créé une classe OldMan et créé un attribut name. Ensuite, nous y ajoutons une méthode getName() via prototype pour obtenir le nom du plus vieil homme. Je pense que tout le monde le comprend ici, puis le morceau de code suivant est au centre, et il est également difficile à comprendre. Retirons ce morceau de code et examinons-le séparément.

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

Tout d'abord, nous n'avons pas à nous soucier de ce qu'est une fonction proxy. La raison pour laquelle on l'appelle fonction proxy est qu'elle nous aide à obtenir l'effet du mode singleton. Le premier point clé de cette fonction est createOldestMan() Une fonction qui s'exécute immédiatement. La fonction immédiate sera exécutée immédiatement lorsqu'elle est déclarée, c'est-à-dire que cette fonction sera exécutée lorsque createOldestMan est déclarée. Elle déclarera une variable d'instance puis renverra une fonction à createOldestMan. createOldestMan équivaut à :

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

Le deuxième point clé est : le concept de 闭包 est utilisé ici.

Qu'est-ce qu'une fermeture ? Je dois juste me rappeler qu'une fermeture se produit lorsqu'une fonction est appelée en dehors de la portée syntaxique dans laquelle elle a été définie, mais a toujours accès à la portée syntaxique dans laquelle elle a été définie.

Jetons un œil à notre code. La fonction définit d'abord une instance, puis renvoie une fonction (nom). La variable d'instance est utilisée dans cette fonction (nom). Dans des circonstances normales, après l'exécution immédiate de la fonction, la variable d'instance sera recyclée par le mécanisme de récupération de place JavaScript, mais comme la fonction (nom) est renvoyée à l'extérieur et que la fonction (nom) sera appelée à tout moment, le L'instance sera accessible à tout moment, la variable d'instance est donc conservée en mémoire. Cela crée des fermetures. En d'autres termes, function(name) est affecté au createOldestMan externe et est exécuté dans la portée de syntaxe externe, mais il peut également accéder à l'instance dans la portée de syntaxe interne au moment de la définition.

Donc sous l'action de 立即执行函数 et 闭包, l'instance n'est appliquée qu'une seule fois, c'est-à-dire qu'il n'y a qu'une seule instance. En d'autres termes, peu importe le nombre de fois que nous exécutons createOldestMan("..."), l'instance ne sera que la valeur de la première fois. Nous pouvons donc déterminer si l'instance a été instanciée et attribuer une valeur à l'instance. Si l'instance a été instanciée, renvoyez l'instance. Cela produit l'effet de n'avoir qu'une seule instance d'une classe.

Modèle singleton universel

Je peux également modifier le code, car en développement, nous ne pouvons pas avoir qu'un seul singleton, nous devrions donc rendre le code universel pour tous les singletons. Où devrions-nous le changer ? C'est vrai, changez la fonction proxy. Il suffit d'extraire le plus vieuxMan() dans la fonction proxy et de modifier la valeur à transmettre sous forme de paramètres, sans se limiter à plus vieuxMan().

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

De cette façon, nous pouvons passer le singleton en paramètre et l'utiliser pour implémenter différents singletons.
Le code complet est le suivant :

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

De même, même si createSingleton est appelé à nouveau et qu'une valeur différente est transmise, la sortie est toujours le premier "holz".

---

Résumé

La définition du modèle singleton : une classe n'a qu'une seule instance et est accessible globalement.
Scénarios applicables : en fait, le mode singleton est largement utilisé dans le développement quotidien, comme diverses fenêtres flottantes, fenêtres flottantes de connexion, etc. Peu importe le nombre de fois où nous cliquons, c'est la même fenêtre flottante et la fenêtre flottante reste le même du début à la fin. Il n’a été créé qu’une seule fois. Ce scénario est très adapté à l’utilisation du mode singleton.

Recommandations associées :

JavaScript Design Pattern Series 1 : Factory Pattern

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!