Mode singleton de l'implémentation de singleton paresseux de modèle de conception JavaScript

table des matières

 

1. Définition

2. Variables mondiales et réduction de la pollution par les noms

Utiliser l'espace de noms

Utiliser des fermetures pour encapsuler des variables privées

3. Singleton paresseux général

Encapsuler la logique de l'agent de gestion dans une fonction

Exemple d'utilisation (cliquez sur le bouton pour générer une fenêtre pop-up de connexion et l'afficher)

Exemple d'utilisation (le rendu de liste n'est lié qu'à un seul événement)

---

1. Définition

La définition du modèle singleton est la suivante: garantir qu'une classe n'a qu'une seule instance et fournir un point d'accès global pour y accéder.

2. Variables mondiales et réduction de la pollution par les noms

Les variables globales ne sont pas un mode singleton, mais dans le développement JavaScript, nous utilisons souvent des variables globales comme singletons. Par exemple:

var a = {}; 

a est unique et peut être consulté globalement, satisfaisant à la définition du mode singleton; cependant, les variables globales sont sujettes à la pollution de nom, et les grands projets peuvent être écrasés par d'autres à tout moment. Par conséquent, les deux méthodes suivantes doivent être utilisées pour réduire relativement la pollution de dénomination causée par les variables globales:        

• Utiliser l'espace de noms

  var namespace1 = { 
      a: function(){
           alert (1);
      },
      b: function(){
          alert (2);
      }
  };

Définissez à la fois a et b comme attributs de namespace1 pour réduire le risque d'interaction des variables avec la portée globale.

• Utiliser des fermetures pour encapsuler des variables privées

  var user = (function () {
      var __name = 'xxx',
          __age = 21;
      return {
          getUserInfo: function () {
              return __name + '-' + __age;
          }
      }
  })();

Nous utilisons des traits de soulignement pour nous mettre d'accord sur les variables privées __name et __age. Ils sont encapsulés dans la portée générée par la fermeture. Ces deux variables ne sont pas accessibles de l'extérieur, ce qui évite la pollution globale des commandes.

3. Singleton paresseux général

Lazy singleton fait référence à la création d'instances d'objet si nécessaire.

• Encapsuler la logique de l'agent de gestion dans une fonction

  function getSingle(fn) {
      var result; // 在闭包中不销毁
      return function () {
          // 如果result被赋值,则返回;没有则执行创建方法
          return result || (result = fn.apply(this, arguments));
      }
  }

• Exemple d'utilisation (cliquez sur le bouton pour générer une fenêtre pop-up de connexion et l'afficher)

  // 1.声明创建方法
  var createLoginLayer = function () {
      var div = document.createElement('div');
      div.innerHTML = '我是登录弹窗';
      div.style.display = 'none';
      document.body.appendChild(div);
      return div;
  }
  // 2.传入创建方法返回单例方法,还没创建
  var createSingleLoginLayer = getSingle(createLoginLayer);
  // 3.在需要的时候创建
  document.getElementById('loginBtn').onclick = function () {
      var loginLayer = createSingleLoginLayer();
      loginLayer.style.display = 'block';
  }

• Exemple d'utilisation (le rendu de liste n'est lié qu'à un seul événement)

  var bindEvent = getSingle(function () {
      document.getElementById('div1').onclick = function name() {
          alert('click');
      }
      return true; // 返回true是为了让单例方法不执行||后的创建
  })
  var render = function () {
      console.log('开始渲染列表');
      bindEvent();
  }
  render();
  render();
  render();
  // render函数和bindEvent函数都分别执行了3次，但div实际上只被绑定了一个事件

  Remarque: Ce qui précède fait référence aux notes extraites de "JavaScript Design Patterns and Development Practices", je vous recommande fortement de lire le livre original!