我正在研究 Google 的样式表重命名功能,但我不确定如何重写我的 jquery 选择器。我没有找到 doc 这一点非常清楚。
如果我有一些如下所示的代码:
<div class="MyClass"></div>
<div id="MyID"></div>
$('.MyClass').someFunc();
$('#MyID').someFunc();
必须如何编写 HTML 和 javascript 才能使 CSS 重命名起作用?
感谢您的建议。
最佳答案
为了使闭包样式表与 jQuery 等外部库结合使用,您还需要使用闭包库来添加对 goog.getCssName
的支持。但是,由于 Closure-Library 的编写是为了最大限度地利用 Closure-compiler 的死代码消除功能,因此最终输出中只会包含极少量的库代码(本例中约为 1KB)。
第 1 步 - 设置您的项目
您将需要以下工具:
第 2 步 - 设置源文件
样式表源(sample.gss)
@def BG_COLOR rgb(235, 239, 249);
@def DIALOG_BORDER_COLOR rgb(107, 144, 218);
@def DIALOG_BG_COLOR BG_COLOR;
.MyClass {
background-color: BG_COLOR;
height:100px;
}
#MyId {
background-color: DIALOG_BG_COLOR;
border: 1px solid DIALOG_BORDER_COLOR;
height:100px;
}
闭包模板源(sample.soy)
{namespace ClosureSample}
/**
* SampleHtml
*/
{template .SampleHtml autoescape="false"}
<div class="{css MyClass}"></div>
{/template}
Javascript 源代码 ( sample.js )
goog.require('ClosureSample');
document.write(ClosureSample.SampleHtml());
$(function() {
$('.' + goog.getCssName('MyClass')).css('background-color', 'pink');
});
HTML 源代码 ( development.htm )
<!DOCTYPE html>
<html>
<head>
<title>Closure stylesheets with External Library</title>
<link rel="Stylesheet" media="all" href="sample.css" />
<script type="text/javascript" src="sample_renaming_map.js"></script>
<script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript">
goog.require('goog.soy');
goog.require('goog.string.StringBuffer');
</script>
<script type="text/javascript" src="soyutils_usegoog.js"></script>
<script type="text/javascript" src="sample-templates.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="sample.js"></script>
<div id="MyId"></div>
</body>
</html>
第 3 步 - 编译样式表和模板
使用从模板和样式表项目下载的工具,您需要编译 sample.gss
和 sample.soy
文件。以下是此示例使用的命令:
java -jar closure-stylesheets.jar \
--pretty-print \
--output-file sample.css \
--output-renaming-map-format CLOSURE_UNCOMPILED \
--rename CLOSURE \
--output-renaming-map sample_renaming_map.js \
sample.gss
java -jar SoyToJsSrcCompiler.jar \
--shouldProvideRequireSoyNamespaces \
--shouldGenerateJsdoc \
--outputPathFormat {INPUT_FILE_NAME_NO_EXT}.js \
--cssHandlingScheme goog \
sample.soy
使用这些文件,您可以在开发过程中测试重命名。 See the example .
第 4 步 - 编译生产项目
首先使用“CLOSURE_COMPILED”选项重新编译样式表以生成重命名映射:
java -jar closure-stylesheets.jar \
--output-file sample.css \
--output-renaming-map-format CLOSURE_COMPILED \
--rename CLOSURE \
--output-renaming-map sample_renaming_map.js \
sample.gss
然后您需要计算闭包库依赖文件并将所有源 JavaScript 文件编译为单个源。
注意:由于 jQuery 与 Closure-compiler 的 ADVANCED_OPTIMIZATIONS 不兼容,因此它不会作为输入包含在内。相反,请引用相应的 jQuery extern file发现于Closure-compiler contrib/externs文件夹。
Closure-library 项目中的 calcdeps.py 脚本还可用于在它确定的输入文件上调用 Closure-compiler。
python calcdeps.py \
-i sample.js \
-p PATH_TO_CLOSURE_LIBRARY_FOLDER \
-p sample-templates.js \
-o compiled \
-c compiler.jar \
-f --js=sample_renaming_map.js
-f --compilation_level=ADVANCED_OPTIMIZATIONS \
-f --warning_level=VERBOSE \
-f --externs=jquery-1.7-externs.js \
-f --js_output_file=sample_compiled.js
查看最终结果:compiled version .
最后的注释
如您所见,使用 Google Closure 样式表不仅需要整个 Closure-tools 套件的各个部分,而且相当复杂。
- 输出 HTML 需要使用 Google Closure 模板。在这个人为的示例中,我使用
document.write
调用来输出具有正确重命名的类的 HTML,但是对于生产代码,还有更优雅且可维护的技术。 - Closure-stylesheets 不会重命名 ID 选择器,因此 ID 的代码不受影响。
- 为了便于查看,编译的示例引用了 Google CDN 上的 jQuery 库。但是,将 jQuery 库和编译的源连接到单个源 JS 文件中同样有效。
关于javascript - 如何通过外部 Javascript 库(例如 jQuery)使用 Google Closure 样式表重命名?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12268270/