¿Cómo estructurar mi código javascript/jquery?

Question

Estoy jugando con una aplicación web jquery bastante basada en ajax. Está llegando a un punto en el que casi pierdo la pista de los eventos que deberían desencadenar qué acciones, etc.

Me queda algo así como la sensación de que mi estructura javascript es incorrecta, en un nivel más básico. ¿Cómo estructuran su código javascript/jquery, el manejo de eventos, etc.? Cualquier consejo para un desarrollador javascript novato.

Answer 1

AMDS!

Ha pasado un tiempo desde que se publicaron las primeras respuestas a esta pregunta y muchas cosas han cambiado. En primer lugar, el mundo del navegador JS parece moverse hacia AMD (definición de módulo asíncrono) para la organización del código.

La forma en que funciona es que escribir todo el código como módulos de AMD, por ejemplo:

define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) { 
    /*This function will get triggered only after all dependency modules loaded*/ 
    var module = {/*whatever module object, can be any JS variable here really*/}; 
    return module; 
}); 

Y luego módulos conseguir cargado usando gestores de AMD como curl.js o require.js etc, para ejemplo:

curl(
    [ 
     'myApp/moduleA', 
     'myApp/moduleB' 
    ], 
).then(
    function success (A, B) { 
     // load myApp here! 
    }, 
    function failure (ex) { 
     alert('myApp didn't load. reason: ' + ex.message); 
    } 
); 

Las ventajas son:

1. Solo tiene que incluir el elemento <script> en su página que carga el cargador AMD mismo (algunos de ellos son bastante pequeños).

2. ¡Después de eso, todos los archivos JS se recuperarán automáticamente en BLOQUEO NO BLOQUEO asíncrono! moda, ¡así mucho más rápido!

3. Los módulos necesarios se ejecutarán solo después de que se carguen sus dependencias.

4. Modular (que significa código que es más fácil de mantener y reutilizar).

5. La contaminación de variables globales puede frenarse completamente si se usa correctamente.

Sinceramente, una vez hecho clic en concepto tiene en su cabeza, que nunca volverá a sus viejas costumbres.

P.S: jQuery sí se registra como módulo AMD a partir de la versión 1.7.

Más información sobre AMDS:

• https://github.com/cujojs/curl
• http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
• http://requirejs.org/
• http://www.bennadel.com/blog/2275-Using-RequireJS-For-Asynchronous-Script-Loading-And-JavaScript-Dependency-Management.htm
• https://github.com/Integralist/Blog-Posts/blob/master/2012-01-04-Beginners-guide-to-AMD-and-RequireJS.md

Answer 2

JavaScript código que encontraron los siguientes enlaces de Christian Heilmann indispensables

• The module pattern
• Configuring scripts

También me gusta mucho el método descrito por Peter Michaux here

para jQuery , Recomiendo encarecidamente leer las guías en Authoring y d me encontré con este tutorial en jQuery plugin patterns muy buena

Answer 3

archivos js Mis suelen seguir una convención de nomenclatura similar a esto:

• xxx.utility.js
• mypage.events.js
• xxx. common.js
• /lib/
• /OS-DoNotDistribute/lib/

Dónde

• 'mipágina' es el nombre del html, aspx, php, etc archivo.
• 'xxx' es el concepto. (Es decir orders.common.js)
• 'utilidad' significa que es una secuencia de comandos reutilizable biblioteca (es decir ajax.utility.js, controlfader.utility.js)
• 'común' es la funcionalidad reutilizable para esta aplicación, pero no volver a usar en otros proyectos
• 'lib' es un subdirectorio para las secuencias de comandos externos o biblioteca
• 'OS-DoNotDistribute' es un subdirectorio para asegurar que ningún código con licencia del sistema operativo se distribuye si la aplicación es cada vez vendido.

Además, para ajax, tengo una convención de nomenclatura especial para las funciones de devolución de llamada, por lo que es fácil decir cuáles son.

No estoy seguro de que sea parecido a lo que estaba buscando, pero espero que ayude.

Answer 4

para mantener mis eventos en el control Yo uso una publicación/suscripción mecanismo

jQuery.subscribe = function(eventName, obj, method){ 
    $(window).bind(eventName, function() { 
     obj[method].apply(obj, Array.prototype.slice.call(arguments, 1)); 
    }); 
    return jQuery; 
} 

jQuery.publish = function(eventName){ 
    $(window).trigger(eventName, Array.prototype.slice.call(arguments, 1)); 
    return jQuery; 
} 

He aquí un ejemplo de su uso

// a couple of objects to work with 
var myObj = { 
    method1: function(arg) { 
     alert('myObj::method1 says: '+arg); 
    }, 
    method2: function(arg1, arg2) { 
     alert(arg1); 
     //republish 
     $.publish('anEventNameIMadeUp', arg2); 
    } 
} 

var myOtherObj = { 
    say: function(arg){ 
     alert('myOtherObj::say says: ' + arg); 
    } 
} 



// you can then have all your event connections in one place 

//myObj::method2 is now listening for the 'start' event 
$.subscribe('start', myObj, 'method2'); 

//myOtherObj::say is now listening for the 'another' event 
$.subscribe('anotherEvent', myOtherObj, 'say'); 

//myObj::method1 is now listening for the 'anEventNameIMadeUp' event 
$.subscribe('anEventNameIMadeUp', myObj, 'method1'); 
//so is myOtherObj::say 
$.subscribe('anEventNameIMadeUp', myOtherObj, 'say'); 


// ok, trigger some events (this could happen anywhere) 
$.publish('start', 'message1', 'message2'); 
$.publish('anotherEvent', 'another message'); 

Answer 5

Sin duda, recomiendo leer sobre el modelo de objeto literal, además de el patrón del módulo; He aquí una buena valoración crítica:

http://ajaxian.com/archives/show-love-to-the-object-literal

Answer 6

(function($, window, slice) 
{ 

    $.subscribe = function(eventName, obj, method) 
    { 
     $(window).bind(eventName, function() 
     { 
      obj[method].apply(obj, slice.call(arguments, 1)); 
     }); 
     return $; 
    }; 

    $.publish = function(eventName) 
    { 
     $(window).trigger(eventName, slice.call(arguments, 1)); 
     return jQuery; 
    }; 

})(jQuery, window, Array.prototype.slice); 

Answer 7

Para añadir a las respuestas existentes, aquí hay un great post que cubre las técnicas más avanzadas que se basan en el modelo de módulo.

Una vez que su código Javascript alcanza cierto tamaño, inevitablemente querrá refactorizarlo dividiéndolo en múltiples archivos/módulos/submódulos. Si no está seguro de cómo lograr esto utilizando el patrón del módulo, este artículo es imprescindible.

Answer 8

Podemos usar el patrón mvc en nuestras aplicaciones javascript-jquery. (Backbone.js, knockout.js vs ....) son bibliotecas maduras que podemos usar para este objetivo.

Answer 9

me gusta mucho t presentes artículos:

http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

Ellos me ayudaron a entender cómo telerik crea extensiones para asp.net mvc.

Answer 10

Me gusta la idea de AMD (ver nix's answer).

Pero generalmente compilo todos mis archivos JS en un solo archivo JS. En ese caso, la parte asíncrona no es necesaria. Así que escribí un pequeño "cargador de módulos de Infile".

aquí está: https://codereview.stackexchange.com/questions/14530/a-little-infile-amd