Eine kurze Analyse der Moduldefinition und des Modulladens von seaJs_Seajs

SeaJS ist ein von Yubo entwickeltes Modullade-Framework, das der CommonJS-Spezifikation folgt und zum einfachen und problemlosen Laden beliebiger JavaScript-Module und CSS-Modulstile verwendet werden kann. Die geringe Größe von SeaJS liegt darin, dass die Größe nach Komprimierung und GZIP nur 4 KB beträgt und es nur sehr wenige Schnittstellen und Methoden gibt: Moduldefinition und Modulladen und -abhängigkeiten. SeaJS ist sehr leistungsfähig. SeaJS kann jedes JavaScript-Modul laden und der CSS-Modulstil stellt sicher, dass bei Verwendung eines Moduls auch andere Module, von denen es abhängt, in die Skriptausführungsumgebung geladen werden. Laut Onkel Yu können Sie mit SeaJS den Spaß am Schreiben von Code genießen, ohne sich über Ladeprobleme Gedanken machen zu müssen. Haben Sie genug von so vielen JS- und CSS-Referenzen? Ich habe 39 CSS- und JS-Referenzen auf der persönlichen Homepage unserer Unternehmenswebsite gezählt. Die Auswirkungen können Sie sich vorstellen:

1. Nicht wartungsfreundlich, das Front-End und das Backend sind gleich
2. Natürlich kann dies durch Zusammenführen gelöst werden, aber wenn keine direkte Zusammenführung erfolgt Back-End, die Arbeitskosten werden sehr hoch sein, selbst wenn das Back-End zusammengeführt wird, muss eine so lange Zeichenfolge für die Augen verwirrend sein

SeaJS kann diese Probleme sehr gut lösen.

Moduldefinition definieren

Es ist relativ einfach, ein Modul zu definieren, zum Beispiel ein sayHello-Modul zu definieren und ein sayHello.js-Dokument zu erstellen:

Kopieren Sie den Code Der Code lautet wie folgt:

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

Werfen wir zunächst einen Blick auf den Exports-Parameter. Der Exports-Parameter wird verwendet, um die API des Moduls bereitzustellen Das heißt, andere Module können über diese Exportmethode auf sayHello zugreifen.

Modulladenutzung

Zum Beispiel gibt es auf unserer Seite ein Element mit der ID „out“ und wir möchten „Hello SeaJS!“ ausgeben,
dann können wir zuerst sea.js einführen
und dann das sayHello-Modul verwenden :

Code kopieren Der Code lautet wie folgt:

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

hier verwenden ist die Methode zur Verwendung des Moduls:

Der erste Parameter ist die Moduldarstellung, die durch den relativen Pfad relativ zu sea.js dargestellt wird. Das Suffix „.js“ nach sayHello.js kann natürlich weggelassen werden. Weitere Informationen finden Sie in den offiziellen Anweisungen: http://seajs.com/docs/zh-cn/module-identifier.html
Der erste Parameter ist eine Rückruffunktion. say.sayHello() dient zum Aufrufen der exports.sayHello-Methode des sayHello-Moduls. Natürlich gibt es einen say-Parameter in der Rückruffunktion.

Modulabhängigkeiten

Modulabhängigkeiten sollten tatsächlich vorhanden sein, wenn das Modul definiert wird. Schreiben wir beispielsweise das obige sayHello-Modul neu. Angenommen, wir haben bereits ein allgemeines DOM-Modul, z. B. einige Methoden zum Abrufen von Elementen, Festlegen von Stilen usw. Schreiben Sie für ein solches DOM-Modul beispielsweise DOM.js wie folgt:

Code kopieren Der Code lautet wie folgt:

define(function(require, exports, module) {
    var DOM = {
        /**
* Rufen Sie das DOM-Objekt über das id-Attribut des Elements ab, der Parameter ist eine Zeichenfolge oder mehrere Zeichenfolgen
* @id getById
* @method getById
* @param {String} id the id-Attribut
* @return {HTMLElement |. Objekt} Das HTMLElement mit der ID, oder null, wenn keines gefunden wird.
*/
        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 ruft das Objekt ab. Sie können ein Objekt oder eine Zeichenfolge übergeben. Wenn die Zeichenfolge übergeben wird, wird das Objekt durch document.getElementById() abgerufen.
* @id get
* @param { String} das HTML-Element
* @return {Object} HTMLElement-Objekt.
*/
        get: function(el) {
            if (el & amp; amp; amp; & amp; amp ; amp; (el.tagName || el.item)) {
               return el;
                DOM zurückgeben ;
});


那么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依赖于DOM模块,因为用到了DOM模块的get方法.
注意这里的var. DOM=require("DOM/DOM"), 这句是将应用进来的DOM模块赋值给DOM；require("sayHelloA/sayHello.css")接应用Sagen Sie Hallo .css css模块或者说文件.这样页面上会引用这个css文件.

最近这几天一直捣腾SeaJS，越捣腾越喜欢，感谢玉伯！感谢SeaJS！当然你可能觉得这么简单的几个实例没必要这么做.确实如果js文件少的小项目感觉不错模块化