Das Modulbeladung unterteilt JS tatsächlich in viele Module, um eine einfache Entwicklung und Wartung zu erhalten. Wenn Sie viele JS -Module laden, müssen daher dynamisch geladen werden, um die Benutzererfahrung zu verbessern.
Bevor wir die Modulladebibliothek einführen, werden wir eine Methode einführen.
Dynamische Belastung der JS -Methode:
Die Codekopie lautet wie folgt:
Funktion LoadJS (URL, Rückruf) {
var node = document.createelement ("script");
Knoten [window.adDeVentListener? "Onload": "OnReadyStatEchange"] = function () {
if (window.adDeVentListener || /loaded|complete/i.test(node.readyState)) {
callback ();
node.onReadyStatechange = null;
}
}
node.onError = function () {};
node.src = url;
var head = document.getElementsByTagName ("head") [0];
head.insertBefore (Knoten, head.Firstchild); // Bevor Sie ihn in den ersten Knoten des Kopfes einfügen, verhindern Sie, dass das Kopf -Tag unter IE6 geschlossen wird, und verwenden Sie AppendChild, um einen Fehler zu melden.
}
Da sich Zhengmei mit dem Massenrahmen, das es für die Einführung von Modulbeladung geschrieben hat, verwendete, wird am häufigsten in der Branche verwendete. Js und Sea.js. Deshalb denke ich, dass er eine starke Persönlichkeit hat.
Lassen Sie mich über den Ladenprozess von see.js sprechen:
Das Page Chaosan.js wird im Kopf -Tag eingeführt und das SeaJS -Objekt wird erhalten.
Führen Sie auch Index.js ein.
Der Code von Index.js lautet wie folgt:
Die Codekopie lautet wie folgt:
SeaJs.use (['./ a', 'jQuery'], Funktion (a, $) {
var num = aa;
$ ('#J_a'). Text (num);
})
A.JS:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
var b = erfordern ('./ B');
var a = function () {
return 1 + parseint (bb ());
}
exports.a = a;
})
B.Js:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
var c = erfordern ('./ c');
var b = function () {
return 2 + parsesint (cc ());
}
exports.b = b;
})
C.Js:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (erfordern, exportieren, modul) {
var c = function () {
Rückkehr 3;
}
exports.c = c;
})
Aus dem obigen können wir sehen, dass das Modul A von B abhängt, und B hängt von c ab.
Wenn das Programm index.js eingeht, ruft SeaJs die Verwendungsmethode auf.
Die Codekopie lautet wie folgt:
SeaJs.use = Funktion (IDS, Callback) {
globalmodule._use (ids, callback)
}
Beschreibung: Wenn GlobalModule in SeJs initialisiert wird (wenn see.js eingeführt wird), wird die Instanz von Modul var GlobalModule = neues Modul (util.pageuri, status.compiled) initialisiert.
Zu diesem Zeitpunkt IDs -> ['./a' ,'JQuery'], Callback -> Funktion (a, $) {var num = aa; $ ('#j_a'). Text (num);}
Als nächstes wird GlobalModule._use (IDs, Rückruf) aufgerufen
Die Codekopie lautet wie folgt:
Module.Prototype._use = Funktion (IDS, Rückruf) {
var uris = resolve (ids, this.uri); // Resolution ['./a''jQuery']
this._load (uris, function () {// rufen Sie die Adresse des analysierten A- und JQuery -Moduls [url1, url2] auf und rufen Sie die _load -Methode auf.
//util.map: Lassen Sie alle Datenmitglieder die angegebene Funktion gleichzeitig ausführen und geben Sie ein neues Array zurück, was das Ergebnis der Callback -Ausführung des ursprünglichen Array -Mitglieds ist
var args = util.map (URIS, Funktion (URI) {
Uri zurückgeben? CachedModules [uri] ._ compile (): null; // Wenn URL existiert, rufen Sie die _compile -Methode auf.
})
if (callback) {callback.apply (null, args)}
})
}
Denn nach dem Aufrufen der _load -Methode werden zwei Rückruffunktionen angezeigt, sodass wir die Funktion (a, $) {var num = aa; $ ('#j_a'). Text (num);} bis callback1,
Setzen Sie dies._Load (URIS, function () {}) Callback -Methoden -Flag nach Callback2.
Die Auflösungsmethode besteht darin, die Moduladresse zu beheben, sodass ich hier nicht auf Details eingehen werde.
Schließlich wurde die URIs in var uris = resolve (ids, this.uri) in ['http: //localhost/test/seajs/a.js''http: //localhost/test/seajs/lib/juqery.7.7.7.7.7.2/juqy-debug.juq.
Und als nächstes wird diese._load ausgeführt
Die Codekopie lautet wie folgt:
// Die Methode _load () bestimmt zunächst, welche Ressourcendateien noch nicht fertig sind. Wenn sich alle Ressourcendateien im Ready -Status befinden, wird Callback2 ausgeführt.
// In diesem Fall werden wir auch kreisförmige Abhängigkeiten herstellen und auf dem entladenen JS geladen werden
Module.Prototype._load = Funktion (URIS, Callback2) {
//util.filter: Lassen Sie alle Datenmitglieder die angegebene Funktion jeweils ausführen und ein neues Array zurückgeben. Das Array ist ein Mitglied, das nach Ausführung eines Rückrufs vom ursprünglichen Array -Mitglied true zurückgibt.
// Unloadeduris ist eine Reihe von Modulen, die nicht zusammengestellt werden
var unloadeduris = util.filter (URIS, Funktion (URI) {
// Gibt ein Mitglied zurück, dessen Ausführungsfunktion den Booleschen Wert triff
// Wenn der Status.Ready -Wert 4 beträgt, wenn er weniger als vier ist, ist es möglich, dass er abgerufen und heruntergeladen wird.
return Uri && (! CachedModules [uri] ||
CachedModules [URI] .Status <Status.Ready)
});
// Wenn alle Module in URIs fertig sind, führen Sie den Rückruf aus und beenden Sie die Funktionsbehörde (diesmal wird die Methode des Moduls aufgerufen).
var länge = unloadeduris.länge
if (Länge === 0) {callback2 () return}
// die Anzahl der nicht geladenen Module
var bleibt = Länge
// Schließungen erstellen und versuchen Sie, nicht beladene Module zu laden
für (var i = 0; i <länge; i ++) {
(Funktion (uri) {
// beurteilen
var modul = cachedmodules [uri] ||
(CachedModules [URI] = neues Modul (URI, Status.Fetching)))
// Wenn der Zustandswert des Moduls größer oder gleich 2 ist, bedeutet dies, dass das Modul heruntergeladen wurde und bereits lokal existiert. Zu diesem Zeitpunkt wird aufgeholt () ausgeführt
// Ansonsten wird Fetch (URI, Oncanted) aufgerufen, um zu versuchen, die Ressourcendatei herunterzuladen. Die Onload wird nach dem Herunterladen der Ressourcendatei ausgelöst und die aufgerufene Methode wird in der Onload ausgeführt.
modul.status> = status.aved? aufgeholt (): Fetch (URI, aufgeholt)
Funktion onfected () {
Modul = CachedModules [URI]
// Wenn der Zustandswert des Moduls größer oder gleich dem Status ist.
if (modul.status> = status.saved) {
// GetpuredEpendenzen: Holen Sie sich ein Abhängigkeitsarray ohne kreisförmige Abhängigkeiten
var deps = GetPuredEpendenzen (Modul)
// Wenn das Abhängigkeitsarray nicht leer ist
if (deps.length) {
// Führen Sie die _load () -Methode erneut aus, bis alle Abhängigkeiten geladen sind und der Rückruf nach Abschluss aller Abhängigkeiten ausgeführt wird
Module.Prototype._load (DEPS, function () {
CB (Modul)
})
}
// Wenn das Abhängigkeitsarray leer ist, führen Sie CB (Modul) direkt aus
anders {
CB (Modul)
}
}
// Wenn die Akquisition fehlschlägt, z. B. 404 oder nicht der modularen Spezifikation entspricht
// In diesem Fall wird Modul.status beim Abrufen oder abgerufen
anders {
CB ()
}
}
}) (unloadeduris [i])
}
// CB -Methode - Rufen Sie den Rückruf aus, nachdem Sie alle Module geladen haben
Funktion CB (Modul) {
// Wenn die Speicherinformationen des Moduls vorhanden sind, ändern Sie den Statuswert in den Modulspeicherinformationen und ändern Sie ihn auf Status.ready.
Modul && (modul.status = status.ready)
// Rückrufe werden nur ausgeführt, wenn alle Module geladen werden.
-Remain === 0 && callback2 ()
}
}
}
Hier beträgt die Array-Länge von Unloadeduris 2, ['http: //localhost/test/seajs/a.js'.'http: //localhost/test/seajs/lib/juqery/1.7.2/juqery-debug.js'], also zwei Verschluss mit dem Namen der Js-Paths '].
Nehmen Sie http: //localhost/test/seajs/a.js als Beispiel
Als nächstes: Zunächst wird ein Modul erstellt:
Die Codekopie lautet wie folgt:
CachedModules ('http: //localhost/test/seajs/a.js') = new Modul ('http: //localhost/test/seajs/a.js',1)
modul.status> = status.aved? aufgeholt (): Fetch (URI, aufgeholt)
Da das Modul A zu diesem Zeitpunkt nicht geladen ist, wird als nächstes abgerufen (URI, aufgeholt) ausgeführt, dh fetch ('http: //localhost/test/seajs/a.js'.onteded).
Die Codekopie lautet wie folgt:
Funktionsfetch (URI, aufgerufen) {
// Ersetzen Sie URI durch die neuen Anforderungsadresse gemäß den Regeln in der Karte
var requesturi = util.parsemap (URI)
// Finden Sie zunächst heraus, ob der Requesturi -Datensatz in der erhaltenen Liste enthalten ist
if (abgerufene Liste [Requesturi]) {
// Aktualisieren Sie zu diesem Zeitpunkt die Modulspeicherinformationen des ursprünglichen URI in die von MAP neu definierte Requesturi
CachedModules [Uri] = CachedModules [Requesturi]
// Eingerufene und Rückkehr ausführen, was bedeutet, dass das Modul erfolgreich erhalten wurde
aufgeholt ()
Zurückkehren
}
// Die Speicherinformationen von Requeyuri in der Liste erhalten
if (fetchingList [requesturi]) {
// Fügen Sie den Rückruf hinzu, der dem URI in der Callbacklist entspricht, und kehren Sie zurück
Callbacklist [Requesturi] .push (aufgeholt) // Wenn es abgerufen wird, drücken Sie die aufgeholte Rückrufmethode dieses Moduls in das Array und senden Sie es zurück.
Zurückkehren
}
// Wenn die Module, die Sie erhalten möchten, nicht in der abgerufenen Liste und in der FetchingList angezeigt werden, fügen Sie ihre Informationen in die Anforderungsliste bzw. die Rückrufliste hinzu
FetchingList [Requesturi] = True
Callbacklist [Requesturi] = [Oncanted]
// holt es ab
Module._fetch (
Requesturi,
function () {
abgerufene Liste [Requesturi] = True
// Modulstatus aktualisiert
// Wenn modul.status gleich status.efectching ist, ändern Sie den Modulstatus in abgerufenen
var modul = cachedmodules [URI]
if (module.status === Status.fetching) {
modul.status = status.aved
}
if (fetchingList [requesturi]) {
FetchingList löschen [Requesturi]
}
// Anrufe auf Callbacklist Unified Execution of Callbacks aufgerufen
if (callbacklist [requesturi]) {
util.foreach (callbacklist [requesturi], function (fn) {
fn () // fn ist die onfechierte Methode, die dem Modul a entspricht.
})
Callbacklist löschen [Requesturi]
}
},
config.CharSet
)
}
Als nächstes wird modul._fetch () ausgeführt, und wir rufen die Rückruffunktion hier als Callback3 auf.
Diese Methode soll die LoadJS -Methode aufrufen, um die A.JS -Datei dynamisch herunterzuladen. (Da es a und jQuery gibt, werden zwei neue Skripte erstellt). Hier gibt es eine Frage. Wenn Sie ein Skript für A erstellen und es dem Kopf hinzufügen, werden Sie die JS -Datei herunterladen. In SeaJs wird es jedoch nicht heruntergeladen. Stattdessen warten Sie, bis das Skript für JQuery festgelegt und dem Kopf hinzugefügt wird, bevor Sie es herunterladen (Google Debugger legt einen Haltepunkt fest und zeigt immer wieder das Warten an). Ist das für Mao?
(Empfohlen hier: http://ux.sohu.com/topics/50972D9AE7DE3E752E0081FF. Ich werde hier über zusätzliche Fragen sprechen. Vielleicht wissen Sie, warum wir Tabellen verwenden müssen, um weniger Layout zu verwenden, denn wenn der Tisch wiedergegeben wird, muss das Interviewer. Bevor es angezeigt wird und das DIV so viel analysiert wird.
Nachdem der Download erfolgreich ist, wird er analysiert und ausgeführt, und die Definitionsmethode wird ausgeführt. Hier führen wir zuerst den Modulcode a aus.
Define (ID, DEPs, Funktion () {}) Methodenanalyse
Die Codekopie lautet wie folgt:
// Definition Definition, ID: Modul -ID, DEPS: Modulabhängigkeit, Fabrik
Module._define = function (id, dEPs, fabrik) {
// Abhängigkeiten auflösen // Wenn DEPS kein Array -Typ ist, ist die Fabrik eine Funktion
if (! util.isArray (dEPs) && util.isisfunction (fabrik)) {// Die Funktionsbehörde stimmt regelmäßig mit der Forderungsfolge überein und bildet ein Array, um die Zuordnung an DEPS zurückzugeben
DEPS = util.ParSeDependencies (factory.toString ())
}
// META -Informationen festlegen
var meta = {id: id, Abhängigkeiten: DEPs, Fabrik: Fabrik}
if (document.attachEvent) {
// Holen Sie sich den Knoten des aktuellen Skripts
var script = util.getCurrentscript ()
// Wenn der Skriptknoten existiert
if (script) {
// Erhalten Sie die ursprüngliche URI -Adresse
abgeleitete = util.unparsemap (util.getScriptabSolutesRC (Skript))}
if (! abgeleitet) {
util.log ('versäumt, URI aus interaktivem Skript für:', factory.toString (), 'Warn') abzuleiten.
}
}
.........
}
Define führt zunächst ein Urteil über die Fabrik durch, um festzustellen, ob es sich um eine Funktion handelt (der Grund dafür ist, dass die Definition auch Dateien und Objekte enthalten kann)
Wenn es sich um eine Funktion handelt, wird die Funktion über fabrik.tostring () erhalten, und die Abhängigkeit von A.JS wird regelmäßig abgestimmt, und die Abhängigkeit wird in DEPS gespeichert
Für A.JS ist seine Abhängigkeit B.Js, also ist DEPs ['./b']
Und speichern Sie die Informationen von A.JS var meta = {ID: ID, Abhängigkeiten: DEPs, Fabrik: Fabrik}
Für A.JS meta = {id: und undefined, Abhängigkeiten: ['./b'], Factory: Funktion (xxx) {xxx}}
Im IE 6-9-Browser können Sie den Weg zum Ausführen von JS erhalten. In einem Standardbrowser ist dies jedoch nicht machbar, sodass Sie die Meta -Informationen anonymousmodulemeta = meta zuweisen können.
Dann ladet die On -Load und die Callback -Methode Callback3 wird aufgerufen. Diese Rückrufmethode ändert den Statuswert des aktuellen Rückrufmoduls (A.JS) und setzt ihn auf modul.Status = status.Anted.
Als nächstes wird der Rückruf, der A.JS in der Callback -Warteschlange -Callbacklist entspricht, einheitlich ausgeführt, dh aufgerufen.
Die aufgerufene Methode prüft, ob ein Modul A abhängiges Modul hat. Weil A von B abhängt, führen Sie _load () auf b.js aus, von dem Modul A abhängt.
Das B -Modul wird heruntergeladen und die JQuery Definitionsmethode wird zuerst ausgeführt. Weil JQuery nach dem Onload -Callback nicht von Modulen abhängt. Aufgerufene Anrufe CB -Methode.
Wenn B im selben Prozess wie A implementiert wird, wird Modul C heruntergeladen. Schließlich wird die C, B, A -Module heruntergeladen und ausgeführt, und nachdem die Onload abgeschlossen ist, wird auch die CB -Methode aufgerufen (zuerst C, dann B, dann C)
Nachdem alle Module fertig sind, wird die Callback2 -Methode aufgerufen.
Schließlich wird der Rückruf zurückgerufen2 und die _compile -Methode der Module A und JQuery wird ausgeführt:
Kompilieren Sie zunächst das A.JS -Modul und führen Sie die Funktion des Moduls aus. Da A benötigt (B.Js) darin benötigt wird, wird die Funktion des Moduls b ausgeführt.
Die Funktion des Moduls A startet die Ausführung
Die Funktion des Moduls B beginnt auszuführen
Die Funktion des Moduls C beginnt die Ausführung
Die Funktionsausführung von Modul C wurde abgeschlossen
Die Funktionsausführung von Modul B wurde abgeschlossen
Die Funktionsausführung des Moduls A wurde abgeschlossen
Führen Sie schließlich die Funktion von JQuery aus.
Führen Sie nach der Kompilierung Callback1 aus und Sie können A- und JQuery -Objekte verwenden.
PS: Die SeaJS -Version wurde aktualisiert und es gibt jetzt keine Methode. (Jeder geht es selbst, ich möchte es auch sehen)
Sprechen wir über den Prozess des SeaJS -Moduls Compilation_Compile.
Erstens die Zusammenstellung von A.Js
Die Codekopie lautet wie folgt:
Module.prototype._compile = function () {
126 var modul = this
127 // Wenn das Modul kompiliert wurde, geben Sie Modul.exports direkt zurück
128 if (modul.status === status.compiled) {
129 Rückgabemodul.exports
130}
133 // 1. Die Moduldatei ist 404.
134 // 2. Die Moduldatei ist nicht mit gültigem Modulformat geschrieben.
135 // 3. Andere Fehlerfälle.
136 // Hier sind einige Ausnahmen, mit denen man sich befassen muss, und dann direkt Null zurückgeben
137 if (modul.status <status.saved &&! HasModifiers (Modul)) {
138 Return Null
139}
140 // Ändern Sie den Modulstatus in das Kompilieren, was bedeutet, dass das Modul zusammengestellt wird
141 modul.status = status.comPiling
142
143 // Die interne Verwendung des Modul
144 Funktion erfordern (id) {
145 // Pfad den Pfad des Moduls nach ID
146 var uri = resolve (id, modul.uri)
147 // Module aus dem Modul -Cache abrufen (Beachten Sie, dass die Abhängigkeiten des Submoduls als Hauptmodul heruntergeladen wurden)
148 var child = cachedmodules [URI]
149
150 // kehren Sie einfach NULL zurück, wenn URI ungültig ist.
151 // Wenn das Kind leer ist, kann es nur bedeuten, dass der Parameter falsch gefüllt ist, und dann direkt Null zurückgeben
152 if (! Kind) {
153 Rückkehr NULL
154}
155
156 // vermeidet kreisförmige Anrufe.
157 // Wenn der Status des Submoduls status.comPiling ist, kehren Sie unter child.exports direkt zurück, um eine wiederholte Kompilierung von Modulen aufgrund kreisförmiger Abhängigkeiten zu vermeiden.
158 if (child.status === Status.comPiling) {
159 Return Child.exports
160}
161 // Zeigen Sie auf das Modul, das das aktuelle Modul während der Initialisierung aufruft. Basierend auf dieser Eigenschaft können Sie den Anrufstack erhalten, wenn das Modul initialisiert wird.
162 Child.Parent = Modul
163 // RECHTE DAS MODULE.EXPORTS VON COLLECTED KINDER
164 Return Child._Compile ()
165}
166 // Innen verwendet, um das Modul asynchron zu laden und den angegebenen Rückruf nach Abschluss des Ladens auszuführen.
167 fordert.async = Funktion (IDS, Rückruf) {
168 Module._use (IDS, Rückruf)
169}
170 // Verwenden Sie den Pfadauflösungsmechanismus im Modulsystem, um den Modulpfad zu analysieren und zurückzugeben. Diese Funktion lädt das Modul nicht und gibt nur den analysierten absoluten Pfad zurück.
171 erfordern.resolve = function (id) {
172 Return Resolve (ID, Modul.uri)
173}
174 // über diese Eigenschaft können Sie alle vom Modulsystem geladenen Module anzeigen.
175 // In einigen Fällen können Sie, wenn Sie ein Modul neu laden müssen, das URI des Moduls abrufen und seine Informationen per Löschen löschen.Cache [URI]. Dies wird bei der nächsten Verwendung erneut anerkannt.
176 erfordern.cache = cachedmodules
177
178 // ist eine Methode, um Schnittstellen zu erhalten, die von anderen Modulen bereitgestellt werden.
179 Modul.Require = erfordern
180 // Exporte sind ein Objekt, das Außenschnittstellen Modulschnittstellen bereitstellt.
181 module.exports = {}
182 var factory = modul.factory
183
184 // Wenn Fabrik eine Funktion ist, repräsentiert es den Konstruktor des Moduls. Durch die Ausführung dieser Methode können Sie die vom Modul bereitgestellte Schnittstelle nach außen erhalten.
185 if (util.is isisction (fabrik)) {
186 compilestack.push (Modul)
187 RuninModuleContext (Factory, Modul)
188 compilestack.pop ()
189}
190 // Wenn die Fabrik ein nicht funktionsfähiges Typ ist, wie z. B. ein Objekt, eine Zeichenfolge usw., ist die Schnittstelle, die das Modul darstellt, das Objekt, eine Zeichenfolge und andere Werte.
191 // zum Beispiel: Define ({"foo": "bar"});
192 // zum Beispiel: definiere ('Ich bin eine Vorlage. Mein Name ist {{name}}.');
193 sonst wenn (fabrik! == undefiniert) {
194 Module.exports = Fabrik
195}
196
197 // Ändern Sie den Modulstatus in kompiliert, was bedeutet, dass das Modul zusammengestellt wurde
198 modul.status = status.compiled
199 // Modul -Schnittstellenmodifikation über SeaJs.modify () ausführen ()
200 ExecModifiers (Modul)
201 return module.exports
202}
Die Codekopie lautet wie folgt:
if (util.isisfunction (factory)) {
186 compilestack.push (Modul)
187 RuninModuleContext (Factory, Modul)
188 compilestack.pop ()
189}
Hier ist die Initialisierung von Modul.export. RuninModuleContext -Methode:
Die Codekopie lautet wie folgt:
// Führen Sie den Modulcode gemäß dem Modulkontext aus
489 Funktion RuninModuleContext (FN, Modul) {
490 // In zwei Parameter über das Modul und das Modul selbst übergeben
491 // Exporte werden verwendet, um Schnittstellen freizulegen
492 // Erforderlich wird verwendet, um abhängige Module (synchron) (kompilieren) zu erhalten
493 var ret = fn (modul.require, modul.exports, modul)
494 // unterstützt die Schnittstellenform der Exposition gegenüber Rückgabewert, wie z. B.:
495 // return {
496 // fn1: xx
497 //, fn2: xx
498 // ...
499 //}
500 if (ret! == undefiniert) {
501 modul.exports = ret
502}
503}
Führen Sie die Funktionsmethode in A.Js aus, und dann wird var b = fordert ("B.Js") aufgerufen.
Die Forderungsmethode gibt den Rückgabewert der Kompilierungsmethode von B zurück und es gibt VaR C = Erforderliche ('C.JS') im B -Modul.
Zu diesem Zeitpunkt wird die Kompilierungsmethode von C aufgerufen und dann die Funktion von C aufgerufen. Wenn das Objekt in C freigelegt werden soll oder das Rückgabeobjekt C zurückgegeben wird, werden die Exporte des Moduls C exportiert = c. Oder direkt modul.export = c; Kurz gesagt, das Modul C.Export = C wird am Ende zurückgegeben; Also var C = Modul C.Export = c. In Modul B können Sie Variable C verwenden, um die Methoden und Eigenschaften des C -Objekts in Modul c aufzurufen.
In Analogie kann das Modul A schließlich die Eigenschaften und Methoden des B -Objekts im Modul b aufrufen.
Unabhängig davon, welches Modul, solange Sie Modul verwenden.export = xx -Modul, können andere Module benötigt werden ("xx -Modul"), um verschiedene Methoden im XX -Modul aufzurufen.
Der endgültige Modulzustand wird modul.status = status.compiled.
Die Codekopie lautet wie folgt:
Module.Prototype._use = Funktion (IDS, Rückruf) {
var uris = resolve (ids, this.uri); // Resolution ['./a''jQuery']
this._load (uris, function () {// rufen Sie die Adresse des analysierten A- und JQuery -Moduls [url1, url2] auf und rufen Sie die _load -Methode auf.
//util.map: Lassen Sie alle Datenmitglieder die angegebene Funktion gleichzeitig ausführen und geben Sie ein neues Array zurück, was das Ergebnis der Callback -Ausführung des ursprünglichen Array -Mitglieds ist
var args = util.map (URIS, Funktion (URI) {
Uri zurückgeben? CachedModules [uri] ._ compile (): null; // Wenn URL existiert, rufen Sie die _compile -Methode auf.
})
if (callback) {callback.apply (null, args)}
})
}
Zu diesem Zeitpunkt args = [Modul A.Export, Modul jQuery.export];
Die Codekopie lautet wie folgt:
SeaJs.use (['./ a', 'jQuery'], Funktion (a, $) {
var num = aa;
$ ('#J_a'). Text (num);
})
Zu diesem Zeitpunkt sind A und $ in der Funktion das Modul A.export und Modul jQuery.export.
Da ich jetzt JQuery Source Code und Jquery Framework Design studiere, teile ich einige Erfahrungen mit:
JQuery Quellcode, ich habe eine Menge Analysen online gelesen, aber ich kann ihn nicht mehr lesen, wenn ich ihn mir ansehe. Es ist nicht sehr aussagekräftig, daher empfehle ich die JQuery -Quellcode -Analyse von Miaowei Classroom.
Das JavaScript-Framework-Design von situ Zhengmei ist schwierig, aber nach sorgfältigem Lesen werden Sie ein Senior-Front-End-Ingenieur.
Ich schlage vor, das Sea.js von Yu Bo zu lernen und zu verwenden, schließlich wird es von den Chinesen selbst gemacht. Die neuen Projekte oder Rekonstruktionen unseres Unternehmens werden mit SeaJs durchgeführt.
Als nächstes kommt der Quellcode -intensive Lesen modularer Händler und MVC -Rückgrat oder MVVM -Angular. Hier hoffe ich, dass mir jemand Vorschläge gibt, welche Bücher, Websites und Videos schnell lernen können.