Fünf nützliche Funktionen, die in JavaScript fehlen

Die Kernfunktionen von JavaScript werden ständig verbessert, und viele neue Klassen und Funktionen wurden hinzugefügt, um die Arbeit der Programmierer zu unterstützen. Einige grundlegende praktische Funktionen fehlen jedoch immer noch und müssen mit Bibliotheken wie JQuery, Prototyp und Mootools implementiert werden. Obwohl diese Tools großartig sind, scheint es in einigen Fällen ein bisschen umständlich zu sein. In diesem Artikel werden fünf praktische Funktionen eingeführt, von denen ich denke, dass JavaScript eingebaut werden sollte.

Schlüsselpunkte:

• JavaScript fehlen einige grundlegende praktische Funktionen, die normalerweise mit Bibliotheken wie JQuery, Prototyp und Mootools implementiert werden müssen. Bei einigen Anforderungen ist die Verwendung dieser Bibliotheken jedoch zu umständlich.
• getElementsByClassName() Funktionen werden nicht von allen Versionen von Internet Explorer unterstützt, aber Wrapper -Funktionen können mit älteren Versionen kompatibel sein. Diese Funktion verwendet Klassennamen, um Elemente abzurufen. Dies ist eine Funktion, die HTML5 zuvor nicht hatte.
• extend() Funktionen werden verwendet, um zwei oder mehr Objekte zusammenzuführen, was beim Schreiben von Plugins häufig erforderlich ist. Diese Funktion ist keine native JavaScript -Funktion, kann aber leicht erstellt werden.
• inArray() Funktionen sind nicht in JavaScript nativ, aber Sie können diese Funktion schreiben, um zu testen, ob sich ein Wert in einem Array befindet. Diese Funktion kann mithilfe der Funktion equals() verbessert werden, um eine Übereinstimmung zu erhalten, wenn zwei Objekte die gleichen Eigenschaften und Werte haben.
• toggleClass() Funktion wird verwendet, um den Klassennamen eines Elements hinzuzufügen oder zu löschen, basierend darauf, ob der Klassenname existiert.

getElements byclassName ()

JavaScript ermöglicht die Verwendung von getElementById() -Funktionen, Elemente nach ihrer ID abzurufen, aber vor HTML5 gab es keine native Funktion, die Klassennamen verwenden konnte, um ein oder mehrere Elemente zu erhalten. Die neue Funktion heißt getElementsByClassName(), die in Firefox 3, Opera 9.5, Safari 3.1 und allen Versionen von Google Chrome erhältlich ist. Leider wird es nicht von allen Versionen von Internet Explorer, dem feindlichen Browser Nummer eins für Webdesigner, unterstützt. Nur Internet Explorer 9 unterstützt getElementsByClassName(), daher ist für ältere Versionen eine Wrapper -Funktion erforderlich. Die beste Funktion, die ich gefunden habe, wurde von Robert Nyman geschrieben. Seine Implementierung wurde im Rahmen der MIT -Lizenz veröffentlicht und von Whatwg empfohlen. Es verwendet die native getElementsByClassName() -Methode in Browsern, die sie unterstützen, und fällt dann auf die weniger bekannte document.evaluate() Methode zurück, die älteren Versionen von Firefox (mindestens von Version 1.5) und Opera (mindestens von der Version 9.27) Start) Unterstützung. Wenn alle Methoden fehlschlagen, fällt das Skript auf den rekursiven Traversal des DOM zurück und sammelt Elemente, die dem angegebenen Klassennamen entsprechen. Der Code ist wie folgt:

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

extend ()

Wenn Sie jemals ein Plugin geschrieben haben, hatten Sie mit ziemlicher Sicherheit Probleme, zwei oder mehr Objekte zu verschmelzen. Dies geschieht häufig, wenn Sie einige Standardeinstellungen haben und möchten, dass der Benutzer einige Standardwerte ersetzen kann. Wenn Sie JQuery verwenden, können Sie extend() verwenden, aber da wir über ein natives JavaScript sprechen, ist die schlechte Nachricht, dass es keine nativen Funktionen gibt. Glücklicherweise können Sie es leicht selbst bauen. Das folgende Beispiel zeigt Ihnen, wie Sie Code mit der gleichen Funktionalität wie die JQuery -Methode erstellen. Ich habe unsere extend() -Methode zum Object -Prototyp hinzugefügt, damit alle Objekte dieselbe Methode teilen können.

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

