Un recorrido por los componentes de JavaScript: creación de componentes con Ant

¿Dónde hemos estado? ¿Estás cansado de pensar demasiado en los dos primeros números? No se preocupe, el tema de este número es muy sencillo. Solo necesita comprender brevemente alguna sintaxis y escribir unas pocas líneas de configuración, y podrá hacer que el sistema complete automáticamente algunos trabajos de acuerdo con su método preestablecido. ¿No suena agradable? ¡Vamos! ¡Partamos ~

En esta edición, usaremos Ant para fusionar los archivos de código escritos y organizados en la edición anterior en un único archivo fuente en el orden especificado y luego comprimiremos este archivo. Estos son los pasos básicos para construir un proyecto de JavaScript. Ant es uno de los principales proyectos de código abierto de Apache. Hay muchos artículos sobre su introducción e instalación en Internet, por lo que no entraré en detalles aquí. Antes de compilar, echemos un vistazo al diseño del archivo existente:

cola inteligente // El directorio raíz del componente
+--- src // directorio del archivo fuente JavaScript
+--- lang.js // El "archivo externo" mencionado anteriormente
+--- smart-queue.js // archivo principal de Smart Queue

Ahora queremos hacerlo "completo":

• Agregue en el directorio raíz del componente:
  • README: Presentación del componente Smart Queue
  • LICENCIA: Información de licencia del componente.
  • build.xml: archivo de configuración utilizado por Ant
• Agregue el subdirectorio lib en el directorio raíz del componente: almacene programas externos y archivos de biblioteca que deben usarse durante el proceso de compilación.
  • Agregue yuicompressor.jar en el subdirectorio lib: usamos YUI Compressor para comprimir JavaScript
• Agregue el subdirectorio de prueba en el directorio raíz del componente: almacene los archivos necesarios para probar el componente (descrito en el próximo número)
• Agregue intro.js al directorio src: introduzca la información de versión y descripción del componente

Aunque el gorrión es pequeño, tiene todos los órganos internos. Ahora Smart Queue parece un proyecto JavaScript más profesional:

cola inteligente // El directorio raíz del componente
+--- lib // Programa externo JavaScript y directorio de archivos de biblioteca
+--- yuicompressor.jar // Compresor YUI
+--- prueba //Directorio del archivo de prueba
+--- src // directorio del archivo fuente JavaScript
+--- intro.js // Introducción e información de versión
+--- lang.js // El "archivo externo" mencionado anteriormente
+--- smart-queue.js // archivo principal de Smart Queue
+--- README // archivo Léame del componente
+--- LICENCIA // Información de autorización del componente

Planeamos almacenar los archivos compilados en el subdirectorio de compilación bajo el directorio raíz del componente, y también crearlos y destruirlos a través de la herramienta de compilación. Antes de intentar compilar por primera vez, se recomienda tener una comprensión general de la estructura del archivo de configuración de Ant: build.xml:

<nombre del proyecto="MiProyecto" predeterminado="dist" basedir=".">
<descripción>
archivo de compilación de ejemplo simple
</descripción>
<!-- establecer propiedades globales para esta compilación -->
<nombre de propiedad="src" ubicación="src"/>
<nombre de propiedad="construcción" ubicación="construcción"/>
<nombre de propiedad="dist" ubicación="dist"/>

<nombre de destino="init">
<!-- Crear la marca de tiempo -->
<tstamp/>
<!-- Cree la estructura del directorio de compilación utilizada por la compilación -->
<mkdir dir="${construcción}"/>
</objetivo>

<nombre de destino="compilar" depende="init"
descripción="compilar la fuente" >
<!-- Compile el código java de ${src} en ${build} -->
<javac srcdir="${src}" destdir="${build}"/>
</objetivo>

<nombre de destino="limpio"
descripción="limpiar" >
<!-- Eliminar los árboles de directorios ${build} y ${dist} -->
<eliminar dir="${build}"/>
<eliminar dir="${dist}"/>
</objetivo>
</proyecto>

Observe atentamente. Además del nombre y la descripción, que son fáciles de entender, otros patrones que se pueden ver incluyen:

• El valor del atributo predeterminado del elemento del proyecto corresponde al atributo de nombre de un determinado elemento de destino;
• El valor del atributo dependiente del elemento de destino corresponde al atributo de nombre de algunos otros elementos de destino;
• ${somename} puede hacer referencia al valor definido en la propiedad.

Fuente: Alipay UED