Verlieren Sie die JQuery Bloat

Kernpunkte

• nodelist.js als Alternative zum DOM -Betrieb für JQuery bietet ähnliche Funktionen, ist jedoch kleiner (4K nach Komprimierung) und nutzt Verbesserungen an der nativen Browser -API.

• Im Gegensatz zu JQuery behandelt Nodelist.js Knotenarrays als einzelne Knoten, wodurch sauberer Code und einfachere Nodelist -Objektvorgänge aktiviert werden.

• nodelist.js enthält spezielle Methoden zum Einstellen und Erhalten von Attributen, zum Aufrufen von elementspezifischen Methoden und zum Zugriff auf Knoten in Nodelist sowie das prevObject -attribut, das dem Attribut von JQuery entspricht. owner

• nodelist.js ist mit Mainstream -Browsern nach einer bestimmten Version (Firefox 6, Safari 5.0.5, Chrome 6, dh 9, Opera 11.6) kompatibel und wird automatisch aktualisiert, um neue Methoden/Eigenschaften hinzuzufügen, die vom Browser hinzugefügt wurden.
  p.tip { Hintergrundfarbe: RGBA (128.128.128.0,05); Grenz-Top-Right-Radius: 5px; Grenz-Bottom-Right-Radius: 5px; Polsterung: 15px 20px; Border-Links: 10px Solid RGBA (128.128.128,0,075); }

In den letzten Jahren ist JQuery die De -facto -JavaScript -Bibliothek im Web geworden. Es entfernt viele Cross-Browser-Inkonsistenzen und fügt Kundenskripten eine Ebene populärer syntaktischer Zucker hinzu. Einer seiner Hauptschmerzpunkte in der Abstraktionsverarbeitung sind DOM -Operationen, aber seit dem Aufkommen von JQuery wurde die nativen Browser -APIs erheblich verbessert, und das Konzept von "Sie brauchen wahrscheinlich nicht JQuery".

Die Gründe sind wie folgt:

jQuery enthält viele Funktionen, die Sie nicht benötigen oder nicht verwenden (und daher ist es unnötig, riesig zu sein).
jQuery nimmt für zu viele Menschen zu viele Funktionen an. Im Allgemeinen können kleinere Bibliotheken einige Aufgaben besser ausführen.
In Bezug auf DOM -Operationen kann die Browser -API nun die meisten Funktionen von JQuery ausführen.
Die Browser -API ist jetzt mehr synchronisiert, beispielsweise unter Verwendung von
4. anstelle von addEventListener. attachEvent

Was ist das Problem?

Das Problem ist, dass die Verwendung natives (oder reines) JavaScript für DOM im Vergleich zu JQuery problematisch sein kann. Dies liegt daran, dass Sie redundanterer Code schreiben und den nutzlosen Nodelist des Browsers verarbeiten müssen.

Schauen wir uns zunächst einen Blick auf die Definition von MDN von Nodelist an:

Das

nodelistische Objekt ist eine Sammlung von Knoten, wie sie beispielsweise von den Methoden

und Node.childNodes zurückgegeben werden. document.querySelectorAll

Es gibt manchmal Dynamik -Nodelist (was verwirrend sein kann):

In einigen Fällen ist Nodelist eine dynamische Sammlung, was bedeutet, dass Änderungen in der DOM in der Sammlung widerspiegeln. Zum Beispiel ist

dynamisch. Node.childNodes

Dies kann ein Problem sein, da Sie nicht erkennen können, welche dynamisch und welche statisch sind. Es sei denn, Sie entfernen jeden Knoten vom Nodelist und überprüfen Sie dann, ob der Nodelist leer ist. Wenn Sie leer sind, haben Sie eine dynamische Nodelistin (es ist nur eine schlechte Idee).

Darüber hinaus bietet der Browser keine nützlichen Methoden zur Manipulation dieser Nodelist -Objekte.

Zum Beispiel ist es leider nicht möglich, mit forEach durch Knoten zu schleifen

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

Daher müssen Sie Folgendes tun:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

oder verwenden Sie nur "Hack":

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

Der native Nodelist des Browsers hat nur eine Methode:

. Es gibt einen Knoten von Nodelist per Index zurück. Wenn wir auf den Knoten zugreifen können, wie wir ein Array verwenden (mit item), ist es völlig nutzlos: array[index]

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true</code>

Hier kommt Nodelist.js ins Spiel - so einfach, ein DOM mithilfe einer nativen API von Browser wie JQuery zu bedienen, erfordert jedoch nur eine 4K -Komprimierungsgröße.

Lösung

Ich habe nodelist.js erstellt, weil ich native DOM -APIs verwendet habe, aber sie prägnanter machen möchte, wodurch beim Schreiben von Code eine Menge Redundanz reduziert wird (z. B. für Schleifen).

nodelist.js ist ein Wrapper für die native DOM -API, mit der Sie Arrays von Knoten (d. H. Mein Nodelist) manipulieren können, als wäre es ein einzelner Knoten. Dies gibt Ihnen mehr Funktionen als das native Nodelist -Objekt in Browser.

Wenn Sie dies für gut halten, erhalten Sie eine Kopie von nodelist.js aus dem offiziellen Github -Repository und lesen Sie den Rest dieses Tutorials weiter.

Verwendung:

Auswahl eines DOM -Knotens ist einfach:

// kehre zu meinem Nodelist $$(selector); zurück

Diese Methode wird im Hintergrund

verwendet. querySelectorAll(selector)

Aber wie ist es mit JQuery verglichen?

Ich bin froh, dass Sie diese Frage gestellt haben. Vergleichen wir einheimische JS, JQuery und Nodelist.js.

Angenommen, wir haben drei Tasten:

Ändern wir den Text jeder Schaltfläche auf "Klicken Sie auf mich":

native js:

<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}</code>

jQuery:

<code class="language-javascript">$('button').text('Click Me');</code>

nodelist.js:

<code class="language-javascript">$$('button').textContent = 'Click Me';</code>

Hier sehen wir, dass nodelist.js nodelist effektiv als einzelne Knoten behandeln kann. Das heißt, wir verweisen auf eine Nodelistin und setzen seine

-Mobilie auf "Klicken Sie mich". Nodelist.js führt dies dann für jeden Knoten im Nodelist durch. Sehr klug, oder? textContent

Wenn wir eine Methodenkette (ähnlich wie JQuery) wollen, machen wir Folgendes, was einen Verweis auf Nodelist zurückgibt:

<code class="language-javascript">$$('button').set('textContent', 'Click Me');</code>

Fügen Sie jetzt einen Klickereignis -Listener zu jeder Schaltfläche hinzu:

native js:

<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.add('clicked');
  });
}</code>

jQuery:

<code class="language-javascript">$('button').on('click', function() {
  $(this).addClass('click');
  // 或将 jQuery 与原生混合使用 `classList`：
  this.classList.add('clicked');
});</code>

nodelist.js:

<code class="language-javascript">$$('button').addEventListener('click', function() {
  this.classList.add('clicked');
});</code>

Okay, die

-Methode von JQuery ist also ziemlich gut. Meine Bibliothek verwendet die native DOM -API des Browsers (daher on), aber das hindert uns nicht daran, einen Alias ​​für die Methode zu erstellen: addEventListener

<code class="language-javascript">$$.NL.on = $$.NL.addEventListener;

$$('button').on('click', function() {
  this.classList.add('clicked');
});</code>

Nicht schlecht! Dies zeigt, wie wir unsere eigene Methode hinzufügen:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

nodelist.js Unterstützung für Array -Methoden

nodelist.js erbt von Array.prototype, aber nicht direkt, da einige Methoden geändert wurden, daher ist es sinnvoll, sie mit Nodelist (Array von Knoten) zu verwenden.

push und unshift

Zum Beispiel: push und unshift Methoden können nur Knoten als Parameter annehmen, da ansonsten ein Fehler geworfen wird:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

So werden sowohl push als auch unshift nodelist zurückgegeben, um die Methoden zu ermöglichen, was bedeutet, dass es sich von den nativen Methoden Array#push oder Array#unshift von JavaScript unterscheidet, die irgendetwas akzeptieren und die neue Länge des Arrays zurückgeben. Wenn wir die Länge von Nodelist wünschen, müssen wir nur die Eigenschaft length verwenden.