Equals ()

Objektvergleich ist eine sehr häufige Operation. Während dieser Test mit dem strengen Gleichstellungsoperator (===) durchgeführt werden kann, möchten Sie manchmal nicht testen, ob zwei Variablen auf dasselbe Objekt im Speicher verweisen. Stattdessen möchten Sie wissen, ob zwei Objekte die gleichen Eigenschaften und den gleichen Wert haben. Genau das macht der folgende Code. Beachten Sie, dass der folgende Code von mir nicht geschrieben wurde. Auch hier wurde equals() zu Object.prototype hinzugefügt.

<code class="language-javascript">Object.prototype.extend = function() {
  // ... (代码与原文相同) ...
};</code>

inArray ()

JavaScript Es gibt keine native Methode, um zu testen, ob sich ein Wert in einem Array befindet. Wir werden eine Funktion schreiben, die true zurückgibt, wenn der Wert existiert, sonst falsch. Diese Funktion vergleicht einfach den angegebenen Wert mit jedem Element des Arrays. Wie bei den beiden vorherigen Beispielen wird inArray() zu den Prototypeigenschaften der Array -Klasse hinzugefügt.

<code class="language-javascript">Object.prototype.equals = function(x) {
  // ... (代码与原文相同) ...
};</code>

Diese Funktion funktioniert aufgrund ihrer Einfachheit nicht wie erwartet. Während es für primitive Typen wie Zeichenfolgen und Zahlen funktioniert, gibt es nur dann, wenn die Funktion dasselbe Objekt findet, wenn Sie Objekte vergleichen. Um besser zu verstehen, wie es funktioniert, schauen wir uns das folgende Beispiel an.

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

Die verbesserte inArray() -Funktion lautet wie folgt:

<code class="language-javascript">// ... (代码与原文相同) ...</code>

ToggleClass ()

Eine andere Funktion, die häufig in JQuery verwendet wird, ist toggleClass(). Es fügt oder löscht den Klassennamen des Elements basierend darauf, ob der Klassenname existiert. Eine einfache toggleClass() -Version wird unten angezeigt.

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

Die verbesserte toggleClass() -Funktion lautet wie folgt:

<code class="language-javascript">function toggleClass(id, className) {
  // ... (代码与原文相同) ...
}</code>

Schlussfolgerung

Dieser Artikel konzentriert sich auf einige der wichtigsten Funktionen, die meiner Meinung nach in JavaScript fehlen. Natürlich fehlt JavaScript noch etwas anderes, was wir in den nächsten Wochen sehen werden. Aber jetzt möchte ich auf die folgenden Punkte hinweisen:

• Frameworks wie JQuery haben viele nützliche Funktionen, aber sie erhöhen den Overhead. Wenn Sie also nur wenige Funktionen benötigen, verwenden Sie native JavaScript und gruppieren die Funktionen, die Sie benötigen, in eine externe Datei.
• Wenn Sie eine in der neue JavaScript -Version eingeführte Funktion verwenden, löschen Sie sie nicht. Wickeln Sie es mit bedingten Anweisungen ein, um zu testen, ob es unterstützt wird. Wenn Sie nicht unterstützt werden, verwenden Sie Ihren alten Code, wie in getElementsByClassName() gezeigt. Auf diese Weise werden Sie weiterhin Ihren alten Browser unterstützen.
• Funktionen zum Prototyp des Objekts so weit wie möglich hinzufügen, wie in extend() gezeigt. Alle Instanzen teilen die gleiche Methode und können besser abschneiden.
• Verwenden Sie Ihren Code so weit wie möglich, wie in der zweiten Version von toggleClass() gezeigt.

Das Bild bleibt das ursprüngliche Format und die Position unverändert.

Das obige ist der detaillierte Inhalt vonFünf nützliche Funktionen, die in JavaScript fehlen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!