RequireJS: Laden von Modulen einschließlich Vorlagen und CSS [closed]

Lesezeit: 3 Minuten

Benutzer-Avatar
fbrandel

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:

  1. Übersehe ich etwas?
  2. Gibt es Plugins/Konzepte, wie man dies auf „Standard“-Weise erreichen kann?
  3. 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?
  4. 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

Benutzer-Avatar
Chris Biscardi

Über den Text können Sie die Vorlage als Abhängigkeit angeben! Modul, wie Sie es gezeigt haben. Ich mache das mit Schnurrbart-Vorlagen.

Require.js unterstützt CSS-Dateien jedoch nicht explizit.

Hier ist die offizielle Erklärung, sie ist ziemlich gut erklärt:
http://requirejs.org/docs/faq-advanced.html#css

Edit: Februar 2012.

Vorlagen wie Lenker können ebenso wie jedes andere JS-Modul vorkompiliert und eingebunden werden
http://handlebarsjs.com/precompilation.html

Bearbeitung: August 2015

Wenn Sie nach dieser Art von Modularisierung suchen, sollten Sie sich damit befassen Webpaket und speziell CSS-Loader. Ich verwende es, um .css-Dateien mit .jsx-Dateien als einheitliches “Modul” zu koppeln und das relevante CSS zur Erstellungszeit in ein einziges Stylesheet zu extrahieren.

  • Wie geht man dann “richtig” mit CSS um?

    – Umarmung

    2. November 2011 um 1:10 Uhr

  • AFAIK gibt es keinen “richtigen” Weg. Ihre Optionen sind: 1) traditionelles Link-Tag 2) dynamisches Einbinden des Stylesheets mit Javascript . Wenn Ihr Javascript von Ihrem CSS abhängt und Sie es dynamisch laden möchten, müssen Sie eine Funktion erstellen, um das Vorhandensein eines Attributs aus der geladenen CSS-Klasse zu testen, bevor Ihr Javascript-Widget ausgeführt wird.

    – Chris Biscardi

    2. November 2011 um 1:45 Uhr

  • Sie könnten CSS auch über den Text laden! Modul und parse es, obwohl ich das noch nie gemacht habe.

    – Chris Biscardi

    2. November 2011 um 1:48 Uhr

  • Ja, ich weiß, dass es viele Alternativen gibt. Es nervt mich immer noch, dass wir ein Standardsystem für JS-Module haben, aber wenn es um CSS geht, sind wir wieder im Wilden Westen.

    – Umarmung

    2. November 2011 um 1:51 Uhr

  • Ich glaube, ich verstehe nicht, warum CSS nicht vom Text geladen werden kann! Plugin? ist CSS nicht nur utf8-Text?

    – Alexander Mills

    16. August 2015 um 1:01 Uhr

Es gibt ein CSS-Plugin eines Drittanbieters für RequireJS, das gut zu funktionieren scheint: https://github.com/VIISON/RequireCSS/.

  • Obwohl das Plugin sehr alt ist, funktioniert es noch 2015 einwandfrei.

    – budhajeewa

    5. Mai 2015 um 11:14 Uhr

  • Verwenden Sie besser diesen, der den r.js-Optimierer unterstützt github.com/guybedford/require-css/issues

    – Firmmo

    6. Juli 2015 um 19:45 Uhr

1074620cookie-checkRequireJS: Laden von Modulen einschließlich Vorlagen und CSS [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy