Wie organisieren Sie große JS/jQuery-Codebasen auf Ihrer gesamten Website? Es gibt viele gute Quellen, wie man Teile deines Codes organisiert, aber nichts wirklich darüber, wie man alles zusammenfügt und jedes Teil an Ort und Stelle bringt: Seitenweite Code-Organisation, mehrere Seiten mit dem gleichen Code, DRY bleiben mit loser Kopplung, usw.Wie organisieren Sie große JS/jQuery-Codebasen auf Ihrer gesamten Website?
Unten ist, wie ich damit umgehen. Ich habe es nie gemocht, meinen Code so zu organisieren, weil ich denke, dass es schlampig ist und zu Problemen bei der Wartbarkeit/Skalierung führen kann, aber ich weiß es nicht wirklich besser.
Ich weiß, dass jeder seine eigenen Anforderungen hat und es keine schlüsselfertigen Lösungen gibt, aber ich würde gerne einige Meinungen darüber hören, was ich falsch mache, WARUM ich es falsch mache, und Vorschläge dazu wie man mehr wartbaren Code schreibt.
Was ich denke, ich bin wirklich versucht, zu bekommen:
Wie gehen Sie mit Logik beschäftigen, die Sie Bedarf an mehreren Stellen verwenden, auf mehrere Seiten?
Wie organisieren Sie den seitenspezifischen Code ? Ist ein Namespacing jeder Seite in ein globales Objekt eine gute Idee? 1.
Was tun Sie, von Anfang an zu sicherzustellen, dass Sie nicht ständig Umschreiben Ihrer Organisation Muster wie Ihre App größer und größer wird? Ich bin wahrscheinlich auf meiner 4. Iteration dieses Ding zu schreiben.2.
Jede Seite erhält die Hauptdatei application.js. Jede weitere Seite hat ihre eigene application.pagename.js Datei. Ich benutze serverseitige Logik, um die Dateien einzuschließen (erste Überprüfung, um zu sehen, wenn man sogar für die Seite existiert - einige Seiten brauchen JS nicht), und dann sie in der Reihenfolge anzustellen.
So meine Homepage wie folgt aussieht:
<script src="js/application.js"></script>
<script src="js/application.index.js"></script>
<script>
MyApp.init();
MyApp.index.init();
</script>
meine URL-Konvention ist/Seite/Unterseite/id /. Ich habe ungefähr 10 Seiten und eine ganze Reihe von Unterseiten, jede Unterseite erfordert ihre eigene Logik. siehe das letzte Beispiel in diesem Post.
Der Großteil meines Codes ist bereits entweder in jQuery UI-Widgets oder jQuery-Plugins modularisiert, also würde ich sagen, dass 75% des Codes in diesen Dateien ein Widget benötigt und es initiert.
Ich benutze requireJS, um Widgets nach Bedarf zu ziehen.
// 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(){
}
}
};
Ich habe diese Woche selbst darüber nachgedacht. Ich bin kürzlich einem Projektteam als Haupt-JavaScript-Codierer beigetreten. Das Projekt läuft schon seit über einem Jahr, also haben sie überall Javascript. Sie haben eine umfangreiche JavaScript-Bibliothek erstellt und einige Anstrengungen unternommen, um Namespaces zu verwenden, aber viele Seiten haben benutzerdefiniertes JavaScript, das nicht nur in Seiten und Benutzersteuerelementen geschrieben ist, sondern auch auf Seiten- oder Benutzersteuerungsdaten basiert. Ich habe die entmutigende Aufgabe, alles zu verstehen und so weit wie möglich zu standardisieren. – Silkster
(Fortsetzung) Ihre Methode ist ein guter Anfang, aber ich kann sehen, wo es nicht erreichbar ist. Vielleicht können Sie eine Methode zum Konfigurieren von Seiten und Steuerelementen entwickeln, so dass Sie nicht viele Switch-Anweisungen verwenden müssen. Sie können auch Claypool (http://www.claypooljs.com/) ausprobieren, um zu sehen, ob das helfen könnte. – Silkster
@Silkster der Link ist kaputt: http: //http//www.claypooljs.com/ –