javascript - pattern - patrones de diseño angular 4

Patrón de diseño de JavaScript: ¿diferencia entre el patrón de módulo y el patrón revelador del módulo?

Question

Estoy leyendo el libro Learning JavaScript Design Patterns recientemente. Lo que no entiendo es la diferencia entre el patrón del módulo y el patrón revelador del módulo. Siento que son lo mismo. ¿Alguien puede dar un ejemplo?

Answer 1

Existen al menos tres formas diferentes de implementar el Patrón de Módulo, pero el Patrón de Módulo Revelador es el único descendiente de Patrón de Módulo que tiene un nombre oficial.

El patrón de módulo básico

El patrón de módulo debe cumplir lo siguiente:

• Los miembros privados viven en el cierre.
• Los miembros públicos están expuestos en el objeto de devolución.

Pero hay mucha ambigüedad en esta definición. Al resolver la ambigüedad de manera diferente, obtienes variantes del Patrón del Módulo.

El modelo de módulo revelador

El patrón de módulo revelador es el más famoso y el más popular de las variantes de patrón de módulo. Tiene una serie de ventajas sobre las otras alternativas, como

• Cambie el nombre de las funciones públicas sin cambiar el cuerpo de la función.
• Cambie los miembros de público a privado o viceversa modificando una sola línea, sin cambiar el cuerpo de la función.

El RMP cumple tres condiciones adicionales además de las del original:

• Todos los miembros, ya sean públicos o privados, se definen en el cierre.
• El objeto de retorno es un objeto literal sin definiciones de funciones. Todas las expresiones del lado derecho son variables de cierre
• Todas las referencias son a través de las variables de cierre, no el objeto de retorno.

El siguiente ejemplo muestra cómo se usa

var welcomeModule = (function(){
  var name = "John";
  var hello = function(){ console.log("Hello, " + name + "!");}
  var welcome = function() { console.log( hello() + " Welcome to !");}
  return {
    name: name,
    sayHello: hello,
    sayWelcome: welcome
  }
})();

Si quería hacer un name y decir que sayHello privado, solo necesita comentar las líneas apropiadas en el objeto de devolución.

var welcomeModule = (function(){
  var name = "John";
  var hello = function(){ console.log("Hello, " + name + "!");}
  var welcome = function() { console.log( hello() + " Welcome to !");}
  return {
    //name: name,
    //sayHello: hello,
    sayWelcome: welcome
  }
})();

El patrón de módulo con objeto literal

Esta es probablemente la variante más antigua del Patrón de Módulo. A diferencia de RMP, no hay un nombre oficial sexy para esta variante.

Cumple las siguientes condiciones, además del original:

• Los miembros privados se definen en el cierre.
• Los miembros públicos se definen en el literal del objeto de devolución.
• Las referencias a los miembros públicos son a través de this , siempre que sea posible.

En el siguiente ejemplo, puede ver cómo, a diferencia de RMP, las definiciones de funciones están realmente en el literal del objeto de devolución, y las referencias a los miembros están calificadas por this .

var welcomeModule = (function(){
  return {
    name: "John",
    sayHello: function(){ console.log("Hello, " + this.name + "!");}
    sayWelcome: function() { console.log( this.hello() + " Welcome to !");}
  }
})();

Tenga en cuenta que para hacer un name sayHello y para decir que sayHello privado, las referencias que señalan el name y sayHello en las diversas definiciones de cuerpo de función también tienen que cambiarse.

var welcomeModule = (function(){
  var name: "John";
  var sayHello = function(){ console.log("Hello, " + name + "!");};
  return {
    //name: "John",
    //sayHello: function(){ console.log("Hello, " + this.name + "!");}
    sayWelcome: function() { console.log( hello() + " Welcome to !");}
  }
})();

El patrón de módulo con un trozo de objeto de retorno

Esta variante tampoco tiene un nombre oficial.

Cumple las siguientes condiciones, además del original:

• Un tallo de objeto de retorno vacío se define al principio.
• Los miembros privados se definen en el cierre.
• Los miembros públicos se definen como miembros del talón
• Las referencias a miembros públicos son a través del objeto auxiliar

Utilizando nuestro ejemplo anterior, puede ver que los miembros públicos se agregan directamente al objeto de código auxiliar.

var welcomeModule = (function(){
  var stub = {};
  stub.name = "John";
  stub.sayHello = function(){ console.log("Hello, " + stub.name + "!");}
  stub.sayWelcome = function() { console.log( stub.hello() + " Welcome to !");}
  return stub;
})();

Si desea crear un name y decir que sayHello privado como antes, las referencias a los miembros ahora privados deben modificarse.

var welcomeModule = (function(){
  var stub = {};
  var name = "John";
  var sayHello = function(){ console.log("Hello, " + name + "!");}

  stub.sayWelcome = function() { console.log( hello() + " Welcome to !");}
  return stub;
})();

Resumen

Las diferencias entre el patrón de módulo revelador y las otras variantes del patrón de módulo se basan principalmente en cómo se hace referencia a los miembros públicos. Como resultado, RMP es mucho más fácil de usar y modificar, lo que explica su popularidad. Sin embargo, estas ventajas tienen un gran costo (en mi opinión), a lo que Addy Osmani alude en su publicación sobre Revealing Module Pattern ,

Una desventaja de este patrón es que si una función privada se refiere a una función pública, esa función pública no puede anularse si es necesario un parche. Esto se debe a que la función privada continuará refiriéndose a la implementación privada y el patrón no se aplica a los miembros públicos, solo a las funciones.

Los miembros de objetos públicos que hacen referencia a variables privadas también están sujetos a las notas de reglas sin parche anteriores.

Como resultado de esto, los módulos creados con el patrón Revealing Module pueden ser más frágiles que los creados con el patrón Module original, por lo que se debe tener cuidado durante el uso.

y de lo que ya he hablado en other posts .

Answer 2

Intenta hacer algo en función de la respuesta de comentario principal. Puede ser que sea más seguro si se llama a una función privada pasando esto a ella, por lo que la función privada podría hacer referencia a la función pública con esta variable.

Creé un patrón de módulo revelador con el siguiente código.

var HTMLChanger = (function () {
    var privateFunc = function () {
        this.sayHello();
    }

    var hello = function () {
        console.log(''say Hello'');
    }
    var callPrivate = function () {
        privateFunc.call(this);
    }


    return {
        sayHello: hello,
        callPrivate: callPrivate
    };
})();

HTMLChanger.callPrivate();
//say Hello

HTMLChanger.sayHello = function() { console.log(''say Hi!'') };

HTMLChanger.callPrivate();
//say Hi!

Como puede ver, podemos anular el miembro público.

Answer 3

Respuesta corta, en el patrón Módulo definimos funciones en el regreso del objeto.

En el patrón de Revealing Module, definimos las funciones en el área de cierre y solo usamos los nombres de las variables en el regreso del objeto.

Hacer esto simplifica el código y tiene muchas otras ventajas