¿Qué es este patrón en JavaScript y donde puedo obtener más información al respecto

Question

que tienen códigos similares a los siguientes:

(function(MyHelper, $, undefined){ 

var selectedClass = "selected"; 

MyHelper.setImageSelector = function(selector) { 
    var container = $(selector); 

    setSelected(container, container.find("input:radio:checked")); 
    container.find("input:radio").hide().click(function() { 
     setSelected(container, $(this)); 
    }); 
}; 

MyHelper.enableIeFix = function(selector) { 
    var container = $(selector); 
    container.find("img").click(function() { 
     $("#" + $(this).parents("label").attr("for")).click(); 
    }); 
}; 

function setSelected(container, selected) { 
    container.find("label").removeClass(selectedClass); 
    selected.siblings("label").addClass(selectedClass); 
} 

}(window.MyHelper = window.MyHelper || {}, $)) 

Soy nuevo en JS y me pregunto si esto es un patrón específico en javascript programación . Precisamente me pregunto cuál es el significado de la última línea:

}(window.MyHelper = window.MyHelper || {}, $)) 

¿Es patrón de módulo?

Answer 1

Sí, esto es básicamente un patrón de módulo.

Un resumen de cómo los módulos se crean utilizando el patrón de módulo es:

• crear una cobertura de módulo, típicamente mediante el uso de una expresión de función inmediatamente invocado (IIFE) para crear un cierre. Esto crea su "espacio privado" para su módulo, evita la contaminación global y mantiene su código modular y aislado.

• Tenga un espacio de nombre para adjuntar sus métodos públicos. Los desarrolladores tienen diferentes métodos para realizar este procedimiento de "archivo adjunto". Algunos desarrolladores "entregan" objetos al módulo, mientras que otros "devuelven" un objeto para almacenarlo en una variable. De cualquier manera, es lo mismo.

En este caso, es la versión de "mano-in" del patrón módulo

(function(MyHelper, $, undefined){ 

    var selectedClass = "selected"; 

    MyHelper.setImageSelector = function(selector) {}; 

    function setSelected(container, selected) {} 

}(window.MyHelper = window.MyHelper || {}, $)) 

---

En la última línea, llama inmediatamente a su función y envía estos argumentos

(window.MyHelper = window.MyHelper || {}, $) 

es similar a hacer esto, pero sin el uso de nombres de función:

function anonymous(MyHelper, $, undefined){...} 
anonymous(window.MyHelper = window.MyHelper || {}, $); 

• El primer argumento, window.MyHelper = window.MyHelper || {} es una combinación de operaciones. Cualquiera que sea la operación que devuelve, proporciona el argumento MyHelper en el módulo.

  • El || es una operación "predeterminada". Si el valor que queda de || es "falso", entonces el valor asumido por la expresión "predeterminado" es el de la derecha. Por lo tanto, en su código, si window.MyHelper no existe, entonces su valor predeterminado es un objeto {}.

  • Con la operación "por defecto", window.MyHelper serán asignados ya sea una ya existente window.MyHelper o si no existe ninguna, una nueva instancia del objeto {}

  • operaciones de asignación de JavaScript hacer retornar valores. El valor devuelto por la operación de asignación es el valor asignado a la variable. Esto también hace posible que toda la operación proporcione un valor al módulo.

• el segundo argumento es lo $ es (supongo jQuery?)

• el tercer argumento no se pasa, y desde el interior, es indefinido. está hecho de esta manera ya que, hasta donde yo sé, el undefined es mutable. entonces para tener un undefined puramente indefinido, no le enviamos nada, y por lo tanto la variable undefined es undefined.

---

Lo que hace este código:

MyHelper.setImageSelector = function(selector) {}; 

fue añadir a MyHelper el método setImageSelector y desde su MyHelper es desde el exterior, cualquier persona que lo usa tiene ahora el método MyHelper.setImageSelector().

las otras funciones y variables dentro de IFFE que no se han aumentado a MyHelper son lo que usted llama miembros "privados". JavaScript tiene un alcance funcional, lo que significa que crea un nuevo alcance para cada declaración de función. En lenguaje simple, lo que está adentro puede ver lo externo, pero lo externo no puede ver adentro. Esta es también una manera de no contaminar el alcance global con una gran cantidad de funciones y variables

Answer 2

Esta es una clase de JavaScript. Puede leer más sobre ellos aquí:

http://javascript.about.com/library/bltut35.htm

Answer 3

Se extiende el objeto MyHelper global cuando existe, de lo contrario crear una nueva. El Jquery global se pasa y undefined se establece como argumento, por lo que se puede comprimir con js minimizers.

Se parece mucho al patrón de módulo para mí. También vea: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

Answer 4

La función anónima que se llama inmediatamente/invocado después de su definición como

(
function(arg1,arg2){ 
} 
)(xarg1,xarg2); 

La última línea invoca la función anónima definido. Los argumentos a su función anónima son

1. window.MyHelper = window.MyHelper || {} /* MyHelper objeto global o un objeto vacío si no está definido */
2. $ /* jQuery u objeto prototipo. Con jQuery por lo general es "jQuery" objeto global a avaoid conflicto con otras bibliotecas */

El tercer parámetro de la función anónima "indefinido" asegura que nadie anula o real indefinido sombras.

Esto define una función segura de invocación automática en javascript.