SEAJS es un marco de carga de módulos desarrollado por Yubo que sigue la especificación CommonJS, que puede usarse para cargar fácil y felizmente cualquier módulo JavaScript y estilos de módulos CSS. SeAJS es muy pequeño, porque el volumen después de la compresión y GZIP es solo 4K, y las interfaces y métodos también son muy pequeños. SeAJS tiene dos núcleos: definición del módulo y carga y dependencias del módulo. Seajs es muy poderoso. SeAJS puede cargar cualquier módulo JavaScript y estilo del módulo CSS. Los SEAJ se asegurarán de que cuando use un módulo, haya cargado otros módulos de los que depende en el entorno de ejecución de script. Yu Bo dijo que SEAJS puede permitirle disfrutar de la diversión de escribir código sin preocuparse por los problemas de carga. ¿Estás cansado de tantas referencias JS y CSS? Conté las 39 referencias CSS y JS en la página de inicio del sitio web de nuestra empresa. Se puede imaginar el impacto que tiene:
1. No es propicio para el mantenimiento, el front-end y el back-end son los mismos
2. Hay demasiadas solicitudes HTTP. Por supuesto, esto se puede resolver a través de la fusión, pero si no hay backend directamente fusionarse, el costo laboral es muy alto. Incluso si el backend lo fusiona y lo mantiene, una cadena tan larga definitivamente lo verá.
El uso de SEAJ puede resolver estos problemas muy bien.
Definición de módulo
Definir un módulo es más simple. Por ejemplo, definir un módulo Sayhello y crear un documento Sayhello.js:
La copia del código es la siguiente:
Definir (función (requerir, exportar, módulo) {
exports.sayhello = function (eleid, text) {
document.getElementById (eleid) .innerhtml = text;
};
});
Primero veamos el parámetro de exportaciones. El parámetro de exportaciones se utiliza para proporcionar la API del módulo. Es decir, otros módulos de estas exportaciones pueden acceder al método Sayhello.
Uso de carga del módulo
Por ejemplo, hay un elemento en nuestra página con ID "Out" y queremos emitir "¡Hola Seajs!",
Entonces podemos introducir Sea.js primero
Luego use el módulo Sayhello:
La copia del código es la siguiente:
Seajs.use ("sayhello/sayhello", function (say) {
digamos.sayhello ("fuera", "¡Hola Seajs!");
});
Aquí el uso es el método de usar módulos:
El primer parámetro es la representación del módulo, que está representada por la ruta relativa en relación con Sea.js. Se puede omitir el sufijo ".js" después de Sayshello.js. Por supuesto, hay muchos métodos para identificar este módulo. Para más detalles, consulte la descripción oficial: http://seajs.com/docs/zh-cn/module-identifier.html
El primer parámetro es una función de devolución de llamada. say.sayhello () llama a las exportaciones. Método Sayhello del módulo Sayhello. Por supuesto, hay un parámetro en esta función de devolución de llamada.
Dependencias del módulo
Las dependencias del módulo realmente deberían existir cuando se definen los módulos. Por ejemplo, reescribe el módulo Sayhello anterior. Supongamos que ya tenemos un módulo DOM general, como algunos métodos, como obtener elementos, establecer estilos, etc., como tal módulo DOM, escribir DOM.js de la siguiente manera
La copia del código es la siguiente:
Definir (función (requerir, exportar, módulo) {
var dom = {
/**
* Obtener el objeto DOM a través del atributo de identificación del elemento, los parámetros son cadenas o múltiples cadenas
* @id getbyid
* @method getbyid
* @param {string} id El atributo de identificación
* @return {htmlelement | Objeto} el htmlelement con la identificación, o nulo si no se encuentra ninguno.
*/
getByID: function () {
var els = [];
para (var i = 0; i <arguments.length; i ++) {
var el = argumentos [i];
if (typeof el == "string") {
el = document.getElementById (El);
}
if (arguments.length == 1) {
regresar el;
}
Els.push (El);
}
devolver los els;
},
/**
* Obtener el objeto, puede pasar en un objeto o una cadena. Si la cadena se pasa, el objeto se obtiene en forma de documento.getElementById ()
* @id consigue
* @param {string} El elemento HTML
* @return {objeto} objeto htmlelement.
*/
get: function (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
regresar el;
}
devolver esto.getByid (El);
}
};
regresar DOM;
});
Entonces el módulo Sayhello se puede escribir así. Para no afectar la página de demostración original, establecí un nuevo módulo Sayhelloa. Podemos escribir sayhelloa.js así:
La copia del código es la siguiente:
Definir (función (requerir, exportar, módulo) {
var dom = require ("dom/dom");
requiere ("sayhelloa/sayhello.css");
exports.sayhello = function (eleid, text) {
Dom.get (eleid) .innerhtml = text;
};
});
La función Requerir se utiliza para establecer las dependencias del módulo. Por ejemplo, el módulo Sayhelloa anterior depende del módulo DOM porque se utiliza el método GET del módulo DOM.
Tenga en cuenta que var dom = require ("dom/dom") aquí, esta oración asigna el módulo DOM aplicado al DOM; Requerir ("sayhelloa/sayhello.css") aplica directamente el módulo o archivo CSS Sayhello.css. Esto se referirá al archivo CSS en la página.
He estado haciendo problemas con los Seajs en los últimos días. Cuanto más me cuesta, más me gusta. ¡Gracias Yu Bo! ¡Gracias Seajs! Por supuesto, puede pensar que no hay necesidad de hacer esto con un ejemplo tan simple. De hecho, si los proyectos pequeños con menos archivos JS se sienten bien con las ventajas modulares, pero las ventajas más modulares se reflejan en el número de archivos JS o proyectos medios o superiores.