Обзор компонентов JavaScript: создание компонентов с помощью Ant

Где мы были? Вы устали слишком много думать в первых двух выпусках? Не волнуйтесь, тема в этом выпуске очень проста. Вам нужно только кратко понять синтаксис и написать несколько строк конфигурации, и вы сможете заставить систему автоматически выполнять некоторую работу в соответствии с заданным вами методом. Разве это не звучит приятно? Поехали!

В этом выпуске мы будем использовать Ant для объединения файлов кода, написанных и организованных в предыдущем выпуске, в один исходный файл в указанном порядке, а затем сжимаем этот файл. Это основные шаги для создания проекта JavaScript. Ant — топовый проект Apache с открытым исходным кодом. В Интернете есть множество статей по его внедрению и установке, поэтому я не буду здесь вдаваться в подробности. Прежде чем создавать, давайте посмотрим на существующую структуру файла:

smart-queue // Корневой каталог компонента
+--- src // Каталог исходных файлов JavaScript
+--- lang.js // «Внешний файл», упомянутый выше
+--- smart-queue.js // Основной файл Smart Queue

Теперь мы хотим сделать его «полным»:

• Добавьте в корневой каталог компонента:
  • README: Знакомство с компонентом Smart Queue
  • ЛИЦЕНЗИЯ: информация о лицензии компонента.
  • build.xml: файл конфигурации, используемый Ant.
• Добавьте подкаталог lib в корневой каталог компонента: храните внешние программы и файлы библиотек, которые необходимо использовать в процессе сборки.
  • Добавьте yuicompressor.jar в подкаталог lib: мы используем YUI Compressor для сжатия JavaScript.
• Добавьте тестовый подкаталог в корневой каталог компонента: сохраните файлы, необходимые для тестирования компонента (описано в следующем выпуске).
• Добавьте intro.js в каталог src: укажите версию и описание компонента.

Хоть воробей и небольшой, но у него есть все внутренние органы. Теперь Smart Queue выглядит как более профессиональный проект JavaScript:

smart-queue // Корневой каталог компонента
+--- lib // Каталог файлов внешней программы и библиотеки JavaScript
+--- yuicompressor.jar // Компрессор YUI
+--- test //Каталог тестовых файлов
+--- src // Каталог исходных файлов JavaScript
+--- intro.js // Введение и информация о версии
+--- lang.js // «Внешний файл», упомянутый выше
+--- smart-queue.js // Основной файл Smart Queue
+--- README // файл readme компонента
+--- ЛИЦЕНЗИЯ // Информация об авторизации компонента

Мы планируем хранить собранные файлы в подкаталоге сборки в корневом каталоге компонента, а также создавать и уничтожать их с помощью инструмента сборки. Перед первой попыткой сборки рекомендуется иметь общее представление о структуре файла конфигурации Ant — build.xml:

<project name="MyProject" default="dist"basedir=".">
<описание>
простой пример файла сборки
</описание>
<!-- установить глобальные свойства для этой сборки -->
<property name="src" location="src"/>
<property name="build" location="build"/>
<property name="dist" location="dist"/>

<имя цели="инит">
<!-- Создайте отметку времени -->
<tstamp/>
<!-- Создайте структуру каталогов сборки, используемую при компиляции -->
<mkdir dir="${build}"/>
</цель>

<target name="compile" зависит="init"
описание="компилировать исходный код" >
<!-- Скомпилируйте Java-код из ${src} в ${build} -->
<javac srcdir="${src}" destdir="${build}"/>
</цель>

<имя цели="очистить"
описание="очистить" >
<!-- Удалите деревья каталогов ${build} и ${dist} -->
<delete dir="${build}"/>
<delete dir="${dist}"/>
</цель>
</проект>

Внимательно наблюдайте, помимо названия и описания, которые легко понять, можно увидеть и другие закономерности:

• Значение атрибута по умолчанию элемента проекта соответствует атрибуту имени определенного целевого элемента;
• Значение атрибута «зависит» целевого элемента соответствует атрибуту имени некоторых других целевых элементов;
• ${somename} может ссылаться на значение, определенное в свойстве.

Источник: Alipay UED.