Diese beiden Methoden wie die native Array -Methode von JavaScript ändern die Nodelist.

concat

concat Die Methode akzeptiert Folgendes als Parameter:

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

concat ist eine rekursive Methode, daher können diese Arrays so tief sein, wie wir es gerne haben würden und werden abgeflacht. Wenn jedoch ein Element im übergebenen Array kein Knoten, Nodelist oder HTMLCollection ist, wirft es einen Fehler auf.

concat Gibt einen neuen Nodelist zurück, genau wie die Array#concat -Methode von JavaScript.

pop, shift, map, slice, filter,

,

Sowohl die Methoden pop shift als auch Array#pop können optionale Parameter annehmen, was angibt, wie viele Knoten sich vom Nodelist zum Pop oder Verschieben haben. Im Gegensatz zu JavaScripts nativem Array#shift oder

taucht letzteres immer auf oder verschiebt ein Element im Array, unabhängig davon, was als Parameter übergeben wird.

map Wenn jeder zugeordnete Wert ein Knoten ist, gibt die

-Methode einen Nodelist zurück.

Die Methoden slice filter und

tun das Gleiche wie in realen Arrays, geben aber einen Nodelist zurück.

Array.prototype Da nodelist.js nicht direkt von Array.prototype erbt, wenn Sie beim Laden von nodelist.js eine Methode hinzufügen, wird sie nicht vererbt.

Sie können die verbleibenden Array -Methoden von nodelist.js hier anzeigen.

spezielle Methode

nodelist.js verfügt über vier eindeutige Methoden und eine Eigenschaft namens owner, was dem prevObject -Merkmal von JQuery entspricht.

get und set Methode:

Einige Elemente haben Attribute, die für Elemente dieses Typs spezifisch sind (z. B. das Attribut href auf dem Anker -Tag). Aus diesem Grund wird $$('a').href undefined zurückkehren - da es sich nicht um eine Eigenschaft handelt, die von jedem Element in Nodelist geerbt wird. So verwenden wir die Methode get, um auf diese Eigenschaften zuzugreifen:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

Die

set Methode kann verwendet werden, um diese Eigenschaften für jedes Element festzulegen:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

set Gibt auch Nodelist zurück, um die Methodenverkettung zu ermöglichen. Wir können es in textContent usw. (beide gleichwertig) verwenden:

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

Wir können auch mehrere Eigenschaften in einem Anruf festlegen:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true</code>

Alle oben genannten Vorgänge können mit jedem Attribut durchgeführt werden, z. B. style:

<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}</code>

call Methode

Mit der Methode

call können Sie elementspezifische Methoden aufrufen (z. B. pause in einem Videoelement):

<code class="language-javascript">$('button').text('Click Me');</code>

item Methode

Die Methode

item entspricht der eq -Methode von JQuery. Es gibt einen Nodelist zurück, der nur die Knoten enthält, die den Index bestehen:

<code class="language-javascript">$$('button').textContent = 'Click Me';</code>

owner Attribute

Das Attribut

owner entspricht dem prevObject von JQuery.

<code class="language-javascript">$$('button').set('textContent', 'Click Me');</code>

btns.style Gibt ein Stilarray zurück, während owner den von style abgebildeten Nodelist zurückgibt.

nodelist.js Kompatibilität

Meine Bibliothek ist mit allen wichtigen neuen Browsern kompatibel, wie unten beschrieben.

Browser Version

Firefox 6 safari 5.0.5 Chrom 6 ie 9 Opera

11.6

Schlussfolgerung

Jetzt können wir endlich das nützliche Nodelist -Objekt verwenden!

Für eine Komprimierungsgröße von ca. 4K erhalten Sie alle oben genannten und mehr, über die Sie im Github -Repository von nodelist.js erfahren können.

