Pregunta Cómo usar el patrón de módulo Revelar en JavaScript


Me encontré con esta publicación: Patrón de módulo revelador de JavaScript. Me gustaría usar esto en mi proyecto.

Imaginemos que tengo una función abc y estoy llamando a esa función en mi archivo JavaScript principal.

¿Este patrón hace las cosas diferentes? ¿Alguien puede mostrarme un ejemplo básico de este patrón?


75
2018-04-13 09:46


origen


Respuestas:


Un pequeño ejemplo:

var revealed = function(){
   var a = [1,2,3];
   function abc(){
     return (a[0]*a[1])+a[2];
   }

   return {
      name: 'revealed',
      abcfn: abc
   }
}();

en la función anónima que se inicia para dar revealed un valor, a y abc son privados para esa función. Lo que la función devuelve es un objeto literal con un name propiedad y una abcfn propiedad, que es una referencia a la abc function. los abc function usa la variable privada a. Todo esto se puede hacer gracias al uso de cierres (todo lo que está dentro del alcance de una función puede ser referenciado por todo lo demás en esa misma función).

Uso revelado:

alert(revealed.name);    //=> 'revealed'
alert(revealed.abcfn()); //=> 5 (1*2+3)

95
2018-04-13 10:00



DC = Douglas Crockford
    RMP = patrón de módulo revelador

La diferencia entre DC y RMP es principalmente organizacional / legible

¿El ejemplo se presenta en el artículo mismo? Y qué es exactamente lo que preguntas porque esas cosas no tienen nada que ver con los archivos, sino con los cierres.

Pones todo en un cierre (función) y expones solo aquellas partes a las que deseas acceder. La diferencia entre DC style y RMP es que en la primera las funciones se definen en diferentes lugares, mientras que en la RMP siempre se definen en el mismo lugar y luego revelado en el público objeto literal.

Entonces en DC y RMP tienes:

  • cierre que permite definir partes privadas (variables y funciones)
  • parte privada
  • resultado público que define la funcionalidad y variables públicamente visibles (estado)

Estos dos patrones difieren solo en legibilidad. En el caso de DC, no siempre se puede saber dónde se definirá determinada funcionalidad, pero en el RMP siempre se sabe que todo está en la parte privada.


22
2018-04-13 09:55



El patrón de módulo revelador se describe bastante bien en Patrones esenciales de diseño de JavaScript para principiantes artículo.


13
2018-04-13 09:53



El método llamado por el autor "patrón de Douglas Crockford para crear objetos" es en realidad el patrón de módulo que fue desarrollado principalmente por Richard Cornford et al. Ver http://groups.google.com/group/comp.lang.javascript/msg/9f58bd11bd67d937 

En cuanto a los ejemplos, hay muchos. Lea el siguiente artículo y siga algunos de los enlaces: http://peter.michaux.ca/articles/module-pattern-provides-no-privacy-at-least-not-in-javascript-tm


6
2018-04-13 10:01



Me gusta usar una mezcla de patrón revelador del módulo con el patrón singleton para que pueda mantener el código estructurado con los beneficios del patrón del módulo:

var MyFunction = function(){

    var _ = {
       Init: function(){
          _.Config.foo = "hello world";
       },
       Config:{
          foo:null
       },
       ShowAlert:function(){
          alert(_.Config.foo);
       }
    }

    return {
        Init: _.Init,
        ShowAlert: _.ShowAlert
    };
}();

MyFunction.Init();
MyFunction.ShowAlert();

He escrito más información sobre esto en mi blog:

http://curtistimson.co.uk/js/mixing-revealing-module-and-singleton-javascript-patterns/


1
2018-06-22 12:30



Para el código fuera del módulo, hace poca diferencia. En los 3 casos en ese artículo, los métodos se llaman de la misma manera. Pero la estructura del módulo en sí es internamente diferente.

El patrón de módulos de Crockford y lo que ellos llaman el "patrón revelador del módulo" son prácticamente lo mismo, estructuralmente. La única diferencia es que asignan el método a una var local primero para que sea más legible. Pero realmente no hay nada especial al respecto, y usted tiene algunos ejemplos allí en su enlace.


0
2018-04-13 09:54



El concepto básico de un módulo revelador es que tienes un Object cual encapsula sus datos y comportamiento:

var Module = (function(){
    var privateStuff = {};
    var publicStuff = {};

    return publicStuff;
})();

Sin embargo, hay algunas mejores prácticas que debe emplear al usar este patrón. Aquí hay un módulo ("Modulus") con algunas propiedades para demostración, que emplea algunas de estas prácticas:

function AbstractSomeClass(id) {
    this.id = id;
    return this;
}

var Modulus = (new (function SomeClass() {
    var thus = this;

    function NameClass(name){
        this.value = thus.name || name;
    }

    AbstractSomeClass.call(this, 998);

    this.name = 'Touring';
    this.name = ( new NameClass('Hofstadter') ).value;

    return {
        id: this.id,
        name: this.name
    };
})());

Observe la (new (function SomeClass(){ ... })()); sintaxis. Utilizando new así te permite usar el this palabra clave dentro del cierre. Esto es útil si necesita heredar propiedades de otra clase (AbstractSomeClass.call(this, 998);) - Sin embargo, aún necesitarás revelar las propiedades que le gustaría tener pública, por ejemplo:

return {
    id: this.id,
    name: this.name
};

También note que asignamos this a thus - lo que nos permite usar Parent-this dentro de una subclase que tiene su propio this alcance (this.value = thus.name || name;)

Una vez más, estas son solo algunas de las convenciones y mejores prácticas que se sugieren.


0
2017-08-15 20:49



Aquí está el pequeño ejemplo de un patrón de módulo revelador.

Proporciona una facilidad para declarar funciones privadas y públicas como una   clase.Son los principales beneficios de estos patrones.Si no queremos exponer   algunas de las funcionalidades accesibles desde todo el mundo las hacen privadas y   resto del público. A continuación se muestra el ejemplo de cómo hacer público y privado   funciones. Y una cosa más es un bloque de código autoejecutable.

  var Calculator = (function () {

        var num1 = 10;
        var num2=5
        var _abc = function () {
            return num1 - num2;
        };

        var _mulFunc = function () {
            return num1 * num2;
        };

        var _divFunc = function () {
            return num1/num2;
        };

        return {
           //public scope
            abc: _abc,
            mulFunc:_mulFunc
         };

    })();

alerta (Calculator.abc ()); regresa 5

alerta (Calculator.mulFunc ()); devuelve 50

Y __divFunc () no será accesible, ya que está en ámbito privado.   Solo podemos acceder a aquellas funciones que se declaran en el interior regreso   objeto   como es representación de función pública


0
2017-09-24 17:50