SEAJS est un cadre de chargement de module développé par Yubo qui suit la spécification CommonJS, qui peut être utilisé pour charger facilement et joyeusement n'importe quel module JavaScript et styles de module CSS. SEAJS est très petit, car le volume après compression et GZIP n'est que 4K, et les interfaces et méthodes sont également très petites. Seajs a deux cœurs: définition du module et chargement et dépendances du module. Seajs est très puissant. SEAJS peut charger n'importe quel module JavaScript et style module CSS. SEAJS s'assurera que lorsque vous utilisez un module, vous avez chargé d'autres modules sur lesquels vous dépendez dans l'environnement en cours d'exécution du script. Yu Bo a dit que Seajs peut vous permettre de profiter du plaisir d'écrire du code sans vous soucier de charger des problèmes. Êtes-vous fatigué de tant de références JS et CSS? J'ai compté les références 39 CSS et JS sur la page d'accueil de notre site Web de l'entreprise. L'impact que cela peut être imaginé:
1. Pas propice à l'entretien, au front-end et au back-end est le même
2. Il y a trop de demandes HTTP. Bien sûr, cela peut être résolu par la fusion, mais s'il n'y a pas de backend directement fusion, le coût de la main-d'œuvre est très élevé. Même si le backend fusionne et le maintient, une si longue chaîne le regardera certainement.
L'utilisation de SEAJS peut très bien résoudre ces problèmes.
Définition du module
La définition d'un module est plus simple. Par exemple, définir un module Sayhello et créer un document Sayhello.js:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
export.sayhello = fonction (eleid, texte) {
document.getElementById (eleid) .InnerHtml = text;
};
});
Examinons d'abord le paramètre des exportations. Le paramètre d'exportation est utilisé pour fournir l'API du module. Autrement dit, d'autres modules de ces exportations peuvent accéder à la méthode Sayhello.
Utilisation du chargement du module
Par exemple, il y a un élément sur notre page avec ID "Out" et nous voulons sortir "Hello Seajs!"
Ensuite, nous pouvons d'abord présenter Sea.js
Utilisez ensuite le module Sayhello:
La copie de code est la suivante:
SeaJs.Use ("Sayhello / Sayhello", fonction (Say) {
Say.sayhello ("out", "Hello Seajs!");
});
Ici, l'utilisation est la méthode d'utilisation des modules:
Le premier paramètre est la représentation du module, qui est représentée par le chemin relatif par rapport à Sea.js. Le suffixe ".js" après Sayshello.js peut être omis. Bien sûr, il existe de nombreuses méthodes pour identifier ce module. Pour plus de détails, veuillez consulter la description officielle: http://seajs.com/docs/zh-cn/module-identifier.html
Le premier paramètre est une fonction de rappel. Say.sayhello () appelle la méthode export.sayhello du module Sayhello. Bien sûr, il y a un paramètre Say dans cette fonction de rappel.
Dépendances des modules
Les dépendances du module doivent réellement exister lorsque les modules sont définis. Par exemple, réécrivez le module Sayhello ci-dessus. Supposons que nous ayons déjà un module DOM général, tel que certaines méthodes telles que l'obtention d'éléments, les styles de réglage, etc., tels qu'un tel module Dom, écrivez DOM.js comme suit
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
var dom = {
/ **
* Obtenez l'objet DOM via l'attribut ID de l'élément, les paramètres sont des chaînes ou des chaînes multiples
* @id getbyid
* @Method Getbyid
* @param {String} ID L'attribut ID
* @return {htmlelement | Objet} Le Htmlelement avec l'ID, ou null si aucun n'est trouvé.
* /
getbyid: function () {
var els = [];
pour (var i = 0; i <arguments.length; i ++) {
var el = arguments [i];
if (typeof el == "String") {
el = document.getElementById (el);
}
if (arguments.length == 1) {
Retour El;
}
els.push (el);
}
Retour Els;
},
/ **
* Get Get l'objet, vous pouvez passer dans un objet ou une chaîne. Si la chaîne est transmise, l'objet est obtenu sous la forme de document.getElementById ()
* @id get
* @param {String} el html élément
* @return {Object} Htmlelement objet.
* /
get: fonction (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
Retour El;
}
Renvoyez ce.getByid (El);
}
};
return Dom;
});
Ensuite, le module Sayhello peut être écrit comme celui-ci. Afin de ne pas affecter la page de démonstration d'origine, je définis un nouveau module Sayhelloa. Nous pouvons écrire sayhelloa.js comme ceci:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
var Dom = requis ("Dom / Dom");
exiger ("sayhelloa / sayhello.css");
export.sayhello = fonction (eleid, texte) {
Dom.get (eleid) .innerhtml = text;
};
});
La fonction requise est utilisée pour établir les dépendances du module. Par exemple, le module Sayhelloa ci-dessus dépend du module Dom car la méthode GET du module Dom est utilisée.
Remarque que var Dom = require ("Dom / Dom") Ici, cette phrase attribue le module Dom appliqué au DOM; require ("sayhelloa / sayhello.css") applique directement le module ou fichier Sayhello.css CSS. Cela fera référence au fichier CSS sur la page.
J'ai causé des problèmes avec Seajs ces derniers jours. Plus j'en ai des problèmes, plus je l'aime. Merci Yu Bo! Merci Seajs! Bien sûr, vous pouvez penser qu'il n'est pas nécessaire de le faire avec un exemple aussi simple. En effet, si les petits projets avec moins de fichiers JS se sentent bien dans les avantages modulaires, mais des avantages plus modulaires se reflètent dans le nombre de fichiers JS ou de projets moyens ou supérieurs.