Prefacio
SeAJS es un marco de carga del módulo JavaScript que sigue la especificación CommonJS, que puede implementar el mecanismo de desarrollo y carga modular de JavaScript. A diferencia de los marcos de JavaScript como JQuery, SeAJS no extiende las características del lenguaje de encapsulación, sino que solo implementa la modularización y la carga por módulo. El objetivo principal de SEAJS es hacer que el desarrollo de JavaScript sea modular y se cargue fácilmente y felizmente, los ingenieros front-end gratuitos del archivo pesado de la dependencia del archivo JavaScript y los objetos, y pueden centrarse en la lógica del código en sí. Los SEAJ se pueden integrar perfectamente con marcos como JQuery. El uso de SEAJ puede mejorar la legibilidad y la claridad del código JavaScript, resolver los problemas de confusión de dependencia y enredos del código que son comunes en la programación de JavaScript y facilitan la escritura y el mantenimiento del código.
El autor de SEAJS es Yu Bo, un ingeniero front-end de Taobao.
Seajs en sí sigue el concepto de beso (manténgalo simple, estúpido) para el desarrollo. En el proceso de aprendizaje de los Seajs, puedes sentir la esencia del principio de beso en todas partes: haz solo una cosa y hacer una cosa bien.
Este artículo primero utiliza un ejemplo para comparar intuitivamente la programación de JavaScript tradicional y la programación modular de JavaScript utilizando SEAJS, y luego analiza el uso de SEAJS en detalle, y finalmente ofrece cierta información relacionada con los SEAJ.
Modo tradicional vs Modularidad de SEAJS
Supongamos que ahora estamos desarrollando una aplicación web TinyApp, y decidimos usar el marco jQuery en TinyApp. La página de inicio de TinyApp utilizará el módulo1.js, que depende del módulo2.js y el módulo3.js, y el módulo3.js.
Desarrollo tradicional
Utilizando métodos de desarrollo tradicionales, el código de cada archivo JS es el siguiente:
Copie el código de la siguiente manera: //module1.js
VAR MODULE1 = {
run: functer () {
return $ .merge (['módulo1'], $ .merge (módulo2.run (), módulo3.run ()));
}
}
//module2.js
var módulo2 = {
run: functer () {
return ['module2'];
}
}
//module3.js
var módulo3 = {
run: functer () {
return $ .merge (['módulo3'], módulo4.run ());
}
}
//module4.js
var módulo4 = {
run: functer () {
return ['module4'];
}
}
En este momento, index.html necesita referencia al módulo1.js y todas sus dependencias subyacentes (tenga en cuenta el orden):
Copie el código de la siguiente manera: <! DocType Html>
<html lang = "zh-cn">
<Evista>
<meta charset = "utf-8">
<title> tinyapp </title>
<script src = "./ jQuery-min.js"> </script>
<script src = "./ module4.js"> </script>
<script src = "./ module2.js"> </script>
<script src = "./ module3.js"> </script>
<script src = "./ module1.js"> </script>
</ablo>
<Body>
<p> </p>
<script>
$ ('. Content'). Html (módulo1.run ());
</script>
</body>
</html>
A medida que avance el proyecto, habrá más y más archivos JS y dependencias se volverán cada vez más complejas, lo que hace que las listas de código JS y las listas de scripts en HTML a menudo sean difíciles de mantener.
Desarrollo modular de SEAJS
Echemos un vistazo a cómo implementar la misma funcionalidad usando SEAJS.
Primero es index.html:
Copie el código de la siguiente manera: <! DocType Html>
<html lang = "zh-cn">
<Evista>
<meta charset = "utf-8">
<title> tinyapp </title>
</ablo>
<Body>
<p> </p>
<script src = "./ sea.js"> </script>
<script>
Seajs.use ('./ init', function (init) {
init.initPage ();
});
</script>
</body>
</html>
Puede ver que la página HTML ya no necesita introducir todas las dependencias JS Archivos, pero solo presenta un SEA.JS. Al renderizar la página.
Index.html Carga el módulo init y utiliza el método InitPage de este módulo para inicializar los datos de la página.
Echemos un vistazo a la siguiente escritura modular de JavaScript:
Copie el código de la siguiente manera: //jquery.js
Definir (función (requerir, exportar, módulo) = {
// El código JQuery.js original ...
módulo.exports = $ .noconflict (verdadero);
});
//init.js
Definir (función (requerir, exportar, módulo) = {
var $ = require ('jQuery');
var m1 = require ('módulo1');
exports.initpage = function () {
$ ('. Content'). Html (m1.run ());
}
});
//module1.js
Definir (función (requerir, exportar, módulo) = {
var $ = require ('jQuery');
var m2 = require ('módulo2');
var m3 = require ('módulo3');
exports.run = function () {
return $ .merge (['módulo1'], $ .merge (m2.run (), m3.run ()));
}
});
//module2.js
Definir (función (requerir, exportar, módulo) = {
exports.run = function () {
return ['module2'];
}
});
//module3.js
Definir (función (requerir, exportar, módulo) = {
var $ = require ('jQuery');
var m4 = require ('módulo4');
exports.run = function () {
return $ .merge (['módulo3'], m4.run ());
}
});
//module4.js
Definir (función (requerir, exportar, módulo) = {
exports.run = function () {
return ['module4'];
}
});
A primera vista, el código parece ser más complicado, porque este ejemplo es demasiado simple. Sin embargo, a partir de esto todavía podemos ver algunas características de SEAJS:
Primero, la página HTML no necesita mantener una larga lista de etiquetas de script, solo introduce un SEA.JS.
El segundo es que el código JS está organizado como módulos.
A través de este ejemplo, los amigos deben tener una impresión intuitiva de SEAJS.