Ich frage mich, warum Frameworks / Bibliotheken ihre eigenen Helfer haben, obwohl sie von Haus aus bereits existieren.

Nehmen wir jQuery und AngularJS . Sie haben ihre eigenen eachIteratorfunktionen:

• jQuery.each ()
• angle.forEach ()

Aber wir haben Array.prototype.forEach.

Ähnlich,

• jQuery.parseJSON ()
• eckig.vonJson ()

Aber wir haben die JSON.parse()Funktion in Vanille JavaScript.

Denn als diese Bibliotheken geschrieben wurden, haben einige große Browser diese Funktionen nicht unterstützt. Einmal geschrieben und verwendet, können diese Funktionen nicht aus diesen Bibliotheken entfernt werden, ohne viele Anwendungen zu beschädigen.

(In diesem Fall bedeutet "Hauptbrowser" einen Browser, der immer noch einen großen Marktanteil hat, einschließlich älterer Versionen von Browsern wie Internet Explorer, bei denen eine große Anzahl von Benutzern nicht unbedingt auf die neueste Version aktualisiert.)

Weil unterschiedliche Browser unterschiedliche Implementierungen und Funktionen in ihrer JavaScript-Engine haben. Derselbe "Vanilla-JS" -Code kann in zwei verschiedenen Browsern oder sogar in zwei verschiedenen Versionen desselben Browsers unterschiedlich ausgeführt werden.

Die Abstraktionsschicht, die von gängigen JS-Bibliotheken bereitgestellt wird, ist ein Weg, um dies zu umgehen. Hinter den Kulissen werden die Kapazitäten und Einschränkungen der verschiedenen Browser umgangen und darüber hinaus eine einheitliche, benutzerfreundliche API bereitgestellt. Dies ermöglicht wiederum, dass allgemeine Vorgänge wie das Abrufen eines DOM-Objekts oder das Abrufen von JSON-Daten konsistent, effizient und browserunabhängig sind.

Dies erleichtert Entwicklern das Leben erheblich, die sich jetzt darauf konzentrieren können, was Code tun soll, anstatt wie er für die Arbeit mit Browser X oder Y geschrieben werden soll.

1. Abwärtskompatibilität

JavaScript ist eine Implementierung von ECMAScript . Die meisten dieser Funktionen wurden in ECMAScript 5 (ES5) eingeführt, jedoch unterstützen viele ältere Browser, die immer noch einen ausreichenden Marktanteil haben, diese Funktionen nicht (siehe ECMAScript 5-Kompatibilitätstabelle ). Die bekanntesten sind IE8.

Im Allgemeinen werden Bibliotheken auf die native Implementierung zurückgreifen, wenn sie ansonsten vorhanden sind. Verwenden Sie eine eigene Polyfüllung. Schauen wir uns beispielsweise die AngularJS-Implementierung an ( angular.js L203-257 ):

function forEach(obj, iterator, context) {
  var key;
  if (obj) {
    if (isFunction(obj)){
      for (key in obj) {
        // Need to check if hasOwnProperty exists,
        // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
        if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
          iterator.call(context, obj[key], key);
        }
      }
    } else if (obj.forEach && obj.forEach !== forEach) {
      obj.forEach(iterator, context);
    } else if (isArrayLike(obj)) {
      for (key = 0; key < obj.length; key++)
        iterator.call(context, obj[key], key);
    } else {
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          iterator.call(context, obj[key], key);
        }
      }
    }
  }
  return obj;
}

In den folgenden Zeilen wird überprüft, ob die forEachMethode für das Objekt vorhanden ist und ob es sich um die AngularJS-Version handelt. Wenn nicht, wird die bereits angegebene Funktion (die native Version) verwendet:

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);
}

2. Bequemlichkeit

In nativem JavaScript Array.prototype.forEachist eine Methode exklusiv für eine Instanz von Array, die meisten Objectsind jedoch auch iterabel.

Aus diesem Grund machen viele Bibliotheksersteller ihre Funktionen polymorph (sie können mehrere Typen als Eingabe akzeptieren). Nehmen wir den obigen AngularJS-Code und sehen, welche Eingaben akzeptiert werden:

Funktionen :

if (isFunction(obj)){
  for (key in obj) {
    // Need to check if hasOwnProperty exists,
    // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
    if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
      iterator.call(context, obj[key], key);
    }
  }

Arrays (mit nativem forEach-Support):

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);

Array-ähnliche Objekte, einschließlich Array (ohne native forEach-Unterstützung), String, HTMLElement, Object mit einer gültigen length-Eigenschaft:

} else if (isArrayLike(obj)) {
  for (key = 0; key < obj.length; key++)
    iterator.call(context, obj[key], key);

Objekte:

} else {
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      iterator.call(context, obj[key], key);
    }
  }
}

Fazit

Wie Sie sehen, durchläuft AngularJS die meisten JavaScript-Objekte, obwohl es genauso funktioniert wie die native Funktion. Es akzeptiert weitaus mehr verschiedene Eingabetypen und ist somit eine gültige Ergänzung der Bibliothek sowie eine Möglichkeit, ES5-Funktionen zu implementieren zu älteren Browsern.