Da nodelist.js einen Browser als Abhängigkeit verwendet, ist kein Upgrade erforderlich. Wenn der Browser dem DOM -Element neue Methoden/Attribute hinzufügt, können Sie diese Methoden/Attribute automatisch über nodelist.js verwenden. All dies bedeutet, dass die einzige Abwertung, über die Sie sich Sorgen machen müssen, die Browserentfernungsmethode ist. Dies sind normalerweise sehr niedrige Verwendungsmethoden, da wir das Web nicht brechen können.

Was denkst du? Würden Sie in Betracht ziehen, diese Bibliothek zu verwenden? Fehlen wichtige Funktionen? Ich würde gerne Ihre Kommentare in den Kommentaren unten hören.

häufig gestellte Fragen zu DOM -Operationen mit nodelist.js

Was ist der Unterschied zwischen Nodelist und HTMLCollection?

Array.from() nodelist und htmlcollection sind beide Knotensammlungen. Der Hauptunterschied zwischen ihnen besteht darin, dass Nodelist jeden Knotentyp enthalten kann, während HTMLCollection eine Sammlung von Elementknoten ist. HTMLCollection ist ebenfalls dynamisch, dh sie wird automatisch aktualisiert, wenn sich die Dokumentstruktur ändert. Nodelist hingegen ist statisch und aktualisiert nicht, um Änderungen im Dokument widerzuspiegeln.

Wie kann ich Nodelist in ein Array umwandeln? Sie können Nodelist mit der -Methode oder dem erweiterten Bediener in ein Array konvertieren. Hier erfahren Sie, wie es geht:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

Warum gibt der JQuery -Selektor PrevObject anstelle eines normalen Elements zurück?

Die Verkettungsmechanismus von

jQuery funktioniert, indem sie frühere Objekte speichert, bevor Änderungen vorgenommen werden. Auf diese Weise können Sie die Methode .end() verwenden, um in Ihren vorherigen Zustand wiederherzustellen. Wenn Sie das tatsächliche DOM -Element erhalten möchten, können Sie die Methode oder die Array -Notation .get() verwenden.

Wie kann ich Nodelist durchlaufen?

Sie können die Nodelist mit der für die Schleife für ... von Schleifen oder forEach() Methode durchlaufen. Hier ist ein Beispiel mit A für Schleife:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

Wie verwendet die .prev () -Methode in jQuery?

Die .prev() -Methode in jQuery wird verwendet, um das ausgewählte Element unmittelbar neben dem vorherigen Geschwister auszuwählen. Wenn ein Selektor bereitgestellt wird, wird das vorherige Geschwisterelement nur dann abgerufen, wenn der Selektor übereinstimmt.

Ist JQuery im Jahr 2022 noch relevant?

Während JQuery beim Start ein Spielveränderer war, hat sich das moderne JavaScript-Ökosystem erheblich verändert. Viele der Funktionen, die JQuery beliebt machen, sind jetzt in JavaScript selbst integriert. JQuery ist jedoch immer noch weit verbreitet und gewartet, und es kann für einige Projekte eine gute Wahl sein.

Wie wählt ich einen bestimmten Knoten von Nodelist aus?

Sie können einen bestimmten Knoten von Nodelist mit der Array -Notation oder der item() -Methode auswählen. Hier erfahren Sie, wie es geht:

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

Kann ich Methoden auf Nodelist verwenden, filtern und reduzieren?

nodelist ist kein Array, daher gibt es keine Methoden wie Karte, Filter und Reduzierung. Sie können Nodelist jedoch in ein Array umwandeln und diese Methoden dann verwenden.

Was ist der Unterschied zwischen QuerySelector und QuerySelectorall?

querySelector Gibt das erste Element in dem Dokument zurück, das mit dem angegebenen CSS -Selektor entspricht, und querySelectorAll gibt den Nodelist aller Elemente, die mit dem CSS -Selektor übereinstimmen, zurück.

Wie kann ich überprüfen, ob Nodelist leer ist?

Sie können überprüfen, ob Nodelist leer ist, indem Sie seine length Eigenschaft überprüfen. Wenn die Länge 0 ist, ist Nodelist leer. Hier erfahren Sie, wie es geht:

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true</code>

Das obige ist der detaillierte Inhalt vonVerlieren Sie die JQuery Bloat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!