Arquitectura de Javascript/Estructura de aplicación ¿Mejores prácticas?

Question

¿Existen?

He sido esclavo de los lenguajes OO fuertemente tipados (Java & C#) durante muchos años y soy un devoto de Martin Fowler y su especie. Javascript, debido a su naturaleza vagamente tipada y funcional parece no prestarse a las expresiones idiomáticas a las que estoy acostumbrado.

¿Cuáles son las mejores prácticas para organizar un cliente rico en JavaScript? Estoy interesado en todo, desde dónde guardar tu código (un archivo o varios archivos) a los patrones MVC, a la pandilla de cuatro patrones, a las capas.

No poner cosas en el espacio de nombres global parece ser el único consenso.

Estoy usando JQuery como la "API extendida".

Answer 1

Me gusta usar una especie de arquitectura MVC del lado del cliente.

• Tengo una página CONTROLADOR
• El DOM es mi punto de vista
• El servidor es mi modelo

Normalmente se crea una clase controlador página Singleton (con el apoyo a las clases de lo que se necesita) que controla las llamadas ajax y ve el enlace.

var pageXController = { 
    init: function(param) { 
    pageXController.wireEvents(); 
    // something else can go here 
    }, 

    wireEvents : function() { 
    // Wire up page events 
    } 

    // Reactive methods from page events 
    // Callbacks, etc 
    methodX : function() {} 
} 

$(document).ready(function() { 
    // gather params from querystring, server injection, etc 
    pageXController.init(someparams); 
}); 

También me gustaría añadir aquí que su modelo en este caso es de su DTO (objetos de transferencia de datos) que están optimizados para el problema que resuelven. Este NO es tu modelo de dominio.

Answer 2

Una cosa que tal vez quiera consultar es Backbone.js, que le ofrece un buen marco para construir clases de modelos para representar esos datos en su aplicación y vincularlos a su interfaz de usuario HTML. Esto es preferible a vincular sus datos al DOM.

Más en general, aquí hay un gran artículo sobre JavaScript best practices del blog de desarrollo de Opera.

Answer 3

Para el desarrollo de Javascript complejo, la estructuración de su base de código es fundamental en mi experiencia. Históricamente es un lenguaje de parches, hay una gran tendencia a que el desarrollo de Javascript termine con archivos de script masivos.

Recomendaría separar lógicamente las áreas funcionales de la aplicación para borrar los módulos que están ligeramente acoplados y autónomos. Por ejemplo, como se muestra por debajo de su suite de productos podría tener múltiples módulos del producto y cada módulo con múltiples sub-módulos:

Una vez que tenga la capacidad de crear módulos jerárquicos, es un asunto de la creación de componentes de interfaz de usuario en relavant submódulo. Estos componentes de UI también deberían ser preferiblemente independientes. Es decir, cada uno con su propia plantilla, css, localización, etc. Como se muestra a continuación:

he creado una arquitectura de referencia JS con el código de ejemplo para compartir mi expierince gané en un par de proyectos a gran escala JS. Soy el autor de boilerplateJS. Si desea una base de código de referencia en la que se incluyan varias de las inquietudes críticas, sienta la pena de usarla como base de código de inicio.

http://boilerplatejs.org

Answer 4

Si estamos hablando de Javascript a continuación, apps de arquitectura Nicholas Zakas 2011 podcast es una visita obligada: Nicholas Zakas: Scalable JavaScript Application Architecture

también referencia en línea de Addy Osmani: Patterns For Large-Scale JavaScript Application Architecture