Saya bertanya-tanya mengapa kerangka kerja / perpustakaan memiliki pembantu mereka sendiri meskipun sudah ada secara native.

Mari kita ambil jQuery dan AngularJS . Mereka memiliki eachfungsi iterator sendiri :

• jQuery.each ()
• angular.forEach ()

Tapi kami punya Array.prototype.forEach.

Demikian pula,

• jQuery.parseJSON ()
• angular.fromJson ()

Tetapi kami memiliki JSON.parse()fungsi dalam JavaScript vanilla.

Karena ketika perpustakaan itu ditulis, beberapa browser utama tidak mendukung fitur-fitur itu. Setelah ditulis dan digunakan, fitur-fitur ini tidak dapat dihapus dari perpustakaan ini tanpa merusak banyak aplikasi.

(Dalam hal ini, "peramban utama" berarti peramban yang masih memiliki pangsa pasar yang besar, yang mencakup peramban versi lama seperti Internet Explorer, di mana sejumlah besar pengguna tidak perlu memutakhirkan ke versi terbaru.)

Karena browser yang berbeda memiliki implementasi dan fitur yang berbeda dalam mesin JavaScript mereka. Kode "vanilla-JS" yang sama dapat berjalan secara berbeda pada dua browser yang berbeda, atau bahkan dua versi berbeda dari browser yang sama.

Lapisan abstraksi yang disediakan oleh perpustakaan JS populer adalah cara mengatasi ini. Di balik layar, ia bekerja di sekitar berbagai kapasitas dan batasan browser dan menawarkan API terpadu yang mudah digunakan. Ini, pada gilirannya, memungkinkan operasi umum seperti mendapatkan objek DOM atau mengambil data JSON menjadi konsisten, efisien dan agnostik browser.

Ini membuat hidup jauh lebih mudah bagi pengembang yang sekarang dapat fokus pada kode apa yang harus dilakukan, daripada bagaimana seharusnya ditulis untuk bekerja dengan browser X atau Y.

1. Kompatibilitas mundur

JavaScript adalah implementasi dari ECMAScript . Sebagian besar fungsi tersebut diperkenalkan dalam ECMAScript 5 (ES5) namun banyak browser lama yang masih memiliki pangsa pasar yang cukup signifikan tidak mendukung fungsi-fungsi ini (lihat tabel kompatibilitas ECMAScript 5 ), yang paling terkenal adalah IE8.

Umumnya perpustakaan akan kembali ke implementasi asli jika ada jika tidak menggunakan polyfill mereka sendiri, misalnya mari kita lihat implementasi AngularJS ( 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;
}

Baris berikut memeriksa apakah forEachmetode ada pada objek dan apakah itu versi AngularJS atau tidak. Jika tidak menggunakan fungsi yang sudah ditentukan (versi asli):

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

2. Kenyamanan

Dalam JavaScript asli Array.prototype.forEachadalah metode eksklusif untuk turunannya Array, namun sebagian besar juga Objectdapat diubah.

Karena alasan ini, banyak pembuat perpustakaan membuat fungsinya polimorfik (dapat menerima beberapa tipe sebagai input). Mari kita ambil kode AngularJS di atas dan lihat input apa yang diterima:

Fungsi :

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);
    }
  }

Array (dengan dukungan native forEach):

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

Objek seperti array termasuk Array (tanpa dukungan forEach asli), String, HTMLElement, Obyek dengan properti panjang yang valid:

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

Benda:

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

Kesimpulan

Seperti yang Anda lihat, AngularJS akan beralih ke sebagian besar Objek JavaScript, meskipun ia bekerja dengan cara yang sama seperti fungsi asli, ia menerima jenis input yang jauh lebih berbeda dan karenanya merupakan tambahan yang valid ke perpustakaan serta cara membawa fungsi ES5 ke browser lawas.