2

我正在研究 Google 的样式表重命名功能，但我不确定如何重写我的 jquery 选择器。我没有发现文档很清楚。

如果我有一些看起来像这样的代码：

<div class="MyClass"></div>
<div id="MyID"></div>

$('.MyClass').someFunc();
$('#MyID').someFunc();

必须如何编写 HTML 和 javascript 才能使 CSS 重命名起作用？

感谢您的建议。

4

1 回答 1

20

要让 Closure-stylesheets 与 jQuery 等外部库结合使用，您还需要使用 Closure-library 来添加对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

使用这些文件，您可以在开发期间测试重命名。请参阅示例。

第 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

然后，您需要计算 Closure-library 依赖文件并将所有源 javascript 文件编译到一个源中。

注意：由于 jQuery 与 Closure-compiler 的 ADVANCED_OPTIMIZATIONS 不兼容，因此它不会作为输入包含在内。相反，请参考在Closure-compiler contrib/externs文件夹中找到的适当的jQuery extern 文件。

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

查看最终结果：编译后的版本。

最后的笔记

如您所见，使用 Google Closure Stylesheets 不仅需要整个 Closure-tools 套件的各个部分，而且还非常复杂。

  • 输出 HTML 需要使用 Google Closure-templates。在这个人为的示例中，我使用了一个document.write调用来输出带有正确重命名的类的 HTML，但是对于生产代码有更优雅和可维护的技术。
  • Closure-stylesheets 不会重命名 ID 选择器，因此 ID 的代码不受影响。
  • 为了便于查看，编译后的示例引用了 Google CDN 的 jQuery 库。但是，将 jQuery 库和已编译的源代码连接到单个源 JS 文件中同样有效。
于 2012-09-07T15:32:59.813 回答