我创建了一个这样的模板:
// 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解析器以获得更清晰的解决方案,虽然JSCSSP引起了我的注意,它将许多函数放入全局命名空间,而jquery.parsecss似乎只适用于文档中已有的样式.
有没有人对我想要实现的目标有任何经验?
解决方法
大多数加载器都有CSS插件,可以为您处理插入:
RequireJS CSS插件
https://github.com/tyt2y3/requirejs-css-plugin
CurlJS CSS插件与主要发行版捆绑在一起:
https://github.com/cujojs/curl/tree/master/dist
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。