Préface
SeaJS est un cadre de chargement de module JavaScript qui suit la spécification CommonJS, qui peut implémenter le mécanisme de développement et de chargement modulaire de JavaScript. Contrairement aux cadres JavaScript tels que jQuery, SeaJS n'étend pas les caractéristiques du langage d'encapsulation, mais implémente uniquement la modularisation et le chargement par module. L'objectif principal des SeaJS est de rendre le développement JavaScript modulaire et de charger facilement et heureusement, les ingénieurs frontaux gratuits du traitement lourd du fichier JavaScript et de la dépendance des objets, et peuvent se concentrer sur la logique du code lui-même. Les SeaJS peuvent être parfaitement intégrés à des cadres comme JQuery. L'utilisation de SEAJS peut améliorer la lisibilité et la clarté du code JavaScript, résoudre les problèmes de confusion de dépendance et d'enchevêtrement du code qui sont courants dans la programmation JavaScript et facilitent l'écriture et le maintien du code.
L'auteur de Seajs est Yu Bo, un ingénieur frontal Taobao.
Seajs lui-même suit le concept Kiss (Gardez les choses simples, stupides) pour le développement. Dans le processus d'apprentissage des Seajs, vous pouvez ressentir l'essence du principe du baiser partout - faire une seule chose et bien faire une chose.
Cet article utilise d'abord un exemple pour comparer intuitivement la programmation JavaScript traditionnelle et la programmation JavaScript modulaire à l'aide de SEAJS, puis discute en détail des méthodes d'utilisation des SeaJS, et donne enfin des informations liées aux SeaJS.
Mode traditionnel vs modularité SeaJs
Supposons que nous développons maintenant une application Web TinyApp, et nous avons décidé d'utiliser le framework jQuery dans TinyApp. La page d'accueil de TinyApp utilisera module1.js, qui dépend de module2.js et modules3.js et module3.js.
Développement traditionnel
En utilisant des méthodes de développement traditionnelles, le code de chaque fichier JS est le suivant:
Copiez le code comme suit: //module1.js
var module1 = {
run: function () {
return $ .Merge (['module1'], $ .merge (module2.run (), module3.run ()));
}
}
//module2.js
var module2 = {
run: function () {
return ['module2'];
}
}
//module3.js
var module3 = {
run: function () {
return $ .Merge (['module3'], module4.run ());
}
}
//module4.js
var module4 = {
run: function () {
return ['module4'];
}
}
À l'heure actuelle, index.html doit référencer le module1.js et toutes ses dépendances sous-jacentes (noter l'ordre):
Copiez le code comme suit: <! Doctype html>
<html lang = "zh-cn">
<adal>
<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>
</ head>
<body>
<p> </p>
<cript>
$ ('. Contenu'). html (module1.run ());
</cript>
</docy>
</html>
Au fur et à mesure que le projet progresse, il y aura de plus en plus de fichiers JS et de dépendances deviendront de plus en plus complexes, ce qui rend le code JS et les listes de scripts dans HTML souvent difficiles à maintenir.
SEAJS Développement modulaire
Voyons comment implémenter les mêmes fonctionnalités à l'aide de SEAJS.
Le premier est index.html:
Copiez le code comme suit: <! Doctype html>
<html lang = "zh-cn">
<adal>
<meta charset = "utf-8">
<Title> TinyApp </Title>
</ head>
<body>
<p> </p>
<script src = "./ sea.js"> </cript>
<cript>
SeaJs.use ('./ init', fonction (init) {
init.initpage ();
});
</cript>
</docy>
</html>
Vous pouvez voir que la page HTML n'a plus besoin d'introduire tous les fichiers JS, mais introduit uniquement un Sea.js. Lors du rendu de la page.
index.html charge le module init et utilise la méthode initpage de ce module pour initialiser les données de la page.
Jetons un coup d'œil à l'écriture de javascript modulaire suivante:
Copiez le code comme suit: //jquery.js
définir (fonction (require, exportations, module) = {
// Le code jquery.js original ...
module.exports = $ .NoConflict (true);
});
//init.js
définir (fonction (require, exportations, module) = {
var $ = require ('jQuery');
var m1 = require ('module1');
exportS.Initpage = function () {
$ ('. Contenu'). Html (m1.run ());
}
});
//module1.js
définir (fonction (require, exportations, module) = {
var $ = require ('jQuery');
var m2 = require ('module2');
var m3 = require ('module3');
export.run = function () {
retour $ .Merge (['module1'], $ .Merge (m2.run (), m3.run ()));
}
});
//module2.js
définir (fonction (require, exportations, module) = {
export.run = function () {
return ['module2'];
}
});
//module3.js
définir (fonction (require, exportations, module) = {
var $ = require ('jQuery');
var m4 = require ('module4');
export.run = function () {
return $ .Merge (['module3'], m4.run ());
}
});
//module4.js
définir (fonction (require, exportations, module) = {
export.run = function () {
return ['module4'];
}
});
À première vue, le code semble plus compliqué, car cet exemple est trop simple. Cependant, à partir de cela, nous pouvons toujours voir certaines caractéristiques de Seajs:
Tout d'abord, la page HTML n'a pas besoin de maintenir une longue liste de balises de script, introduisez simplement un Sea.js.
La seconde est que le code JS est organisé en modules.
Grâce à cet exemple, les amis devraient avoir une impression intuitive de SEAJS.