如何使用外部Javascript库(如jQuery）重命名Google闭包样式表

How do I use Google Closure Stylesheet renaming with an external Javascript Library such as jQuery?

本文关键字：重命名 Google 闭包 样式 jQuery 何使用 外部 Javascript      更新时间：2023-09-26

我正在研究Google的样式表重命名功能，不知道如何重写我的jquery选择器。我觉得文档对此不太清楚。

如果我有这样的代码：

<div class="MyClass"></div>
<div id="MyID"></div>
$('.MyClass').someFunc();
$('#MyID').someFunc();

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

谢谢你的建议。

要使闭包样式表与jQuery等外部库结合使用，还需要使用闭包库来添加对goog.getCssName的支持。然而，由于编写闭包库是为了最大限度地利用闭包编译器的死代码消除，因此最终输出中只会包含非常少量的库代码（本例中约为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_COMPLED"选项重新编译样式表以生成重命名映射：

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编译器的ADVANCED_OPTIMIZATIONS不兼容，因此不会将其作为输入包含在内。相反，请引用Closure编译器contrib/extern文件夹中的相应jQuery extern文件

闭包库项目中的calcdeps.py脚本也可用于对其确定的输入文件调用闭包编译器。

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

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

最终注释

正如您所看到的，使用GoogleClosureStylesheets不仅需要整个Closure工具套件的一部分，而且需要相当多的内容。

  • 输出HTML需要使用Google闭包模板。在这个精心设计的示例中，我使用了document.write调用来输出具有正确重命名的类的HTML，但是对于生产代码，还有更优雅和可维护的技术
  • 闭包样式表不会重命名ID选择器，因此ID的代码不受影响
  • 为了便于查看，编译后的示例引用了Google CDN之外的jQuery库。然而，将jQuery库和编译后的源代码连接到一个源JS文件中同样有效
相关文章：