¿Cómo se conoce este patrón de diseño en JavaScript?

Question

Estaba buscando el código fuente js para Scrabb.ly.

me he dado cuenta de que iban a hacer algo como lo que para cada uno de sus "clases" distintas:

var Board = (function() { 
    var self = {}; 

    // settings for board 
    self.options = { 
    debug: true, 
    addedPlayTiles: function() {}, 
    clearedPlayTiles: function() {} 
    }; 

    // set to true once the board has been setup 
    self.isSetup = false; 

    // quick access to square elements 
    self.squares = {}; 
    self.squareCount = 0; 

    self.setup = function(options) { 
    self.log("Setting up board!"); 

    // set options 
    _.each(options, function(val, key) { 
     self.options[key] = val; 
    }); 

    return self; 
})(); 

Parte del código de la zona central se ha omitido, pero esto debe darle la idea general.

1. ¿Cuál es el propósito de lo siguiente: (function() { // code })(); ¿Es este el patrón de módulo que he visto hablar? ¿Esto es para mantener limpio el espacio de nombres global?
2. ¿Qué significa esta línea ?: var self = {} ¿Se usa el autoobjeto para exponer miembros 'públicos'? ¿Cómo definirías una función o variable privada?
3. ¿Cómo crearías varias "placas" si quisieras?

Answer 1

Se llama patrón de módulo.

Los paréntesis alrededor de la función significan que se está evaluando inmediatamente después de haberse definido, por lo que en esencia es Singleton. Dado que se trata de una función anónima, la definición no se almacena, por lo que no puede crear fácilmente nuevas instancias de este objeto sin algunas modificaciones (que se analizarán más adelante).

Tiene razón, self contiene los métodos y propiedades "públicos", por así decirlo. Las variables que no están definidas en self no son visibles desde el exterior debido a las propiedades de cierre. Sin embargo, las funciones definidas en self todavía tienen acceso a las variables privadas porque en Javascript, las funciones mantienen el acceso al contexto (incluidas las variables) en las que se definieron, con algunas excepciones ... principalmente arguments y .

Si desea definir varias instancias de este objeto, debe eliminar los paréntesis (var Board = function() { ... }) y luego usar var obj = Board() para crear un objeto. Tenga en cuenta que no utiliza el operador new.

Answer 2

Como mentioned in the other answer, ese es el Patrón del Módulo.

También es conocido como el diseño del módulo de YUI o el patrón de Yahoo módulo, sobre todo porque se hizo popular por este artículo de blog:

• YUI Blog: A JavaScript Module Pattern por Eric Miraglia

En cuanto al punto 3, el patrón de módulo está destinado a ser un singleton. Sin embargo, el Patrón de Módulo se transforma fácilmente en un Patrón de Constructor. Es posible que desee echa un vistazo a la siguiente presentación por Douglas Crockford para obtener más información sobre este tema:

• JavaScript: The Good Parts - Functional Inheritance [PPT] por Douglas Crockford

Answer 3

var self = {} debería tener el efecto de auto inicializar como un objeto vacío literal ; si el yo ya existía, debería eliminar los valores antiguos y reiniciar como una matriz vacía.