Modèle de conception JavaScript modèle singleton

Avant-propos

---

Au cours du processus de développement de JavaScript, les pionniers ont résumé de nombreuses solutions à des problèmes spécifiques issues de la pratique. En termes simples, un modèle de conception est une solution concise et élégante à un problème spécifique à une certaine occasion

Dans la période suivante, j'enregistrerai divers modèles de conception courants en JavaScript. Peut-être que vous le connaissez déjà, peut-être l'avez-vous utilisé quotidiennement, mais vous ne connaissez pas particulièrement son concept, ou peut-être n'avez-vous que de vagues idées à son sujet. Ensuite, je pense que cette série vous apportera certainement des gains

Avant de comprendre ces schémas courants, par défaut vous maîtrisez au moins

• ceci

• Fermetures

• Fonctions d'ordre supérieur

• Prototypes et chaînes de prototypes

Les comprendre vous aidera à comprendre un modèle plus clairement. Bien sûr, peut-être que les choses que j'ai enregistrées à cet égard peuvent vous aiderPortail

S'il y a des omissions ou des erreurs dans l'article, veuillez le consulter Merci d'avance pour votre conseil

Maintenant, commençons par cela - Modèle Singleton

Concept

Comme son nom l'indique, il n'y a qu'un seul exemple

Définition : assurez-vous qu'une classe n'a qu'une seule instance et fournissez un point d'accès global pour y accéder

En voyant une telle définition, avez-vous des idées en tête ? concept de variables globales ? Il est indéniable que les variables globales sont conformes au concept de modèle singleton. Cependant, nous ne l'utilisons généralement pas et ne devrions pas l'utiliser comme singleton pour les deux raisons suivantes :

• Nommer la pollution à l'échelle mondiale

• Pas facile à maintenir, facile à écraser

Avant ES6, nous utilisions généralement un constructeur pour simuler une classe. Maintenant, nous pouvons également utiliser directement le mot-clé class pour créer une classe , bien que son essence soit également. un prototype

Pour garantir qu'une classe n'a qu'une seule instance, nous devons fournir une variable pour marquer si une instance a été créée pour une classe. Par conséquent, le cœur du mode singleton est : Assurer qu'il n'y a qu'une seule instance et fournir un accès global

Autour de ce noyau, nous avons essentiellement compris la mise en œuvre du mode singleton

Implémentation

---

Version de base

Selon la définition du modèle singleton, nous pouvons simplement implémenter

var Singleton = function(name){    
  this.name = name
}

Singleton.instance = null // 初始化一个变量Singleton.getInstance = function(name) {// 判断这个变量是否已经被赋值，如果没有就使之为构造函数的实例化对象// 如果已经被赋值了就直接返回
  if(!this.instance) {   
   this.instance = new Singleton(name)
   }    
  return this.instance
}
var a = Singleton.getInstance('Tadpole')
var b = Singleton.getInstance('Amy')
a === b // true

dans de la manière suivante

Le code ci-dessus reflète clairement la définition du modèle singleton. Une seule instance est initialisée via une variable intermédiaire, donc au final a et b sont complètement égaux

On peut aussi utiliser le mot-clé class d'ES6 pour y parvenir

class Singleton {    
    constructor(name){   
        this.name = name     
      this.instance = null
  }    
  // 提供一个接口对类进行实例化
    static getInstance(name) { 
        if(!this.instance) { 
          this.instance = new Singleton(name)
      }       
      return this.instance
   }
}

Ce n'est pas difficile à trouvez que ES6 La méthode d'implémentation est fondamentalement la même que notre implémentation via le constructeur

Il y a des problèmes :

• Ce n'est pas assez transparent, nous devons contraindre l'appel méthode d'instanciation de classe

• Le couplage est trop élevé, et le couplage de codes métier fonctionnels entre eux n'est pas propice à une maintenance ultérieure

Constructeur

Apportons une simple modification à la méthode ci-dessus

// 将变量直接挂在构造函数上面，最终将其返回
  function Singleton(name) {   
     if(typeof Singleton.instance === 'object'){ 
        return Singleton.instance
     }  
     this.name = name
      return Singleton.instance = this
 }  
 // 正常创建实例
 
 var a = new Singleton('Tadpole')
 var b = new Singleton('Amy')

