Une brève analyse de la définition du module et du chargement du module de seaJs

Une brève analyse de la définition du module et du chargement du module de seaJs_Seajs

WBOY

Libérer： 2016-05-16 16:45:43

original

1430 Les gens l'ont consulté

SeaJS est un framework de chargement de modules développé par Yubo qui suit la spécification CommonJS et peut être utilisé pour charger facilement et facilement des modules JavaScript arbitraires et des styles de modules CSS. SeaJS est très petit. La petite taille réside dans le fait que la taille après compression et gzip n'est que de 4K, et qu'il existe très peu d'interfaces et de méthodes. SeaJS a deux cœurs : la définition du module et le chargement et les dépendances du module. SeaJS est très puissant. SeaJS peut charger n'importe quel module JavaScript et le style de module CSS garantira que lorsque vous utilisez un module, d'autres modules dont il dépend ont été chargés dans l'environnement d'exécution du script. Selon Oncle Yu, SeaJS vous permet de profiter du plaisir d'écrire du code sans avoir à vous soucier des problèmes de chargement. Vous en avez marre de tant de références js et css ? J'ai compté 39 références css et js sur la page d'accueil personnelle du site internet de notre entreprise. L'impact peut être imaginé :

1. Pas propice à la maintenance, le front-end et le back-end sont les mêmes
2 Il y a trop de requêtes http Bien sûr, cela peut être résolu par la fusion, mais s'il n'y a pas de fusion directe des. back-end, le coût de la main d'œuvre sera très élevé Même si le back-end est fusionné, la maintenance, une chaîne aussi longue doit être déroutante pour les yeux

SeaJS peut très bien résoudre ces problèmes.

Définition du module définir

Il est relativement simple de définir un module, par exemple, définir un module sayHello et créer un document sayHello.js :

Copiez le code Le code est le suivant :

define(function(require,exports,module){
 exports.sayHello = function(eleID,text) {
 document.getElementById (eleID).innerHTML=text;
 };
});

Jetons d'abord un coup d'œil au paramètre exports Le paramètre exports est utilisé pour fournir l'API du module. vers le monde extérieur, c'est-à-dire que d'autres modules peuvent accéder à sayHello via cette méthode d'exportation.

Utilisation du chargement du module

Par exemple, il y a un élément avec l'identifiant "out" sur notre page et nous voulons afficher "Hello SeaJS!",
alors nous pouvons d'abord introduire sea.js
puis utiliser le module sayHello :

Copier le code Le code est le suivant :

seajs.use("sayHello/sayHello ",function(say){
 say.sayHello("out","Hello SeaJS!");
});

use voici la méthode d'utilisation du module :

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 sayHello.js peut être omis. Bien sûr, il existe de nombreuses façons d'identifier ce module. Veuillez consulter les instructions officielles pour plus de détails. ：http://seajs.com/docs/zh-cn/module-identifier.html
Le premier paramètre est une fonction de rappel. say.sayHello() consiste à appeler la méthode exports.sayHello du module sayHello. Bien sûr, il y a un paramètre say dans la fonction de rappel.

Dépendances des modules

Les dépendances du module devraient réellement exister lorsque le module est défini. Par exemple, réécrivons le module sayHello ci-dessus. Supposons que nous ayons déjà un module DOM général, comme certaines méthodes d'obtention d'éléments, de définition de styles, etc. Par exemple, pour un tel module DOM, écrivez DOM.js comme suit

Copier le code Le code est le suivant :

define(function(require, exports, module) {
    var DOM = {
        /**
* Obtenez l'objet DOM via l'attribut id de l'élément, le paramètre est une chaîne ou plusieurs chaînes 
* @id getById
* @method getById
* @param {String} id le Attribut id 
* @return {HTMLElement | Object} Le HTMLElement avec l'identifiant, ou null si aucun n'est trouvé.
*/
        getById: function() {
             var els = [];
            for (var i = 0; i < arguments.length; i ) {
                var el = arguments[i];
                if (typeof el == "string") {
>                }
                els.push(el);
 }
            return els;
        },
        /**
* get récupère l'objet, vous pouvez passer un objet ou une chaîne, si la chaîne est passée, l'objet est obtenu par document.getElementById() 
* @id get
* @param { String} l'élément HTML
* @return {Object} Objet HTMLElement.
*/
        get : function(el) {
            if (el & amp; amp; amp; & amp; amp ; amp; (el.tagName || el.item)) {
                return el;
            }
            return this.getById(el);
        }
    };
   retourner le DOM ;
});


那么sayHello模块可以这样编写，为了不影响原来的demo页面，所以我定一个新的sayHelloA模块，我们可以这样编写sayHelloA.js :

复制代码

代码如下 :define(function(require, exports, module) { var DOM = require("DOM/DOM");

require("sayHelloA/sayHello.css");

    exports.sayHello = function(eleID, text) {
        DOM.get(eleID). innerHTML = text;
    };
});


require 函数就是用来建立模块的依赖关系，比如上面sayHelloA模块，就是依赖于DOM模块，因为用到了DOM var DOM=require("DOM/DOM"),require("sayHelloA/sayHello.css")是直接应用disBonjour .css css模块或者说文件。这样页面上会引用这个css文件。


最近这几天一直捣腾SeaJS！当然你可能觉得这么简单的几个实例没必要这么做。确实如果js文件少的小项目感觉不错模块化的优势，但是，更多的在js文件多或着中型以上项目这个模块化的优势就体现出来了。