Descargar e instalar
Para usar SEAJS en su proyecto, toda la preparación que necesita hacer es descargar SEA.js y ponerlo en algún lugar de su proyecto.
El proyecto SEAJS está actualmente alojado en GitHub, con la página de inicio en https://github.com/seajs/seajs/. Puede descargar SEA.JS (comprimido) o Sea-debug.js (sin comprimir) en el directorio de construcción de su biblioteca GIT.
Después de completar la descarga, colóquela en la posición correspondiente del proyecto y luego preséntala a través de la etiqueta <script> en la página, y puede usar SEAJS.
Principios de desarrollo básicos de SEAJS
Antes de discutir el uso específico de SEAJS, primero presentemos el concepto modular y los principios de desarrollo de los SEAJ.
El principio básico del uso de SEAJS para desarrollar JavaScript es: todo es un módulo. Después de que se introdujo SEAJS, escribir el código JavaScript se convirtió en escribir un módulo tras otro. Public.
Además, cada módulo debe definirse en un archivo JS separado, es decir, uno correspondiente a un módulo.
Lo siguiente describe la escritura y la llamada de los módulos.
Definición y escritura de módulos
Función de definición del módulo Defina
En SEAJS, use la función "Definir" para definir un módulo. Debido a que la documentación de SEAJS no tiene una referencia completa para la definición, leí el código fuente de SEAJS y descubrí que definir puede recibir tres parámetros:
Copie el código de la siguiente manera:/**
* Define un módulo.
* @param {String =} Id La ID del módulo.
* @param {Array. | String =} Deps Las dependencias del módulo.
* @param {function () | Object} Factory La función de fábrica del módulo.
*/
fn.define = function (id, deps, fábrica) {
// Código de función ...
}
Lo anterior está extraído del código fuente de SEAJS. Después de leer el código fuente, descubrí que las reglas de análisis para el número de parámetros diferentes de definir son los siguientes:
Si solo hay un parámetro, asigne el valor a la fábrica.
Si hay dos parámetros, el segundo se asigna a la fábrica;
Si hay tres parámetros, se asignan a ID, DEPS y Factory, respectivamente.
Sin embargo, casi todos los lugares donde se definen, incluido el ejemplo oficial de Seajs, solo se pasa una función de fábrica, similar al siguiente código:
La copia del código es la siguiente:
Definir (función (requerir, exportar, módulo) {
// Código del módulo ...
});
Personalmente le recomiendo que siga los estándares de los ejemplos oficiales de SEAJS y defina el módulo con una definición de parámetros. Entonces, ¿qué se hará con ID y Deps?
ID es la cadena de identificación de un módulo. Si usa Definir para definir el módulo en el archivo A.JS en Ejemplo.com, la ID de este módulo se asignará a http://example.com/a.js. la identificación. Los Deps generalmente no es necesario pasar, y los módulos necesarios se pueden cargar requeridos.
Análisis de fábrica de funciones de fábrica
Las funciones de fábrica son el cuerpo principal y el enfoque del módulo. Cuando solo se pasa un parámetro para definir (escritura recomendada), este parámetro es la función de fábrica.
1. Función de carga del módulo de requisito, utilizada para registrar módulos dependientes.
2. El punto de interfaz de EXPORTS, al definir datos o método, los expone a llamadas externas.
3. Módulo: los metadatos del módulo.
Estos tres parámetros se pueden seleccionar según sea necesario para mostrar la especificación.
Hablemos del módulo a continuación. Un módulo es un objeto que almacena la meta información del módulo, como sigue:
1.Module.id - El ID del módulo.
2. Module. Dependencias: una matriz que almacena la lista de identificación de todos los módulos de los que depende este módulo.
3.module.Exports-puntos al mismo objeto que las exportaciones.
Tres modos para escribir módulos
El primer modo para definir módulos es el modo basado en exportaciones:
La copia del código es la siguiente:
Definir (función (requerir, exportar, módulo) {
var a = require ('a');
var b = requirir ('b');
VAR data1 = 1;
var func1 = function () {// Método privado
return A.RUN (data1);
}
exports.data2 = 2;
exports.func2 = function () {// método público
regresar 'hola';
}
});
Lo anterior es un modelo de definición del módulo relativamente "auténtico". Además de agregar datos y métodos públicos a las exportaciones, también puede devolver directamente un objeto para representar el módulo, como el siguiente código tiene la misma función que el código anterior:
Copie el código de la siguiente manera: Define (función (requerir) {
var a = require ('a');
var b = requirir ('b');
VAR data1 = 1;
var func1 = function () {// Método privado
return A.RUN (data1);
}
devolver {
Data2: 2,
func2: functer () {
regresar 'hola';
}
};
});
Si la definición del módulo no tiene otro código y solo devuelve un objeto, se puede encontrar el siguiente método de escritura simplificado:
Copie el código de la siguiente manera: Define ({
Datos: 1,
func: functer () {
regresar 'hola';
}
});
El tercer método es muy adecuado para módulos que definen datos JSON puros.
Carga y referencia de módulos
Algoritmo de direccionamiento de módulo
Como se mencionó anteriormente, un módulo corresponde a un archivo JS. donde se encuentra el módulo real. SeAJS apoya los siguientes identificadores:
Dirección absoluta: da la ruta absoluta al archivo JS.
como:
La copia del código es la siguiente: requerir ("http: // ejemplo/js/a");
Significa cargar http: //example/js/a.js.
Dirección relativa: use llamadas relativas para encontrar el módulo para encontrar la dirección relativa del archivo JS donde se encuentra la función de carga.
Por ejemplo, cargalo en http: //example/js/b.js
La copia del código es la siguiente: requerir ("./ c");
Luego cargue http: //example/js/c.js.
Dirección base: si el identificador de la cadena de carga no es una ruta absoluta ni comienza con "./", se aborda en relación con la "base" en la configuración global de SEAJS.
Tenga en cuenta que al cargar módulos anteriores, no necesita pasar el nombre del sufijo ".js" y SEAJS agregará automáticamente ".js". Pero no se agregarán los siguientes tres casos:
Al cargar CSS, como:
La copia del código es la siguiente: requerir ("./ Module1-style.css");
Cuando el camino contiene "?", Como:
La copia del código es la siguiente: requerir (<a href = "http: //example/js/a.json? Cb = func"> http: //example/js/a.json? Cb = func </a> );
Cuando el camino termina con "#", como:
La copia del código es la siguiente: requerir ("http: //example/js/a.json#");
Según diferentes escenarios de aplicación, SEAJS proporciona tres API para los módulos de carga, a saber, SEAJS.use, requiere y requiere. Async, que se introducen a continuación.
Seajs.use
SeAJS.use se usa principalmente para cargar el módulo de entrada. El módulo de entrada es equivalente a la función principal del programa C, y también es la raíz de todo el árbol de dependencia del módulo. En el ejemplo de TinyApp anterior, Init es el módulo de entrada. El uso de SeAJS.use es el siguiente:
La copia del código es la siguiente:
// Modo único
Seajs.use ('./ A');
// Modo de devolución de llamada
Seajs.use ('./ a', function (a) {
a.run ();
});
// modo multimódulo
Seajs.use (['./ a', './b'], function (a, b) {
a.run ();
b.run ();
});
En general, SEAJS.use solo se usa para cargar el módulo de entrada en la página. Si solo hay un módulo de entrada, también puede omitir SEAJS.use agregando el atributo "Data-Main" a la etiqueta de script que presenta SEA.js. Siguiente método de escritura:
La copia del código es la siguiente:
<! Doctype html>
<html lang = "zh-cn">
<Evista>
<meta charset = "utf-8">
<title> tinyapp </title>
</ablo>
<Body>
<p> </p>
<script src = "./ sea.js" data-menta = "./ init"> </script>
</body>
</html>
Esta forma de escribir hará que HTML sea más conciso.
requerir
Requerir es el método de carga del módulo principal de SEAJS.
La copia del código es la siguiente: var m = require ('/path/to/módulo/file');
Aquí hay una breve introducción al mecanismo de carga automática de SEAJS. Como se mencionó anteriormente, después de usar SEAJS, solo incluya SEA.JS. Entonces, ¿cómo se cargan otros archivos JS? SEAJS primero descargará el módulo de entrada, luego usará expresiones regulares para que coincidan con todos los requisitos en el código a lo largo del módulo de entrada, y luego descargará el archivo JS correspondiente de acuerdo con la identificación de la ruta del archivo en el requerimiento, y luego itera el archivo JS descargado. Todo el proceso es similar al funcionamiento transversal de un gráfico (porque puede haber una dependencia del ciclo cruzado, toda la estructura de datos de dependencia es un gráfico en lugar de un árbol).
Una vez que comprenda el punto anterior, las siguientes reglas serán fáciles de entender:
El identificador de ruta pasado para requerir debe ser una cadena literal, no una expresión.
La copia del código es la siguiente: requerir ('módulo' + '1');
requirir ('módulo'.tOlowerCase ());
Esto hará que SEAJS no pueda realizar las coincidencias regulares correctas para descargar el archivo JS correspondiente.
requiere.Async
Como se mencionó anteriormente, SEAJS registrará todos los archivos JS requeridos a la vez a través del análisis estático cuando se abre la página HTML.
Copie el código de la siguiente manera: require.async ('/path/to/module/file', function (m) {
// Código de devolución de llamada ...
});
De esta manera, solo cuando se usa este módulo, se descargará el archivo JS correspondiente, que se da cuenta de la carga a pedido del código JavaScript.
Configuración global de SEAJS
SEAJS proporciona un método SEAJS.Config que puede configurar una configuración global y recibir un objeto de configuración que representa la configuración global. El método de uso específico es el siguiente:
Copie el código de la siguiente manera: Seajs.config ({
Base: 'ruta/a/jslib/',
alias: {
'App': 'ruta/a/app/'
},
Charset: 'UTF-8',
Tiempo de espera: 20000,
Debug: Falso
});
Donde la base representa la ruta de la dirección base durante el direccionamiento base. Por ejemplo, la base está configurada en http://example.com/js/3-party/, entonces:
La copia del código es la siguiente: var $ = require ('jQuery');
http://example.com/js/3-party/jquery.js se cargará.
El alias puede establecer la abreviatura para rutas comunes más largas.
Charset representa el atributo Charset de la etiqueta de script al descargar JS.
El tiempo de espera indica el tiempo máximo para descargar el archivo, en milisegundos.
La depuración indica si funciona en modo de depuración.
Cómo trabaja SEAJS con las bibliotecas JS existentes
Para usar una biblioteca JS existente como JQuery con SEAJS, simplemente encapsule la biblioteca existente de acuerdo con las reglas de definición del módulo de SeAJS. Por ejemplo, el siguiente es el método de encapsulación para jQuery:
Copie el código de la siguiente manera: Define (function () {
// {{{{{JQuery Code original comienza
/*!
* Biblioteca JQuery JavaScript V1.6.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* Dual con licencia con licencias MIT o GPL versión 2.
* http://jquery.org/license
*
* Incluye Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Lanzado bajo las licencias MIT, BSD y GPL.
*
* Fecha: Jue 12 de mayo 15:04:36 2011 -0400
*/
// ...
//}}} El código original de JQuery termina
devolver $ .noconflict ();
});
Embalaje e implementación del proyecto SEAJS
Seajs originalmente integró una herramienta de implementación empaquetada SM. La idea central de SPM es fusionar y comprimir el código de todos los módulos y luego fusionarlo en el módulo de entrada. . Sin embargo, dado que SPM no ha sido lanzado para la versión oficial, este artículo no tiene la intención de presentarlo en detalle.
De hecho, dado que las herramientas JS de fusión y compresión utilizadas para cada proyecto son diferentes, SPM puede no ser completamente adecuado para cada proyecto. Después de comprender los principios de SEAJS, puede escribir un guión de combinación y empaque que coincida con las características de su proyecto.