Javascript.RU

Сборка модулей

Google Closure Compiler умеет собирать javascript не в виде одного большого файла, а в виде нескольких модулей.

Так что все страницы могут грузить только один модуль, а дополнительная функциональность - загружаться лишь там, где она нужна.

Для такой сборки используется флаг компилятора --module.

Например:

java -jar compiler.jar --js src1.js --js src2.js  --js src3.js --module
first:2 --module second:1:first

Создаст модули: first.js и second.js.

Первый модуль, который назван "first", создан из объединенного и оптимизированного кода двух файлов: src1.js и src2.js (первые два параметра --js).

Второй модуль, который назван "second", создан из src3.js - это следующий аргумент --js после включенных в первый модуль. Второй модуль зависит от первого.

Флаг --module second:1:first как раз и означает, что модуль second будет создан из одного файла после вошедших в предыдущий модуль (first) и зависит от модуля first.

Пусть у нас есть следующие файлы.

  • main.js - основная библиотека
    my = {}
    my.main = function() {
    	alert('main')
    }
    
  • hello.js - первый модуль
    my.hello = function() {
    	my.main()
    	alert('hello')
    }
    
  • bye.js - второй модуль
    my.bye = function() {
    	my.main()
    	alert('bye')
    }
    

hello и bye зависят от main.

Следующая команда соберет три модуля: first.js - основой модуль из main.js, second и third - из hello.js и bye.js соответственно.

java -jar compiler.jar --js main.js --js hello.js --js bye.js --module first:1 --module second:1:first --module third:1:first --compilation_level ADVANCED_OPTIMIZATIONS

Результат:

  • first.js
    my={};my.a=function(){alert("main")};
    
  • second.js
    my.c=function(){my.a();alert("hello")};
    
  • third.js
    my.b=function(){my.a();alert("bye")};
    

Этот пример демонстрирует самую важную фичу модулей, ради которой они и задумывались - сохранение связности переменованных переменных.

В частности - обратим внимание, функция my.main (main.js) была переименована в my.a, и именно в таком виде она вызывается в модулях second.js и third.js.

Разумеется, вы можете использовать много файлов для каждого из модулей.

Перечислять файлы --js нужно в том же порядке, в котором они зависят друг от друга.

Директива --module обрабатывается, буквально, так:

--module first:1
Создать модуль first из первого файла в списке.
--module second:1:first
Взять следующий 1 файл из списка и создать из него модуль second, зависящий от first.
--module third:1:first
Взять еще 1 файл из списка и создать из него модуль third, зависящий от first.

При этом зависимость одного модуля от другого означает, что все символы будут переименованы синхронно. Это особенно важно при продвинутой оптимизации.

Есть одно ограничение - разные модули не могут содержать одни и те же файлы. То есть, не получится сделать два модуля, первый из которых включает в себя A.js и B.js, а второй - снова (нельзя) A.js и C.js.

Если вы используете goog.provide/require - компилятор при сборке обработает их и проверит все зависимости.

Как правило, такая сборка осуществляется утилитой calcdeps и описана в статье Система сборки и зависимостей Google Closure Library.

Флаг --module - основной, но есть еще несколько дополнительных.

--module_output_path_prefix
Префикс для имен файлов для откомпилированных модулей, может включать в себя директорию. По умолчанию: ./
--module_wrapper
Необязательный текст до или после модуля. Строка, в которой вместо текста модуля будет %s. Например:
--module_wrapper "/* copyright 2009-2010 */ %s"

Сборка модулей очень полезна, если некоторые из ваших страниц используют большое количество специфического javascript.

Например, у меня это страницы со сложными интерфейсами, такими что грузить их везде - совсем-совсем некошер. Думаю, что-то такое есть и у вас. Google Closure Compiler позволяет решить эту проблему.

Быстрых всем страничек


Автор: юный JS-ер (не зарегистрирован), дата: 19 октября, 2012 - 17:28
#permalink

вот бы ссылку на живой пример реализации
так ведь я и сам могу поразбивать на модули и файлы и загружать их когда нужно - я так понял описывается пример автоматизированного ср-ва в большом проекте


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
13 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum