1. Namespace :
Der Namespace in JS wird mit den Eigenschaften des Objekts erweitert. Beispielsweise definiert ein Benutzer ein A -Objekt mit B -Attributen und C -Attributen unter dem A -Objekt, und B -Attribute und C -Attribute sind Objekte. Daher kann A = {B: {}, C: {}}, der Benutzer die gleiche Methode und das gleiche Attribut im B -Objekt und im C -Objekt definieren. Daher gehören B und C zu verschiedenen Namespaces. Wenn wir die Methoden in den B- und C -Objekten aufrufen, können wir sie über ablike () und aclike () aufrufen. Natürlich ist A eine Eigenschaft im Fensterobjekt.
Es gibt jedoch eine Situation, zum Beispiel: Die Seite boke.js führt jQuery.js und prototype.js vor (sie werden dem Fensterobjekt $ Attribute hinzufügen) und ein Konflikt tritt auf.
Daher gibt es Noconflict () in jQuery.js, um Konflikte zu bewältigen. Ausführungsprozess: Die Seite führt zuerst Prototyp ein. Zu diesem Zeitpunkt belegt der Prototyp das $ -Triput des Fensters. Wenn dann JQuery eingeführt wird, speichert JQuery das $ -Triput des vorherigen Fensters in _ $ und verwendet dann das $ Attribut für sich selbst. Zu diesem Zeitpunkt können Sie die JQuery -Methode über $ aufrufen. Wenn Sie JQuery nicht verwenden müssen, aber Prototypen verwenden möchten, können Sie $ .noconflict () aufrufen, und dann wird $ in ein Prototypobjekt wiederhergestellt. Zu diesem Zeitpunkt können Sie die Prototypmethode über $ verwenden.
Die Codekopie lautet wie folgt:
var _ $ = Fenster. $, _jQuery = window.jQuery;
Noconflict: Funktion (tief) {
Fenster. $ = _ $;
if (tief) window.jQuery = _jQuery;
Rückkehr JQuery; // Rückgabewert, Sie können anderen variablen Namen wie Chaojidan Wert zuweisen, damit Sie Methoden in JQuery über Chaojidan aufrufen können.
}
2. Objekterweiterung :
Wenn das Namespace -Objekt hat, müssen wir die Funktion erweitern. Zum Beispiel: Ich muss alle Eigenschaften und Methoden von Objekt A in Objekt B kopieren. Ich muss keinen Code einzeln in B -Objekten schreiben.
Die Codekopie lautet wie folgt:
Funktionsmix (Ziel, Quelle) {
var args = [] .lice.call (Argumente), i = 1,
iscover = typeof args [args.Length-1] == "boolean"? args.pop (): wahr; // Nicht geschrieben, Standard ist wahr, Standard wird überschrieben.
if (args.length == 1) {
target =! this.window? Das:{};
// Wenn es nur einen Objektparameter gibt, erweitern Sie dieses Objekt. Zum Beispiel: Ich rufe Mix (b) im Kontext von Objekt A auf, dann ist dies A zu diesem Zeitpunkt. Daher werden die Eigenschaften und Methoden von B zu Objekt A hinzugefügt. Wenn Mix (b) in Fenster aufgerufen wird, werden die Eigenschaften und Methoden im B -Objekt zu einem leeren Objekt hinzugefügt und dieses leere Objekt zurückgegeben, um Überschreibungen und Methoden desselben gleichnamigen Methoden desselben Namens im Fensterobjekt zu verhindern. (Nur Fensterobjekte haben Fenstereigenschaften)
i = 0;
}
while ((Source = args [i ++])) {
für (Schlüssel in Quelle) {
if (iscover ||! (Schlüssel im Ziel)) // Wenn überschreibt, weisen Sie den Wert direkt zu. Wenn nicht überschreiben, bestimmen Sie zunächst, ob der Schlüssel im Zielobjekt vorhanden ist. Wenn es existiert, wird kein Wert zugewiesen.
{
Ziel [Schlüssel] = Quelle [Schlüssel];
}
}
}
Ziel zurückgeben;
}
Interviewer aus großen Unternehmen prüfen gerne die Arrays. Sie können es überprüfen. Jedes Element im Array kann ein Objekt sein, und selbst wenn Objekt A und Objekt B die gleichen Eigenschaften und Methoden haben, sind sie nicht gleich. Saiten und Zahlen wie 123 und "123" finden Sie vollständig durch Online -Suche.
3. Arrayisierung :
Es gibt viele Klassenarray -Objekte im Browser, Argumente, document.forms, document.links, form.elements, document.getElementsByTagName, Childnodes usw. (htmlcollection, nodelist).
Es gibt auch ein benutzerdefiniertes Objekt mit einem besonderen Schreibstil
Die Codekopie lautet wie folgt:
var arraylike = {
0: "a",,
1: "B",
Länge: 2
}
Dieses Objekt wird als JQuery -Objekt geschrieben.
Wir müssen das oben genannte Klassenarray-Objekt in ein Array-Objekt umwandeln.
[] .Slice.Call -Methode kann gelöst werden. Die HTMLCollection und die Nodelist in der alten Version von IE sind jedoch keine Unterklassen des Objekts, und die [] .Slice.Call -Methode kann nicht verwendet werden.
Daher können wir eine Slice -Methode überschreiben.
Die Codekopie lautet wie folgt:
A.slice = window.dispatchEvent? Funktion (Knoten, Start, Ende) {return [] .lice.call (Knoten, Start, Ende); }
// Wenn das Fenster über die Eigenschaft zur DispatchEvent verfügt, beweist es, dass es die [].
: Funktion (Knoten, Start, Ende) {
var ret = [], n = Knoten.Length;
if (end == undefined || typeof end === "number" && isfinite (end)) {// && Priorität ist höher als ||
Start = ParseInt (Start, 10) || 0; // Wenn Start nicht existiert oder keine Zahl ist, wird der Wert 0 zugewiesen.
Ende = Ende == undefiniert? N: Parseint (Ende, 10); // Wenn das Ende nicht existiert, ist der Wert n.
if (start <0) start + = n;
if (Ende <0) Ende + = n;
if (Ende> n) end = n;
für (var i = start; i <end; i ++) {
ret [i-start] = Knoten [i]; // niedrige Version IE verwendet das Array -Zuweisungsformular
}
}
Rückkehr;
}
4. Typurteil :
Es gibt fünf einfache Datentypen von JS: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING.
Es gibt auch komplexe Datentypen: Objekt, Funktion, Regexp, Datum, benutzerdefinierte Objekte wie: Person usw.
TypeOF wird im Allgemeinen verwendet, um Boolesche, Nummer, Zeichenfolge und Instanz zu beurteilen, um Objekttypen zu beurteilen. Aber sie alle haben Mängel. Zum Beispiel: Die Array -Instanz im FIREME ist keine Instanz von Array im übergeordneten Fenster. Die Anrufinstanz wird falsch zurückgegeben. (Diese Frage wurde während der Rekrutierung von Campus 360 gestellt). Typof New Boolean (True) // "Objekt", wickeln Sie das Objekt ein. Boolesche, Nummer und Zeichenfolge sind drei Arten von Verpackungsobjekten, die in JS Advanced Program Programing erörtert werden.
Viele Personen verwenden Typendokument. Alle, um festzustellen, ob es sich um dh. In der Tat ist das sehr gefährlich. Da Google und Firefox diese Eigenschaft ebenfalls mögen, erfolgt diese Situation unter Google Chrome: Typeof document.all // undefiniert jedoch, document.all // htmlallCollection, mithilfe von Typof, um zu bestimmen, dass sie nicht definiert ist, aber dieser Eigenschaftswert kann gelesen werden.
Jetzt können Sie jedoch die Methode von Object.Prototype.toString.call verwenden, um den Typ zu bestimmen. Diese Methode kann [[Klasse]] innerhalb des Objekts direkt ausgeben. IE8 und unterhalb der Fensterobjekte können diese Methode jedoch nicht verwenden. Sie können Window == Dokument // True Document == Fenster // False IE6,7,8 verwenden.
Nodetype (1: Element 2: Attribut 3: Text Text 9: Dokument)
Methoden zur Beurteilung von Typen in JQuery:
Die Codekopie lautet wie folgt:
class2Type = {}
JQuery.each ("Boolesche Zahlen -String -Funktion Array Datum Regexp -Objekt" .Split (""), Funktion (i, Name) {
class2Type ["[Objekt" + name + "]"] = name.tolowerCase ();
// class2Type = {"[Objekt boolean]": boolean, "[Objektnummer]": Nummer, "[Objektstring]": String, "[Objektfunktion]": Funktion, "[Objektarray]": Array ......}
});
jQuery.type = function (obj) {// wenn obj null, undefiniert ist, usw., die Zeichenfolge "null", "undefiniert". Wenn nicht, rufen Sie die ToString -Methode an, beurteilen Sie, ob sie aufgerufen werden kann, und geben Sie das Objekt zurück (Fenster, DOM und andere ActiveXObject -Objekte in der unteren Version von IE).
Return obj == NULL? String (obj): class2Type [toString.call (obj)] || "Objekt";
}
5.Domready
Beim Betrieb des DOM -Knotens mit JS muss die Seite den DOM -Baum erstellen. Daher wird die Methode für das Fenster.onload normalerweise verwendet. Die Onload -Methode wird jedoch nicht ausgeführt, nachdem alle Ressourcen geladen wurden. Um die Seite schneller auf Benutzeroperationen zu reagieren, müssen wir nur JS -Operationen verwenden, nachdem der DOM -Baum erstellt wurde. Anstatt darauf zu warten, dass alle Ressourcen geladen werden (Bild, Flash).
Daher tritt das Domcontent -Ereignis auf, das nach dem Erstellen des DOM -Baumes ausgelöst wird. Die alte Version von IE unterstützt sie jedoch nicht, also gibt es einen Hack.
Die Codekopie lautet wie folgt:
if (document.readyState === "complete") {// Falls die JS -Datei nur nach dem Laden des DOM -Dokuments geladen wird. Zu diesem Zeitpunkt wird die FN -Methode (die Methode, die Sie ausführen möchten) durch dieses Urteil ausgeführt. Da nach dem Laden des Dokuments der Wert des Dokuments.ReadyState abgeschlossen ist
setTimeout (fn); // Asynchron ausführen, lassen Sie den Code dahinter zuerst ausgeführt. Dies ist die Verwendung in JQuery, Sie müssen es nicht verstehen.
}
sonst if (document.adDeVentListener) {// Unterstützung des Domcontent -Ereignisses unterstützen
document.adDeVentListener ("DomContentled", fn, false); // Blasen
window.addeventListener ("lad", fn, false); // falls die JS -Datei nach dem Erstellen des DOM -Baumes geladen wird. Dieses Mal wird das Domcontent -Ereignis nicht ausgelöst (der Auslöser wurde abgeschlossen), es wird nur das Lastereignis ausgelöst
}
anders{
document.attachEvent ("onReadyStatechange", function () {// für die Sicherheit von IFrames unter IE wird die Onload -Ausführung Priorität gegeben, und manchmal nicht.
if (document.readystate === "complete") {
fn ();
}
});
window.attachEvent ("Onload", fn); // Es wird immer eine Rolle spielen, falls andere Hörereignisse nicht abgerufen werden, daher kann zumindest die FN -Methode durch das Onload -Ereignis ausgelöst werden.
var top = false; // Sehen Sie, ob es sich im Iframe befindet
Versuchen Sie {// window.frameElement ist das Iframe- oder Frame -Objekt, das diese Seite enthält. Wenn nicht, ist es null.
top = window.frameElement == null && document.documentElement;
} catch (e) {}
if (top && top.doscroll) {// wenn es keinen Iframe gibt, und es ist dh dh
(Funktion doscrollcheck () {
versuchen{
Top.Doscroll ("links"); // In IE können Sie die DOSCROLL -Methode von HTML aufrufen
} catch (e) {
return setTimeout (doscrollcheck, 50); // Wenn es noch nicht gebaut wurde, hören Sie weiter zu
}
fn ();
})
}
}
Die FN -Methode muss das Entfernen aller Bindungsereignisse enthalten.
Natürlich kann der IE auch Skript -Defer -Hack verwenden. Das Prinzip ist: Das von Defer angegebene Skript wird erst nach Erstellen des DOM -Baumes ausgeführt. Dies erfordert jedoch zusätzliche JS -Dateien und wird in separaten Bibliotheken selten verwendet.
Nutzungsprinzip: Fügen Sie dem Dokument Skript -Tags hinzu und verwenden Sie script.src = "xxx.js", um das OnReadyStatechange -Ereignis von Skript zu hören. Wenn dies.ReadyState == "Complete", wird die FN -Methode ausgeführt.
Mit anderen Worten, erst nachdem das DOM erstellt wurde, wird xxx.js ausgeführt, und es wird abgeschlossen.
Die oben genannten sind die Leseboten für das erste Kapitel des JavaScript -Framework -Designs. Der Inhalt ist relativ einfach, was es jedem erleichtert, den grundlegenden Inhalt dieses Kapitels besser zu verstehen.