5

我创建了一个这样的模板：

// template.tpl
<div>
    <input id="an_input"></input>
</div>

和一些CSS：

// stylesheet.css
input {
    background: #000000;
}

最后，这是一个精简的模块：

define([
    'jquery',
    'text!template.tpl',
    'text!styleshet.css'
], function($, html, css){      
    var view = $('#sample_div');
    view.append($(html));

    var regex = /^([^\s\}])/gm;

    var styles = css.replace(regex, '#'+view.attr('id')+' $1');
    var style = $('<style>\n'+styles+'\n</style>');
    view.prepend(style);
});

本质上发生的事情是模板被加载并放入#sample_div. 在 CSS 文件作为文本加载后不久，每个项目都以视图 ID 为前缀。

为 CSS 添加前缀后，就会创建样式标签并将其放置在视图内。

现在，这完美地工作，好吧，它并不漂亮，也没有留下太多的错误余地。但是我编写了这段代码来帮助演示我需要什么。

我需要能够加载带有视图特定样式表的模板，其中表单中的样式只会应用于视图并且只会覆盖全局样式。

上面例子的问题是它是一个 hack，一个针对 CSS 的正则表达式，以及一个新的样式标签的构建，这不是我想要的。我一直在研究 javascript CSS 解析器以获得更简洁的解决方案，尽管 JCSSSP 引起了我的注意，但它把许多函数放入了全局命名空间，而 jquery.parsecss 似乎只适用于文档中已有的样式。

有没有人对我想要实现的目标有任何经验？

4

1 回答 1

3

大多数加载器都有 CSS 插件来为您处理插入：

RequireJS CSS 插件 https://github.com/tyt2y3/requirejs-css-plugin

CurlJS CSS 插件与主发行版捆绑在一起： https ://github.com/cujojs/curl/tree/master/dist

于 2013-02-20T06:37:53.503 回答