Comment voulez-vous organiser de grands JS/jQuery code de l'ensemble de votre site web? Il ya beaucoup de bonnes ressources sur la façon d'organiser les éléments de votre code, mais rien de vraiment sur la façon de tirer tous ensemble et de s'adapter à chaque pièce en place: du côté de code à l'échelle de l'organisation, de plusieurs pages en utilisant le même code, en restant bien au SEC avec couplage lâche, etc.
Ci-dessous est la façon dont je traite avec lui. Je n'ai jamais été à l'aise l'organisation de mon code comme ceci, parce que je pense que c'est bâclé et peut conduire à la facilité de maintenance/mise à l'échelle des problèmes, mais je ne sais pas vraiment mieux.
Je me rends compte que chacun a son propre ensemble d'exigences, et il n'y a pas de solutions clés en main, mais j'aimerais entendre quelques opinions sur ce que je fais mal, POURQUOI je le fais mal, et des suggestions sur la façon d'écrire du code plus maintenable.
Ce que je pense que je vais vraiment essayer d'obtenir au:
Comment traitez-vous logique que vous besoin de l'utiliser dans de multiples endroits, sur plusieurs pages?
Comment vous organisez-vous à la page spécifique code? Est namespacing chaque page dans un objet global, une bonne idée?1.
Que faites-vous depuis le début de vous assurer que vous n'êtes pas constamment la ré-écriture de votre organisation les schémas de votre application devient plus grand et les plus grands? Je suis probablement sur ma 4ème itération de l'écriture de cette chose.2.
Chaque page reçoit le principal application.js fichier. Chaque page possède son propre application.pagename.js fichier. - Je l'utiliser côté serveur logique d'inclure les fichiers (vérifier d'abord pour voir si l'un existe même pour la page - certaines pages n'ont pas besoin de JS), et puis init dans l'ordre.
Donc, ma page d'accueil ressemble à:
<script src="js/application.js"></script>
<script src="js/application.index.js"></script>
<script>
MyApp.init();
MyApp.index.init();
</script>
mon URL convention est /page/page/id/. J'ai environ 10 pages et une flopée de sous-pages, chaque page exigeant leur propre logique. voir le dernier exemple dans ce post.
La plupart de mon code est déjà modulaire en jQuery UI widgets jQuery plugins, donc je dirais que 75% des le code de ces fichiers est require () " tion d'un widget et initing il.
J'utilise requireJS pour tirer dans les widgets que nécessaire.
// application.js
var MyApp = {
init: function(){
var self = this;
// these widgets are available on every single page
// notice the call to jquery.deparam.js - i'll use this later to init subpage logic.
require(['js/widget1.js', 'js/widget2.js', 'js/widget3.js', 'js/jquery.deparam.js'], function(){
// deparam the query string. I'll use this later.
self.querystring = $.deparam.querystring();
// init widgets once the document is ready
$(function(){
$("#widget1").widget1();
$("#widget2").widget2();
// make these bindings available immediately as well.
self.rebindable();
});
});
},
// I use jQuery UI Dialog extensively as a window manager, and each dialog is loaded
// via an AJAX request. I'll call this method after each AJAX request to
// rebind some key widgets.
rebindable: function(){
$("#widget3").widget3();
}
};
// application.index.js
// home page specific stuff. this file is only included on the home page.
MyApp.index = {
// my convention is that init is automatically called after the script
// is included in a page, outside of a doc.ready statement.
init: function(){
var self = this;
require(['js/widget4.js'], function(){
$(function(){
self.widget4( $("#foo") );
});
});
},
// passing elements to each method allows me to call this init code
// outside of the index page. I can require() this file, and only init
// widget4, and even use a different element.
widget4: function( element ){
var config = {
something: "custom to the home page"
};
element.widget4( config );
}
};
// application.foo.js
// page "foo" stuff
MyApp.foo = {
init: function(){
var self = this;
// this page happens to use the same widget3 and configuration present
// in MyApp.index. this is where things can get sloppy and unmaintainable
// really quickly.
require(['js/application.index.js'], function(){
$(function(){
MyApp.index.widget3( $("#bar") );
});
});
// page "foo" has three subpages (or actions) and require
// their own logic. url convention: /foo/subpage1/
// init whichever page we're on...
switch( self.querystring.subpage ){
case "subpage1":
self.subpage1.init();
break;
case "subpage2":
self.subpage2.init();
break;
case "subpage3":
self.subpage3.init();
break;
}
},
subpage1: function(){
init: function(){
var self = this;
// once the DOM is ready init dialog.
$(function(){
self.dialog( $("#openDialog") );
});
},
dialog: function( element ){
element.bind("click", function(){
$('<div></div>').dialog({
open: function(){
// see what i'm doing here?
MyApp.rebindable();
// maybe more bindings specific to this
// dialog here
}
});
});
}
},
subpage2: function(){
init: function(){
}
},
subpage3: function(){
init: function(){
}
}
};
