Das Lesen von Anmerkungen zum JavaScript-Framework-Design ist der Ausgangspunkt für module_javascript-Kenntnisse

1. Namensraum :

Der Namespace in js wird mithilfe der Eigenschaften von Objekten erweitert. Beispielsweise definiert der Benutzer ein A-Objekt, es gibt B-Attribute und C-Attribute. Gleichzeitig sind die B-Attribute und C-Attribute Objekte. Daher ist A={B:{},C:{}}, dann kann der Benutzer die gleichen Methoden und Eigenschaften im B-Objekt und im C-Objekt definieren. Daher gehören B und C zu unterschiedlichen Namensräumen. Wenn wir Methoden in den Objekten B und C aufrufen, können wir sie über A.B.like() und A.C.like() aufrufen. Natürlich gehört A zu den Eigenschaften im Fensterobjekt.

Aber es gibt eine Situation, zum Beispiel: Die Seite „boke.jsp“ führt jquery.js und „prototyp.js“ ein (sie fügen dem Fensterobjekt das Attribut „$“ hinzu), dann tritt ein Konflikt auf.

Daher gibt es in jquery.js noConflict(), um Konflikte zu behandeln. Ausführungsprozess: Die Seite führt zunächst den Prototyp ein. Zu diesem Zeitpunkt belegt der Prototyp das $-Attribut des Fensters. Wenn jquery dann eingeführt wird, speichert jquery das $-Attribut des vorherigen Fensters und verwendet dann das $-Attribut selbst. Zu diesem Zeitpunkt können Sie die JQuery-Methode über $ aufrufen. Wenn Sie jquery jetzt nicht verwenden müssen, aber Prototypen verwenden möchten, können Sie $.noConflict() aufrufen, dann wird $ im Prototypobjekt wiederhergestellt. Zu diesem Zeitpunkt können Sie die Prototyp-Methode über $ verwenden.

Code kopieren Der Code lautet wie folgt:

var _$ = window.$, _jQuery= window.jQuery; noConflict:function(deep){
                Fenster.$ = _$;
   if(deep) window.jQuery = _jQuery;
                                    return jQuery;
}

2. Objekterweiterung :

Da wir nun das Namespace-Objekt haben, müssen wir die Funktionalität erweitern. Beispiel: Ich muss alle Eigenschaften und Methoden von Objekt A auf Objekt B kopieren. Ich muss den Code nicht einzeln in B-Objekte schreiben.

Code kopieren Der Code lautet wie folgt:

Funktionsmix(Ziel, Quelle){
var args = [].slice.call(arguments),i=1,
IScover = Typeof ARGS [ARGS.Length-] == "Boolean"? Args.pop (): True; // Nicht schreiben, standardmäßig auf true, standardmäßig abgedeckt.
if(args.length == 1){                                            target = !this.window? this:{};
//Wenn nur ein Objektparameter vorhanden ist, erweitern Sie dieses Objekt. Beispiel: Wenn ich mix(B) im Kontext von Objekt A aufrufe, dann ist dies A, sodass die Eigenschaften und Methoden von B zu Objekt A hinzugefügt werden. Wenn jedoch mix(B) im Fenster aufgerufen wird, werden die Eigenschaften und Methoden im B-Objekt einem leeren Objekt hinzugefügt und das leere Objekt zurückgegeben, um ein Überschreiben der gleichnamigen Eigenschaften und Methoden im Fensterobjekt zu verhindern. (Nur das Fensterobjekt verfügt über das Fensterattribut)
i =0;
}
​while((source = args[i ])){
　　for(Quelle eingeben){
Wenn (iSCOVER ||! (Schlüssel im Ziel) // Wenn es abgedeckt ist, wird es direkt zugewiesen. Wenn es nicht abgedeckt ist, stellen Sie zunächst fest, ob sich der Schlüssel im Zielobjekt befindet. Wenn er vorhanden ist, wird er nicht zugewiesen Wert
　　  {
　　　　　target[key] = source[key];
                      }
           }
}
Ziel zurückgeben;
}

Interviewer in großen Unternehmen fragen gerne nach der Duplikatprüfung von Arrays. Sie können es sich ansehen. Jedes Element im Array kann ein Objekt sein, und obwohl Objekt A und Objekt B dieselben Eigenschaften und Methoden haben, sind sie es nicht gleich. Zeichenfolgen und Zahlen wie 123 und „123“ usw. können Sie durch eine Online-Suche nach einer vollständigen Methode finden.

3. Arrayisierung

: Unter dem Browser befinden sich viele Array-ähnliche Objekte, z. B. Argumente, document.forms, document.links, form.elements, document.getElementsByTagName, childNodes usw. (HTMLCollection, NodeList).

Es gibt auch ein benutzerdefiniertes Objekt, das auf besondere Weise geschrieben wurde

Code kopieren Der Code lautet wie folgt:

var arrayLike = {
​​ 0:"a",
1:"b",
Länge:2
}

Die Art und Weise, wie dieses Objekt geschrieben wird, entspricht der Art und Weise, wie jQuery-Objekte geschrieben werden.

Wir müssen das obige Array-ähnliche Objekt in ein Array-Objekt konvertieren.

[].slice.call-Methode kann dieses Problem lösen. Allerdings sind HTMLCollection und NodeList unter der alten Version von IE keine Unterklassen von Object und die Methode [].slice.call kann nicht verwendet werden.

So können wir eine Slice-Methode überschreiben.

Code kopieren Der Code lautet wie folgt:

A.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end); //Wenn das Fenster über das Attribut „dispatchEvent“ verfügt, beweist es, dass es die Methode [].slice.call und die Fähigkeitserkennung unterstützt.
:function(nodes,start,end){
                      var ret = [],n=nodes.length;
​​​​ Start = PARSEINT (Start, 10) ||. 0; // Wenn der Start nicht existiert oder keine Zahl ist, wird ihm 0 zugewiesen.
                                                              end = end == undefiniert ? 　　　　　if(start < 0) 　　 start = n;
　　　　if(end<0) end = n;
　　　　if(end>n) end = n;
　　　　　for(var i = start;i RET [I-Start] = NODES [i]; // Die niedrige Version des IE verwendet die Form der Array-Zuweisung
                                                                                                                                                                                                                                                  　　　　}
　　　　return ret;
}




4. Typurteil

:

　Die fünf einfachen Datentypen von js sind: null, undefiniert, boolesch, Zahl und Zeichenfolge. Es gibt auch komplexe Datentypen: Objekt, Funktion, RegExp, Datum, benutzerdefinierte Objekte wie Person usw.

Typeof wird im Allgemeinen verwendet, um Boolesche Werte, Zahlen und Zeichenfolgen zu bestimmen, und Instanceof wird im Allgemeinen verwendet, um den Objekttyp zu bestimmen. Aber sie alle haben Mängel. Beispiel: Die Array-Instanz in Firame ist nicht die Array-Instanz des übergeordneten Fensters und der Aufruf von „instanceof“ gibt „false“ zurück. (Diese Frage wurde während der Rekrutierung der 360-Schule gestellt). typeof new Boolean(true) // „object“, Verpackungsobjekt. Es gibt drei Verpackungsobjekte: Boolescher Wert, Zahl und Zeichenfolge, die in der erweiterten Programmierung von js erläutert werden.

Viele Leute verwenden typeof document.all, um festzustellen, ob es sich um IE handelt. Tatsächlich ist dies sehr gefährlich, da Google und Firefox dieses Attribut ebenfalls mögen, sodass diese Situation unter Google Chrome auftritt: typeof document.all // undefiniert Allerdings , document.all //HTMLAllCollection, beurteilt nach typeof als undefiniert, aber dieser Attributwert kann gelesen werden.

Aber jetzt können Sie die Methode Object.prototype.toString.call verwenden, um den Typ zu bestimmen. Diese Methode kann die [[Klasse]] direkt im Objekt ausgeben. Diese Methode kann jedoch nicht für Fensterobjekte in IE8 und niedriger verwendet werden. Sie können window == document // true document == window // false unter IE6,7,8 verwenden.

NodeType (1: Element 2: Attribut 3: Text Text 9: Dokument)

Methode zur Bestimmung des Typs in JQuery:

Code kopieren

Der Code lautet wie folgt:

class2type ={}
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){
class2type [ "[object " name "]" ] = name.toLowerCase();
//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object 　　Array ]":array . .....🎜> 　　});
jQuery.type = function(obj){ //Wenn obj null, undefiniert usw. ist, wird die Zeichenfolge „null“, „undefiniert“ zurückgegeben. Wenn nicht, rufen Sie die toString-Methode auf, beurteilen Sie, ob sie aufgerufen werden kann, und geben Sie ein Objekt zurück (ActiveXobject-Objekte wie window und Dom in niedrigeren Versionen von IE)
return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "object";
}

5.domReady

Wenn js Dom-Knoten betreibt, muss die Seite einen Dom-Baum erstellen. Daher wird normalerweise die Methode window.onload verwendet. Die Onload-Methode wird jedoch erst ausgeführt, wenn alle Ressourcen geladen sind. Damit die Seite schneller auf Benutzeroperationen reagiert, müssen wir js-Operationen nur verwenden, nachdem der DOM-Baum erstellt wurde. Sie müssen nicht warten, bis alle Ressourcen geladen sind (Bilder, Flash).

So erscheint das DOMContentLoaded-Ereignis, das nach dem Aufbau des Dom-Baums ausgelöst wird. Aber die alte Version von IE unterstützt es nicht, also gibt es einen Hack.

Code kopieren Der Code lautet wie folgt:

if(document.readyState === "complete"){ //Falls die JS-Datei erst geladen wird, nachdem das Dom-Dokument geladen wurde. Zu diesem Zeitpunkt wird die fn-Methode (die Methode, die Sie ausführen möchten) durch dieses Urteil ausgeführt. Denn nachdem das Dokument geladen wurde, ist der Wert von document.readyState vollständig
            setTimeout(fn);                                                                                                setTimeout(fn); Hier ist die Verwendung in jQuery, Sie müssen sie nicht verstehen.
}
else if(document.addEventListener){//Unterstützt das DOMContentLoaded-Ereignis
              document.addEventListener("DOMContentLoaded",fn,false); // Bubble
window.addEventListener("load",fn,false); //Falls die js-Datei geladen wird, nachdem der DOM-Baum erstellt wurde. Zu diesem Zeitpunkt wird das DOMContentLoaded-Ereignis nicht ausgelöst (es wurde ausgelöst), sondern nur das Ladeereignis
. }
sonst{
document.attachEvent("onreadystatechange",function(){//Für die Iframe-Sicherheit unter IE wird der Onload-Ausführung manchmal Priorität eingeräumt, manchmal nicht.
　　if(document.readyState ==="complete"){
　　　fn();
　　}
});
window.attachEvent("onload",fn); //Es wird immer funktionieren, falls keine anderen Überwachungsereignisse erhalten werden, sodass zumindest die fn-Methode durch das Onload-Ereignis ausgelöst werden kann.
var top = false;//Überprüfen Sie, ob es sich im Iframe befindet
Try{//window.frameElement ist der Iframe oder das 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 kein Iframe vorhanden ist und es sich um IE handelt
(Funktion doScrollCheck(){
                   Versuchen Sie es{
　　　　top.doScroll("left");// Wenn im IE der Dom-Baum erstellt wird, können Sie die doScroll-Methode von HTML aufrufen　　　
　　　　}catch(e){
Return settimeout (doscrollcheck, 50); // Wenn es nicht erstellt wurde, hören Sie weiter auf
                 }
                        fn();
             })
}
}

Die fn-Methode muss das Entfernen aller gebundenen Ereignisse umfassen.

Natürlich kann der IE auch den Skript-Defer-Hack verwenden. Das Prinzip ist: Das Skript mit der angegebenen Verzögerung wird erst ausgeführt, wenn der DOM-Baum erstellt ist. Dies erfordert jedoch das Hinzufügen zusätzlicher js-Dateien, was in einer separaten Bibliothek selten verwendet wird.

Verwendungsprinzip: Fügen Sie dem Dokument ein Skript-Tag hinzu und verwenden Sie script.src = „xxx.js“, um das onreadystatechange-Ereignis des Skripts abzuhören. Wenn this.readyState == „complete“, führen Sie die fn-Methode aus.

Das heißt, nachdem das DOM erstellt wurde, wird xxx.js ausgeführt und sein this.readyState wird abgeschlossen.

Das Obige sind die Lesehinweise für das erste Kapitel des JavaScript-Framework-Designs. Der Inhalt ist relativ prägnant, damit jeder den grundlegenden Inhalt dieses Kapitels besser verstehen kann.