Come strutturare il mio codice javascript/jquery?

Question

Mi godo con un'applicazione web jquery basata su ajax piuttosto intensiva. Sta arrivando a un punto in cui quasi mi dimentico di quali eventi dovrebbero scatenare quali azioni ecc.

Sono quasi rimasto con la sensazione che la mia struttura javascript sia errata, ad un livello più basilare. Come strutturate il vostro codice javascript/jquery, la gestione degli eventi, ecc., Ogni consiglio per uno sviluppatore javascript novizio.

Answer 1

AMDS!

È passato un po 'di tempo da quando sono state pubblicate le prime risposte a questa domanda e molte cose sono cambiate. In primo luogo, il mondo dei browser JS sembra muoversi verso AMD (definizione asincrona dei moduli) per l'organizzazione del codice.

Il modo in cui funziona è che si scrive tutto il codice come moduli di AMD, per esempio:

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; 
}); 

E poi i moduli ottenere caricato utilizzando caricatori AMD come curl.js o require.js ecc, per esempio:

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

vantaggi sono:

1. Nella pagina è necessario includere solo un elemento <script> che carica il caricatore AMD (alcuni sono piuttosto piccoli).

2. Dopo che tutti i file JS verranno recuperati automaticamente in NON BLOCCO asincrono! moda, quindi molto più veloce!

3. I moduli necessari verranno eseguiti solo dopo aver caricato le sue dipendenze.

4. Modulare (che significa codice che è più facile da mantenere e riutilizzare).

5. Le variabili globali possono essere completamente ridotte se utilizzate correttamente.

Onestamente, una volta cliccato concetto ha nella tua testa, non avrai mai tornare al vecchio modo.

P.S: jQuery si registra come modulo AMD a partire dalla versione 1.7.

Maggiori informazioni sul 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

Per codice javascript ho trovato i seguenti collegamenti da Christian Heilmann indispensabili

• The module pattern
• Configuring scripts

Mi piace molto anche il metodo descritto da Peter Michaux here

per jQuery , Raccomando vivamente di leggere le guide su Authoring un d Ho trovato questo tutorial su jQuery plugin patterns molto buona

Answer 3

file My js di solito seguono una convenzione di denominazione simile a questo:

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

Dove

• 'mypage' è il nome del html, aspx, php, ecc file.
• 'xxx' è il concetto. (Cioè orders.common.js)
• 'utilità' significa che è uno script riutilizzabile biblioteca (cioè ajax.utility.js, controlfader.utility.js)
• 'comune' è la funzionalità riutilizzabile per questa applicazione, ma non riutilizzabili in tutta altri progetti
• 'lib' è una sottodirectory per gli script esterni o biblioteca
• 'OS-DoNotDistribute' è una sottodirectory per garantire l'assenza di codice concesso in licenza del sistema operativo viene distribuito se l'applicazione è mai venduto.

Inoltre, per ajax, ho una convenzione di denominazione speciale per le funzioni di richiamata, quindi è facile dire quali sono.

Non sono sicuro che sia vicino a quello che stavi cercando, ma spero che sia d'aiuto.

Answer 4

per mantenere il mio eventi in controllo Io uso una pubblicazione/sottoscrizione meccanismo

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; 
} 

Ecco un esempio del suo utilizzo

// 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

Vi consiglio caldamente la lettura sul modello letterale oggetto in aggiunta a il modello del modulo; ecco una buona writeup:

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

da aggiungere alle risposte esistenti, ecco un great post che copre tecniche più avanzate che si basano sul modello modulo.

Una volta che il codice Javascript raggiunge una determinata dimensione, è inevitabile che lo si debba rifattare suddividendolo in più file/moduli/sottomoduli. Se non sei sicuro di come ottenere ciò utilizzando il modello di modulo, questo articolo è obbligatorio.

Answer 8

Possiamo usare il modello mvc nelle nostre applicazioni javascript-jquery. (Backbone.js, knockout.js vs ....) sono librerie mature che possiamo usare per questo scopo.

Answer 9

mi piace molto t articoli ueste:

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

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

Mi hanno aiutato a capire come Telerik crea estensioni per asp.net MVC.

Answer 10

Mi piace l'idea di AMD (vedere nix's answer).

Ma in genere compilo tutti i miei file JS in un unico file JS. In tal caso la parte asincrona non è necessaria. Così ho scritto un po '"Infile Module Loader".

Eccolo: https://codereview.stackexchange.com/questions/14530/a-little-infile-amd