Modo singleton de implementación de singleton perezoso de patrón de diseño de JavaScript

Tabla de contenido

 

1. Definición

2. Variables globales y reducción de la contaminación de nombres

Usar espacio de nombres

Utilice cierres para encapsular variables privadas

3. Singleton perezoso general

Encapsular la lógica del agente de gestión en una función

Ejemplo de uso (haga clic en el botón para generar una ventana emergente de inicio de sesión y mostrarla)

Ejemplo de uso (la representación de la lista solo está vinculada a un evento)

---

1. Definición

La definición del patrón singleton es: garantizar que una clase tenga solo una instancia y proporcionar un punto de acceso global para acceder a ella.

2. Variables globales y reducción de la contaminación de nombres

Las variables globales no son un modo singleton, pero en el desarrollo de JavaScript, a menudo usamos variables globales como singleton. P.ej:

var a = {}; 

a es único y se puede acceder a él globalmente, lo que satisface la definición de modo singleton; sin embargo, las variables globales son propensas a nombrar la contaminación y los proyectos grandes pueden ser sobrescritos por otros en cualquier momento. Por lo tanto, se deben utilizar los siguientes dos métodos para reducir relativamente la contaminación de nombres causada por variables globales:        

• Usar espacio de nombres

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

Defina tanto a como b como atributos del espacio de nombres1 para reducir la posibilidad de que las variables interactúen con el ámbito global.

• Utilice cierres para encapsular variables privadas

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

Usamos guiones bajos para acordar las variables privadas __nombre y __edad. Están encapsuladas en el alcance generado por el cierre. Estas dos variables no se puede acceder desde el exterior, lo que evita la contaminación global del comando.

3. Singleton perezoso general

Singleton perezoso se refiere a la creación de instancias de objetos cuando sea necesario.

• Encapsular la lógica del agente de gestión en una función

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

• Ejemplo de uso (haga clic en el botón para generar una ventana emergente de inicio de sesión y mostrarla)

  // 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';
  }

• Ejemplo de uso (la representación de la lista solo está vinculada a un evento)

  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实际上只被绑定了一个事件

  Nota: Lo anterior se refiere a las notas extraídas de "Patrones de diseño de JavaScript y prácticas de desarrollo". ¡Le recomiendo que lea el libro original!