Résolvons le problème que la version de base de la classe n'est pas assez transparente. le nouveau mot-clé pour initialiser l'instance, mais il y a aussi de nouveaux problèmes

• Déterminez le type Single.instance à renvoyer, vous risquez de ne pas obtenir les résultats attendus

• Le couplage est trop élevé

Cette méthode peut également être implémentée via la méthode ES6

// 将 constructor 改写为单例模式的构造器
class Singleton {    
constructor(name) {    
    this.name = name 
    if(!Singleton.instance) {
       Singleton.instance = this
    }       
    return Singleton.instance
  }
}

Closure

Grâce à la définition du mode singleton , vous voulez vous assurer qu'il n'existe qu'une seule instance et qu'elle peut fournir un accès global. Ensuite, les fermetures peuvent certainement répondre à de tels besoins

var Singleton = (function () {  
var SingleClass = function () {}; 
var instance; 
return function () {      
 if (!instance) { 
    instance = new SingleClass() // 如果不存在 则new一个
 }        
 return instance;
}
})()

Grâce aux caractéristiques des fermetures, une variable est enregistrée et finalement renvoyée, fournissant un accès global

De même, le code ci-dessus ne résout toujours pas le problème de couplage

Observons attentivement ce morceau de code. Si nous extrayons la partie constructeur vers l'extérieur, la séparation des fonctions sera-t-elle réalisée ?

Implémentation du proxy

Modifier le code ci-dessus

function Singleton(name) {   
 this.name = name
}
var proxySingle = (function(){  
  var instance 
  return function(name) {  
    if(!instance) {
      instance = new Singleton(name)
    }  
  return instance
 }
})()

将创建函数的步骤从函数中提取出来，把负责管理单例的逻辑移到了代理类 proxySingle 中。这样做的目的就是将 Singleton 这个类变成一个普通的类，我们就可以在其中单独编写一些业务逻辑，达到了逻辑分离的效果

我们现在已经达到了逻辑分离的效果，并且也不 透明 了。但是，这个负责代理的类是否已经完全符合我们的要求呢，答案是否定的。设想一下，如果我们的构造函数有多个参数，我们是不是也应该在代理类中体现出来呢

那么，有没有更通用一些的实现方式呢

通用惰性单例

在前面的几个回合，我们已经基本完成了单例模式的创建。现在，我们需要寻求一种更通用的方式解决之前留下来的问题

试想一下，如果我们将函数作为一个参数呢

// 将函数作为一个参数传递
var Singleton = function(fn) { 
   var instance
   return function() {        // 通过apply的方式收集参数并执行传入的参数将结果返回
     return instance || (instance = fn.apply(this, arguments))
   }
}

这种方式最大的优点就是相当于缓存了我们想要的结果，并且在我们需要的时候才去调用它，符合封装的单一职责

应用

前面有说过，所有的模式都是从实践中总结而来，下面就让我们来看看它在实际开发中都有哪些应用吧

通过单例模式的定义我们不难想出它在实际开发中的用途，比如：全局遮罩层

一个全局的遮罩层我们不可能每一次调用的时候都去创建它，最好的方式就是让它只创建一次，之后用一个变量将它保存起来，再次调用的时候直接返回结果即可

单例模式就很符合我们这样的需求

// 模拟一个遮罩层var createDiv = function () {    
        var div = document.createElement('div')
    div.style.width = '100vw'
    div.style.height = '100vh'
    div.style.backgroundColor = 'red'
    document.body.appendChild(div)  
    return div
}// 创建出这个元素var createSingleLayer = Singleton(createDiv)document.getElementById('btn').onclick = function () {    // 只有在调用的时候才展示
    var divLayer = createSingleLayer()
}

当然，在实际应用中还是有很多适用场景的，比如登录框，还有我们可能会使用到的 Vux 之类的状态管理工具，它们实际上都是契合单例模式的

后记

单例模式是一种简单而又实用的模式，通过创建对象和管理单例的两个方法，我们就可以创造出很多实用且优雅的应用。当然，它也有自身的缺点，比如只有一个实例~

合理使用才能发挥出它的最大威力

最后，推荐一波前端学习历程，感兴趣的小伙伴可以 点击这里 ，也可以扫描下方二维码关注我的微信公众号，查看往期更多内容，欢迎 star 关注

推荐教程：《JS教程》

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!