Herunterladen und installieren
Um SEAJs in Ihrem Projekt zu verwenden, müssen Sie nur die Vorbereitung vorbereiten, um Sea.js herunterzuladen und irgendwo in Ihr Projekt zu setzen.
Das SEAJS -Projekt wird derzeit auf Github gehostet, mit der Homepage unter https://github.com/seajs/seajs/. Sie können Sea.js (komprimiert) oder sea-debug.js (unkomprimiert) im Build-Verzeichnis seiner Git-Bibliothek herunterladen.
Nachdem der Download abgeschlossen ist, stellen Sie es in die entsprechende Position des Projekts ein und stellen Sie es dann durch das <Script> -Tag auf der Seite ein, und Sie können SeaJs verwenden.
SeaJs grundlegende Entwicklungsprinzipien
Bevor wir die spezifische Verwendung von SeaJs diskutieren, stellen wir zunächst die modularen Konzept- und Entwicklungsprinzipien von SeaJs ein.
Das Grundprinzip der Verwendung von SeaJs zur Entwicklung von JavaScript ist: Alles ist ein Modul. Nachdem SeaJs eingeführt wurde, wurde das Schreiben von JavaScript -Code nach dem anderen ein Modul. Öffentliche Daten und Methoden können von anderen Modulen aufgerufen werden.
Zusätzlich sollte jedes Modul in einer separaten JS -Datei definiert werden, dh einer entsprechend einem Modul.
Das Folgende beschreibt das Schreiben und Aufruf von Modulen.
Definition und Schreiben von Modulen
Moduldefinitionsfunktion definieren
Verwenden Sie in SeJs die Funktion "Definieren", um ein Modul zu definieren. Da die SeaJS -Dokumentation keine vollständige Referenz für die Definition enthält, habe ich den SeaJS -Quellcode gelesen und festgestellt, dass definiert drei Parameter empfangen können:
Kopieren Sie den Code wie folgt:/**
* Definiert ein Modul.
* @param {string =} id Die Modul -ID.
* @param {Array. | String =} DEPS die Modulabhängigkeiten.
* @param {function () | Object} Factory Die Modulfabrikfunktion.
*/
fn.define = function (id, dEPs, fabrik) {
// Funktionscode…
}
Das obige ist aus dem SeaJS -Quellcode auszuziehen. Nachdem ich den Quellcode gelesen hatte, stellte ich fest, dass die Parsing -Regeln für die Anzahl der verschiedenen Parameter von Define wie folgt sind:
Wenn es nur einen Parameter gibt, weisen Sie der Fabrik den Wert zu.
Wenn es zwei Parameter gibt, wird die zweite Fabrik zugewiesen.
Wenn es drei Parameter gibt, werden sie ID, DEPS und Fabrik zugewiesen.
Fast alle Orte, an denen definiert wird, werden jedoch verwendet, einschließlich des offiziellen Beispiels von SeaJS. Es wird nur eine Fabrikfunktion übergeben, ähnlich wie der folgende Code:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
// Code des Moduls ...
});
Ich persönlich empfehle Ihnen, die Standards der offiziellen SEAJS -Beispiele zu befolgen und das Modul mit einer Parameterdefinition zu definieren. Was wird also mit ID und DEPs gemacht?
ID ist die Identifikationszeichenfolge eines Moduls. Wenn Sie definieren, um das Modul in der A.JS -Datei unter Beispiel.com zu definieren, wird die ID dieses Moduls http://example.com/a.js zugewiesen. die ID. DEPs müssen im Allgemeinen nicht übergeben werden, und die benötigten Module können mit Anforderungen geladen werden.
Fabrikfunktionsfabrikanalyse
Fabrikfunktionen sind der Hauptkörper und Fokus des Moduls. Wenn nur ein Parameter zum Definieren übergeben wird (empfohlenes Schreiben), ist dieser Parameter die Fabrikfunktion.
1. Ladefunktion durch Erhöhenmodul, verwendet, um abhängige Module aufzunehmen.
2. Exports-Schnittpunktpunkt setzt sie beim Definieren von Daten oder Methoden externen Aufrufen aus.
3.Modul-die Metadaten des Moduls.
Diese drei Parameter können nach Bedarf ausgewählt werden, um die Spezifikation anzuzeigen.
Lassen Sie uns unten über das Modul sprechen. Ein Modul ist ein Objekt, das die Meta -Informationen des Moduls wie folgt speichert:
1.Module.id - Die Modul -ID.
2.MODULE.DEPENDENTEN - Ein Array, in dem die ID -Liste aller Module gespeichert ist, von denen dieses Modul abhängt.
3.Module.exports-Punkte an dasselbe Objekt wie Exporte.
Drei Modi zum Schreiben von Modulen
Der erste Modus zum Definieren von Modulen ist der exportbasierte Modus:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
var a = erfordern ('a');
var b = erfordern ('B');
var data1 = 1; // private Daten
var func1 = function () {// private Methode
return A.run (Data1);
}
exports.data2 = 2;
exports.func2 = function () {// öffentliche Methode
kehre 'Hallo' zurück;
}
});
Das obige ist ein relativ "authentisches" -Moduldefinitionsmodell. Zusätzlich zur Anhänge öffentlicher Daten und Methoden zum Exportieren können Sie ein Objekt direkt zurückgeben, um das Modul darzustellen, z. B. der folgende Code hat die gleiche Funktion wie der oben genannte Code:
Kopieren Sie den Code wie folgt: Definieren Sie (Funktion (erfordert) {
var a = erfordern ('a');
var b = erfordern ('B');
var data1 = 1; // private Daten
var func1 = function () {// private Methode
return A.run (Data1);
}
zurückkehren {
Daten2: 2,
func2: function () {
kehre 'Hallo' zurück;
}
};
});
Wenn die Moduldefinition keinen anderen Code enthält und nur ein Objekt zurückgibt, finden Sie die folgende vereinfachte Schreibmethode:
Kopieren Sie den Code wie folgt: Define ({{
Daten: 1,
func: function () {
kehre 'Hallo' zurück;
}
});
Die dritte Methode eignet sich sehr für Module, die reine JSON -Daten definieren.
Laden und Referenz von Modulen
Moduladresungsalgorithmus
Wie oben erwähnt, entspricht ein Modul einer JS -Datei. wo sich das tatsächliche Modul befindet. SeaJs unterstützt die folgenden Kennungen:
Absolute Adresse - gibt den absoluten Pfad zur JS -Datei.
wie:
Die Codekopie lautet wie folgt: Require ("http: // Beispiel/js/a");
Es bedeutet, http: //example/js/a.js zu laden.
Relative Adresse - Verwenden Sie relative Anrufe, um das Modul zu finden, um die relative Adresse der JS -Datei zu finden, in der sich die Lastfunktion befindet.
Laden Sie es beispielsweise in http: //example/js/b.js
Die Codekopie lautet wie folgt: Erforderlich ("./ C");
Laden Sie dann http: //example/js/c.js.
Basisadresse - Wenn die Lade -String -Kennung weder ein absoluter Pfad ist noch mit "./" beginnt, wird sie in der globalen Konfiguration von SeaJs in Bezug auf "Basis" angesprochen.
Beachten Sie, dass Sie beim Laden von Modulen oben nicht den Suffixnamen ".js" übergeben müssen, und SeaJs fügt automatisch ".js" hinzu. Die folgenden drei Fälle werden jedoch nicht hinzugefügt:
Beim Laden von CSS wie:
Die Codekopie lautet wie folgt: Erforderlich ("./ Module1-Style.css");
Wann enthält der Pfad "?", Wie:
Die Codekopie lautet wie folgt: Erforderlich (<a href = "http: //example/js/a.json? Cb = func"> http: //example/js/a.json? );
Wenn der Pfad mit "#" endet, wie::
Die Codekopie lautet wie folgt: Anforderung ("http: //example/js/a.json#");
Nach verschiedenen Anwendungsszenarien stellt SeaJs drei APIs für Lademodule bereit, nämlich SeaJs.
SeaJs.use
SeaJs.use wird hauptsächlich zum Laden des Einstiegsmoduls verwendet. Das Einstiegsmodul entspricht der Hauptfunktion des C -Programms und auch die Wurzel des gesamten Modulabhängigkeitsbaums. Im obigen TinyApp -Beispiel ist init das Eingangsmodul. Die Verwendung von SeaJs.use ist wie folgt:
Die Codekopie lautet wie folgt:
// Einzelmodus
SeaJs.use ('./ a');
// Rückrufmodus
SeaJs.use ('./ a', Funktion (a) {
A.run ();
});
// Multi-Modul-Modus
SeaJs.use (['./ a', './b'], Funktion (a, b) {
A.run ();
B.run ();
});
Im Allgemeinen wird SeaJS.use nur verwendet, um das Einstiegsmodul auf der Seite zu laden. Wenn es nur ein Einstiegsmodul gibt, können Sie auch SeaJs.use unterlassen, indem Sie das "Data-Main" -Merkmal zu dem Skript-Tag hinzufügen, das Sea.js. folgende Schreibmethode:
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "zh-cn">
<kopf>
<meta charset = "utf-8">
<title> TinyApp </title>
</head>
<body>
<p> </p>
<script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
Diese Art des Schreibens wird HTML prägnanter machen.
erfordern
Erfordernis ist die Hauptmodul -Lademethode von SeaJs.
Die Codekopie lautet wie folgt: var m = required ('/path/to/modul/file');
Hier finden Sie eine kurze Einführung in den automatischen Lademechanismus von SeaJs. Wie oben erwähnt, schließen Sie nach der Verwendung von SeaJS einfach Sea.js. SeaJS lädt zuerst das Eintragsmodul herunter, verwendet dann reguläre Ausdrücke, um alle Anforderungen im Code entlang des Eintragsmoduls zu entsprechen, und laden Sie die entsprechende JS -Datei gemäß der Dateipfadidentifikation in die Forderung herunter und iterieren Sie dann die heruntergeladene JS -Datei. Der gesamte Prozess ähnelt dem Durchlaufbetrieb eines Diagramms (da möglicherweise eine Cross-Cycle-Abhängigkeit besteht, ist die gesamte Abhängigkeitsdatenstruktur eher ein Diagramm als ein Baum).
Sobald Sie den obigen Punkt verstanden haben, sind die folgenden Regeln leicht zu verstehen:
Der Pfadkennung, der anfordern muss, muss ein String -Literal sein und kein Ausdruck.
Die Codekopie lautet wie folgt: Erforderlich ('Modul' + '1');
erfordern ('module'.tolowerCase ());
Dies führt dazu, dass SeaJs nicht korrekte reguläre Übereinstimmungen durchführen, um die entsprechende JS -Datei herunterzuladen.
erfordern.async
Wie oben erwähnt, erfassen SeaJS alle erforderlichen JS -Dateien gleichzeitig über statische Analysen, wenn die HTML -Seite geöffnet wird.
Kopieren Sie den Code wie folgt: fordert.async ('/path/to/modul/file', Funktion (m) {
// Code des Rückrufs ...
});
Auf diese Weise wird nur dann, wenn dieses Modul verwendet wird, die entsprechende JS-Datei heruntergeladen, in der das On-Demand-Laden von JavaScript-Code realisiert wird.
Globale Konfiguration von SeaJs
SeaJS bietet eine seaJs.config -Methode, mit der eine globale Konfiguration eingerichtet und ein Konfigurationsobjekt empfangen kann, das die globale Konfiguration darstellt. Die spezifische Verwendungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: SeaJs.config ({{
Basis: 'Pfad/to/jslib/',
alias: {
'App': 'Pfad/to/App/'
},
Charset: 'UTF-8',
Zeitüberschreitung: 20000,
Debug: Falsch
});
Wobei die Basis den Basisadressweg während der Basisadressierung darstellt. Beispielsweise ist die Basis auf http://example.com/js/3-Party/ eingestellt, dann:
Die Codekopie lautet wie folgt: var $ = required ('jQuery');
http://example.com/js/3-Party/jquery.js wird geladen.
Alias kann eine Abkürzung für längere gemeinsame Pfade einstellen.
CharSet repräsentiert das Charset -Attribut des Skript -Tags beim Herunterladen von JS.
Timeout zeigt die maximale Zeit zum Herunterladen der Datei in Millisekunden an.
Debugg gibt an, ob es im Debug -Modus funktioniert.
Wie SeaJs mit vorhandenen JS -Bibliotheken zusammenarbeitet
Um eine vorhandene JS -Bibliothek wie JQuery mit SeaJS zu verwenden, verkapulieren Sie einfach die vorhandene Bibliothek gemäß den Regeln für die Moduldefinition von SeaJS. Beispielsweise ist Folgendes die Kapselungsmethode für JQuery:
Kopieren Sie den Code wie folgt: Define (function () {
// {{{{jQuery Originalcode startet
/*!
* JQuery JavaScript Library v1.6.1
* http://jquery.com/
*
* Copyright 2011, John Ressig
* Doppelte Lizenz unter den MIT- oder GPL -Version 2 -Lizenzen.
* http://jquery.org/license
*
* Beinhaltet sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Veröffentlicht unter den MIT-, BSD- und GPL -Lizenzen.
*
* Datum: Do 12. Mai 15:04:36 2011 -0400
*/
// ...
//}}} jQuery Originalcode endet
return $ .noconflict ();
});
SEAJS -Projektverpackung und -abweichung
SeaJs integrierte ursprünglich ein Packaged Deployment -Tool SM. Die Kernidee von SPM besteht darin, den Code aller Module zusammenzufassen und in das Einstiegsmodul zu verschmelzen. . Da SPM jedoch nicht für die offizielle Version veröffentlicht wurde, beabsichtigt dieser Artikel nicht, ihn ausführlich vorzustellen.
Da die für jedes Projekt verwendeten JS -Zusammenführungs- und Komprimierungsinstrumente unterschiedlich sind, ist SPM für jedes Projekt möglicherweise nicht vollständig geeignet. Nach dem Verständnis der Prinzipien von SeaJs können Sie ein Zusammenführungs- und Verpackungsskript schreiben, das den Eigenschaften Ihres Projekts entspricht.