Googleのスタイルシートの名前変更機能を調べていますが、jqueryセレクターを書き直す方法がわかりません。私はそれについてのドキュメントがあまり明確であるとは思いませんでした。
次のようなコードがある場合：
<div class="MyClass"></div>
<div id="MyID"></div>
$('.MyClass').someFunc();
$('#MyID').someFunc();
CSSの名前変更が機能するようにするには、HTMLとJavaScriptをどのように作成する必要がありますか？
あなたの提案をありがとう。
ClosureスタイルシートをjQueryなどの外部ライブラリと組み合わせて機能させるには、Closure-libraryも使用してのサポートを追加する必要がありますgoog.getCssName。ただし、Closure-Libraryは、Closure-compilerのデッドコード除去を最大限に活用するように記述されているため、最終出力に含まれるライブラリコードはごくわずかです（この例では約1KB）。
次のツールが必要になります。
@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;
}
{namespace ClosureSample}
/**
* SampleHtml
*/
{template .SampleHtml autoescape="false"}
<div class="{css MyClass}"></div>
{/template}
goog.require('ClosureSample');
document.write(ClosureSample.SampleHtml());
$(function() {
$('.' + goog.getCssName('MyClass')).css('background-color', 'pink');
});
<!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>
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
これらのファイルを使用すると、開発中に名前の変更をテストできます。例を参照してください。
まず、スタイルシートを再コンパイルして、「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フォルダーにある適切なjQueryexternファイルを参照してください。
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スイート全体の一部が必要であるだけでなく、かなり複雑です。
document.write呼び出しを使用して、適切に名前が変更されたクラスでHTMLを出力しましたが、本番コードにはより洗練された保守可能な手法があります。