¿Cómo estructurar profesionalmente mis proyectos Javascript de módulo-patrón?

Question

He leído sobre el Revealing Module Pattern y me encanta. Pero, ¿qué pasa con los proyectos grandes donde el "objeto maestro" tiene decenas de subobjetos y quizás cientos de funciones? No quisiera ser el único que coloque todo ese código en un cierre de función anónima.

¿Cómo se gestionan los proyectos de patrón de módulo grande?

Answer 1

Puede usar el aumento para separar sus módulos en diferentes archivos. Una vez que esté listo para una versión de producción, puede concatenar esos archivos en uno o varios archivos.

Fichero1 define módulo M.n

var M = M || {}; 
M.n = M.n || {}; 

(function (self) { 
    self.doSomething = function() { 
     console.log("something"); 
    }; 
})(M.n); 

archivo2 define módulo M.n.p

var M = M || {}; 
M.n = M.n || {}; 
M.n.p = M.n.p || {}; 

(function (self) { 
    self.doSomethingElse = function() { 
     console.log("something else"); 
    }; 
})(M.n.p); 

ahora en el script "principal" que pueden utilizarse libremente a los miembros de estos módulos.

M.n.doSomething(); 
M.n.p.doSomethingElse(); 

Definición de los módulos puede ser un poco tedioso, pero usted debe ser capaz de batir algo hasta automatizarlo. En el pasado, he usado este pequeño script para ayudar a que sea más fácil, pero siéntete libre de hacer el tuyo. Incluso puede hornear en la administración de la dependencia con nombres de archivos consistentes.

var namespace = function(path, context, args) { 
    var finalLink = namespace._generateChain(path, window); 
    context.apply(finalLink, [finalLink].concat(args)); 
}; 

namespace._generateChain = function(path, root) { 
    var segments = path.split('.'), 
     cursor = root, 
     segment; 

    for (var i = 0; i < segments.length; ++i) { 
    segment = segments[i]; 
    cursor = cursor[segment] = cursor[segment] || {}; 
    } 

    return cursor; 
}; 

Para usar:

namespace("M.n.p", function (self) { 
    self.doSomethingElse = function() { 
     console.log("something else"); 
    }; 
}); 

Si por alguna razón desea incluir una variable bajo un alias diferente, se puede pasar a la función de espacio de nombres y se pasa a la función como una argumento.

namespace("M.n.p", function (self, $) { 
    self.doSomethingElse = function() { 
     $("p").text("something else"); 
    }; 
}, jQuery); 

Answer 2

Use RequireJS para organizar cosas. Para la lógica compartida, los métodos compartidos deben almacenarse en un espacio de nombre accesible globalmente, o acceder a través de require(). No me gustaba tener que realizar muchas llamadas a require() para el código de la aplicación, así que incluí los módulos en fragmentos y cada uno se adjuntaba a un espacio de nombres en particular a través de la definición de inclusión.

//Core.js 
define(function(){ 
    return { 
    ns: 'global namespace' 
    }; 
}); 

//newMethod.js 
define(['core'], function(ns){ 
    ns.newMethod = function(){ console.log('my new method '); } 
}); 

//Application code 
require(['newMethod'], function(namespace) { 
    console.log(namespace.ns); //global namespace 
    namespace.newMethod(); //'my new method' 
});