SeaJS ist ein von Yubo entwickeltes Modul -Ladegerüst, das der CommonJS -Spezifikation folgt, mit der jedes JavaScript -Modul- und CSS -Modulstil einfach und glücklich geladen werden kann. SeaJs ist sehr klein, da das Volumen nach Kompression und GZIP nur 4K beträgt und die Schnittstellen und Methoden ebenfalls sehr klein sind. SeaJS hat zwei Kerne: Moduldefinition sowie Modulbelastung und Abhängigkeiten. SeaJs ist sehr mächtig. SeaJs können jedes JavaScript -Modul- und CSS -Modulstil laden. SEAJS sorgt dafür, dass Sie bei Verwendung eines Moduls andere Module geladen haben, von denen Sie auf die Umgebung des Skripts abhängen. Yu Bo sagte, dass SeaJs Sie ermöglichen können, den Spaß beim Schreiben von Code zu genießen, ohne sich Sorgen um das Laden von Problemen zu machen. Sind Sie satt von so vielen JS- und CSS -Referenzen? Ich habe die 39 CSS- und JS -Referenzen auf der Homepage unserer Firmenwebsite gezählt. Die Auswirkungen, die es hat, kann sich vorstellen:
1. Nicht förderlich für Wartung, Front-End und Back-End sind gleich
2. Es gibt zu viele HTTP -Anfragen. Natürlich kann dies durch Zusammenführungen gelöst werden, aber wenn es keinen direkten Zusammenschluss gibt, sind die Arbeitskosten sehr hoch. Auch wenn das Backend sie verschmilzt und aufrechterhält, wird eine so lange Saite sie auf jeden Fall ansehen.
Die Verwendung von SeaJs kann diese Probleme sehr gut lösen.
Definition des Moduls
Das Definieren eines Moduls ist einfacher. Zum Beispiel definieren Sie ein Sayhello -Modul und Erstellen eines Sayhello.js -Dokuments:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
exports.sayhello = function (eleid, text) {
document.GetElementById (Eleid) .innerhtml = text;
};
});
Schauen wir uns zunächst den Exportparameter an. Der Exportparameter wird verwendet, um die Modul -API bereitzustellen. Das heißt, andere Module dieser Exporte können auf die Sayhello -Methode zugreifen.
Verwendung der Verwendung von Modul
Zum Beispiel gibt es ein Element auf unserer Seite mit ID "out" und wir möchten "Hallo SeaJs!", Ausgeben.
Dann können wir zuerst Sea.js vorstellen
Verwenden Sie dann das Sayhello -Modul:
Die Codekopie lautet wie folgt:
SeaJs.use ("Sayhello/Sayhello", Funktion (Say) {
Say.Sayhello ("Out", "Hallo SeaJs!");
});
Hier ist die Verwendung die Methode zur Verwendung von Modulen:
Der erste Parameter ist die Moduldarstellung, die durch den relativen Pfad relativ zu Sea.js. Das Suffix ".js" nach Sayshello.js kann weggelassen werden. Natürlich gibt es viele Methoden zur Identifizierung dieses Moduls. Weitere Informationen finden Sie in der offiziellen Beschreibung: http://seajs.com/docs/zh-cn/module-identifier.html
Der erste Parameter ist eine Rückruffunktion. say.sayhello () ruft die Exports.sayhello -Methode des Sayhello -Moduls auf. Natürlich gibt es in dieser Rückruffunktion einen Parameter.
Modulabhängigkeiten
Modulabhängigkeiten sollten tatsächlich vorhanden sein, wenn Module definiert sind. Schreiben Sie beispielsweise das Sayhello -Modul oben neu. Nehmen wir an, wir haben bereits ein allgemeines DOM -Modul, wie beispielsweise einige Methoden wie das Erhalten von Elementen, Festlegen von Stilen usw., wie ein solches DOM -Modul, dom.js wie folgt schreiben
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
var dom = {
/**
* Holen Sie sich das DOM -Objekt über das ID -Attribut des Elements, die Parameter sind Zeichenfolgen oder mehrere Zeichenfolgen
* @id getbyid
* @Method getbyId
* @param {string} id Das ID -Attribut
* @return {htmlelement | Objekt} Die HTMLElement mit der ID oder NULL, wenn keiner gefunden wird.
*/
getbyid: function () {
var els = [];
für (var i = 0; i <argumente.length; i ++) {
var el = argumente [i];
if (typeof el == "String") {
el = document.getElementById (el);
}
if (Argumente.length == 1) {
return el;
}
els.push (el);
}
ELS zurückgeben;
},
/**
* Holen Sie sich das Objekt, Sie können ein Objekt oder eine Zeichenfolge übergeben. Wenn die Zeichenfolge übergeben wird, wird das Objekt in Form von document.getElementById () erhalten.
* @id bekommen
* @param {String} el html Element
* @return {Object} htmlelement -Objekt.
*/
GET: Funktion (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
return el;
}
kehre this.getById (el) zurück;
}
};
return dom;
});
Dann kann das Sayhello -Modul so geschrieben werden. Um die ursprüngliche Demo -Seite nicht zu beeinflussen, habe ich ein neues Sayhelloa -Modul festgelegt. Wir können Sayhelloa.js wie folgt schreiben:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
var dom = required ("Dom/Dom");
erfordern ("Sayhelloa/Sayhello.css");
exports.sayhello = function (eleid, text) {
Dom.get (Eleid) .innerhtml = text;
};
});
Die erforderliche Funktion wird verwendet, um die Abhängigkeiten des Moduls festzulegen. Zum Beispiel hängt das obige Sayhelloa -Modul vom DOM -Modul ab, da die GET -Methode des DOM -Moduls verwendet wird.
Beachten Sie, dass var dom = required ("dom/dom") hier dieser Satz dem DOM das angewandte DOM -Modul zuweist. benötigen ("Sayhelloa/sayhello.css") direkt das CSS -Modul oder die Datei von Sayhello.css. Dies bezieht sich auf die CSS -Datei auf der Seite.
Ich habe in den letzten Tagen Probleme mit SeaJs gemacht. Je mehr ich Probleme damit mache, desto mehr gefällt es mir. Danke, du bist! Danke SeaJs! Natürlich denken Sie vielleicht, dass dies mit einem so einfachen Beispiel nicht erforderlich ist. Wenn sich kleine Projekte mit weniger JS -Dateien in Bezug auf modulare Vorteile gut fühlen, sich jedoch modularere Vorteile in der Anzahl der JS -Dateien oder mittel oder über Projekten widerspiegeln.