72

AMD / RequireJSで遊んだ後、テンプレートやCSSを含むUIモジュールをロードして、Webページから完全に独立させるのは良い考えかどうか疑問に思いました。

良さそうに聞こえますが、これが実際に実装されているのを見たことがないので、落とし穴があるかもしれません。

次の構造のUIモジュールについて考えてみます。

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

すべてのものが1つのフォルダにあります。とても素敵に見えます。

main.jsのモジュールは次のようになります。

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

質問は次のとおりです。

  1. 私は何かが足りないのですか？
  2. これを「標準」の方法で実現するためのプラグイン/コンセプトはありますか？
  3. RequireJSオプティマイザーはここでCSSパーツを処理できますか？たとえば、JSパーツの場合と同じように、スタイルシートを連結/縮小しますか？
  4. それについて何か意見はありますか？良いか悪いか？
4

2 に答える 2

54

テキストを使用して、テンプレートを依存関係として指定できます! あなたが示したようなモジュール。これは、Mustache テンプレートを使用して行います。

ただし、Require.js は css ファイルを明示的にサポートしていません。

これが公式の説明です。かなりよく説明されています： http://requirejs.org/docs/faq-advanced.html#css

編集: 2012 年 2 月。

ハンドルバーなどのテンプレートも、他の JS モジュール http://handlebarsjs.com/precompilation.htmlと同じようにプリコンパイルして含めることができます。

編集: 2015 年 8 月

この種のモジュール化を行っている場合は、webpack、特にcss-loaderを調べる必要があります。これを使用して、.css ファイルと .jsx ファイルを統合された「モジュール」としてペアにし、ビルド時に関連する CSS を単一のスタイルシートに抽出します。

于 2011-11-02T00:58:43.067 に答える
7

https://github.com/VIISON/RequireCSS/のように、RequireJS 用のサードパーティ CSS プラグインがうまく機能しているようです。

于 2012-09-22T01:56:11.927 に答える