Nachdem ich mit AMD/RequireJS herumgespielt hatte, fragte ich mich, ob es eine gute Idee ist, UI-Module einschließlich Vorlagen und CSS zu laden, damit sie völlig unabhängig von der Webseite sind.
Es hört sich gut an, aber ich habe dies noch nicht in freier Wildbahn gesehen, daher kann es Fallstricke geben.
Stellen Sie sich ein UI-Modul mit der folgenden Struktur vor:
myWidget
|--img
|--main.js
|--styles.css
+--template.tpl
Alle Sachen in einem Ordner. Sieht sehr gut aus.
Das Modul in main.js würde etwa so aussehen:
define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {
// Load CSS (Pseudo Code)
var cssUrl = "myWidget/styles.css";
appendToHead(cssUrl);
return function() {
return {
render: function(data) {
return TemplateEngine.toHtml(template, data);
}
}
}
});
Fragen sind jetzt:
- Übersehe ich etwas?
- Gibt es Plugins/Konzepte, wie man dies auf „Standard“-Weise erreichen kann?
- Ist der RequireJS-Optimierer in der Lage, den CSS-Teil hier zu handhaben, sagen wir, die Stylesheets zu verketten/minifizieren, wie es bei den JS-Teilen der Fall ist?
- Irgendwelche Meinungen dazu? Gut oder schlecht?
Ich mache das für Vorlagen und es funktioniert großartig. Der einzige Kampf, den ich hatte, war mit CSS, wo ich die Optimierung nicht zum Laufen bringen konnte. Es würde mir einen kryptischen Fehler geben und ich hatte nicht die Zeit, ihn zu lösen. Es steht derzeit auf meiner Liste der Dinge, die zu lösen sind, also werde ich Ihre Frage im Auge behalten, um zu sehen, ob jemand eine Lösung hat
– timDunham
27. Oktober 2011 um 17:49 Uhr