Comment structurer mon code javascript / jquery?

Question

Je suis en train de jouer avec une application web jquery très intensive basée sur ajax. Je commence presque à perdre la trace des événements qui devraient déclencher quelles actions, etc.

Je suis un peu laissé avec le sentiment que ma structure javascript est fausse, à un niveau plus fondamental. Comment vous structurez-vous votre code javascript / jquery, la gestion des événements, etc., tout conseil pour un développeur débutant en javascript.

Answer 1

AMDS!

Il a été un certain temps depuis la première répond ai posté à cette question et beaucoup de choses ont changé. D'abord et avant tout, la JS navigateur monde semble se déplacer vers le service apple mobile device (asynchronous module definition) pour le code de l'organisation.

La façon dont fonctionne le est vous écrire TOUT le code que l'AMD modules, par exemple:

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

Et puis les modules chargés en utilisant AMD chargeurs comme curl.js ou require.js etc, par exemple:

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

Les avantages sont:

1. Vous n'avez qu'à inclure seul <script> élément sur votre page qui se charge de la DMLA chargeur lui-même (certains d'entre eux sont tout à fait minuscule).

2. Après que tous les fichiers JS sont extraites automatiquement en asynchrone NON BLOQUANT! de la mode, donc plus rapide!

3. Modules nécessaires seront exécutés qu'après ses dépendances suis chargé.

4. Modulaire (ce qui signifie que le code qui est plus facile à maintenir et à ré-utiliser).

5. Les variables globales de la pollution peut être complètement freinée si elle est utilisée correctement.

Honnêtement, une fois que le concept a cliqué dans votre tête, vous ne serez jamais revenir à vos anciennes façons de faire.

P. S: jQuery ne s'inscrire en tant que AMD module à partir de la version 1.7.

Plus d'informations sur le service apple mobile device:

• 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

Pour que le code javascript que j'ai trouvé les liens suivants de Christian Heilmann indispensable

• Le motif de module
• La configuration de scripts

J'aime aussi beaucoup la méthode décrite par Pierre Michaux ici

Pour jQuery, je vous conseille vivement la lecture de guides sur la Création et j'ai trouvé ce tutoriel sur jQuery plugin modèles de très bonne

Answer 3

Pour garder le contrôle de mes événements, j'utilise un mécanisme de publication / abonnement.

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

Voici un exemple d'utilisation

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

Je recommande vivement de lire le motif littéral d'objet en plus du motif de module; voici un bon article:

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