72

在玩过 AMD/RequireJS 之后，我想知道加载 UI 模块（包括模板和 CSS）是否是个好主意，这样它们就完全独立于网页。

听起来不错，但我还没有看到这在野外实现，所以可能存在陷阱。

考虑一些具有以下结构的 UI 模块：

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

所有东西都在一个文件夹中。看起来很不错。

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

您可以使用文本将模板指定为依赖项！像你展示的那样的模块。我用胡子模板来做这个。

但是 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

RequireJS 有一个第三方 CSS 插件，它似乎运行良好：https ://github.com/VIISON/RequireCSS/ 。

于 2012-09-22T01:56:11.927 回答