practices - pattern javascript example

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

Question

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?

Answer 1

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 el estilo DC y el RMP es que en el primero las funciones se definen en diferentes lugares mientras que en el RMP siempre se definen en el mismo lugar y luego se revelan en el literal del objeto público .

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.

Answer 2

El concepto básico de un Módulo Revelador es que tienes un Object que 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 el (new (function SomeClass(){ ... })()); sintaxis. Usar new como este le permite usar la palabra clave this dentro del cierre. Esto es útil si necesita heredar propiedades de otra clase ( AbstractSomeClass.call(this, 998); ) - Sin embargo, aún deberá revelar las propiedades que le gustaría que sean públicas, por ejemplo:

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

Observe también que le asignamos this thus que nos permite usar Parent- this dentro de una subclase que tiene su propio ámbito ( this.value = thus.name || name; )

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

Answer 3

El método llamado por el autor "patrón de Douglas Crockford para crear objetos" es en realidad el patrón del 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

Answer 4

El patrón de módulo revelador se describe bastante bien en el artículo de Essential JavaScript Design Patterns For Beginners .

Answer 5

Me gusta utilizar una combinación del patrón de módulo revelador 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/

Answer 6

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.

Answer 7

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 un valor revealed , a y abc son privados para esa función. Lo que devuelve la función es un objeto literal con una propiedad de name y una propiedad abcfn , que es una referencia a la abc function . La abc function usa la variable privada a . Todo esto se puede hacer gracias al uso de closures (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)

Answer 8

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

Proporciona la posibilidad de declarar funciones públicas y privadas como una clase. Son los principales beneficios de estos patrones. Si no queremos exponer algunas de las funcionalidades accesibles desde todo el mundo, entonces se hace privado y se hace público el resto. es el ejemplo de cómo hacer funciones privadas y públicas. 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 dentro del objeto de retorno ya que es una representación de función pública