Как использовать переименование таблицы стилей Google Closure с внешней библиотекой Javascript, такой как jQuery?

Я изучаю функцию переименования таблиц стилей Google и не знаю, как переписать мои селекторы jquery. Я не нашел документ очень ясно об этом.

Если у меня есть код, который выглядит так:

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

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

Как должны быть написаны HTML и javascript, чтобы переименование CSS работало?

Спасибо за ваши предложения.

Источник

1 ответ

Решение

Чтобы таблицы стилей Closure работали в сочетании с внешней библиотекой, такой как jQuery, вам также потребуется использовать библиотеку Closure, чтобы добавить поддержку для goog.getCssName, Однако, поскольку Closure-Library написана так, чтобы максимально использовать исключение мертвого кода из Closure-compiler, только очень небольшой объем кода библиотеки будет включен в окончательный вывод (около 1 КБ в этом примере).

Шаг 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 Source ( 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 и скомпилировать все исходные файлы javascript в один источник.

Примечание: поскольку jQuery не совместим с ADVANCED_OPTIMIZATIONS из Closure-compiler, он не будет включен в качестве входных данных. Вместо этого, обратитесь к соответствующему файлу jQuery extern, найденному в папке contrib / externs компилятора Closure.

Сценарий calcdeps.py в проекте библиотеки Closure может также использоваться для вызова компилятора Closure для входных файлов, которые он определяет.

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 требует не только части всего набора инструментов Closure, но и довольно сложного.

  • Для вывода HTML требуется использование Google Closure-шаблонов. В этом надуманном примере я использовал document.write вызовите для вывода HTML с правильно переименованным классом, однако есть более изящные и поддерживаемые методы для производственного кода.
  • Таблицы стилей закрытия не переименовывают селекторы идентификаторов, поэтому код для идентификатора не затрагивается.
  • Для удобства просмотра скомпилированный пример ссылается на библиотеку jQuery из Google CDN. Однако было бы одинаково правильно объединить библиотеку jQuery и скомпилированный исходный код в один исходный файл JS.
Источник
Другие вопросы по тегам