Çerçevelerin / kütüphanelerin neden zaten kendilerine ait yardımcıları olduğunu merak ediyorum.

JQuery ve AngularJS'i alalım . Kendi eachyineleyici işlevleri var:

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

Ama biz var Array.prototype.forEach.

Benzer şekilde,

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

Ama biz JSON.parse()vanilya javascript işlevimiz var .

Çünkü bu kütüphaneler yazıldığı zaman, bazı büyük tarayıcılar bu özellikleri desteklemiyordu. Bir kez yazıldıktan ve kullanıldığında, bu özellikler pek çok uygulamayı bozmadan bu kütüphanelerden kaldırılamaz.

(Bu durumda, "büyük tarayıcı", çok sayıda kullanıcının mutlaka en son sürüme yükseltme yapmadığı, Internet Explorer gibi eski tarayıcı sürümlerini de içeren büyük pazar payına sahip bir tarayıcı anlamına gelir.)

Çünkü farklı tarayıcıların , JavaScript motorlarında oluşturulan farklı uygulamaları ve özellikleri vardır . Aynı "vanilla-JS" kodu iki farklı tarayıcıda, hatta aynı tarayıcının iki farklı sürümünde farklı şekilde çalışabilir.

Popüler JS kütüphanelerinin sağladığı soyutlama katmanı bunun çevresinde bir yoldur. Sahnelerin arkasında, farklı tarayıcıların kapasiteleri ve sınırlamaları etrafında çalışır ve bunlara ek olarak birleşik, kullanımı kolay bir API sunar. Bu da, bir DOM nesnesini alma veya JSON verilerini alma gibi genel işlemlerin tutarlı, verimli ve tarayıcıda agnostik olmasını sağlar.

Bu, tarayıcı X veya Y ile çalışmak için nasıl yazılması gerektiği yerine, şimdi hangi kodun yapılması gerektiğine odaklanabilen geliştiriciler için hayatı çok kolaylaştırır.

1. geriye uyumluluk

JavaScript, ECMAScript'in bir uygulamasıdır . Bu işlevlerin çoğu ECMAScript 5 (ES5) 'te tanıtıldı, ancak hala pazarda önemli bir paya sahip olan birçok eski tarayıcı bu işlevleri desteklemiyor (bkz. ECMAScript 5 uyumluluk tablosu ), bunlardan en önemlisi IE8'dir.

Genel olarak kütüphaneler, eğer kendi polyfilllerini kullanıyorlarsa mevcutsa, yerel uygulamaya geri dönecektir, örneğin, AngularJS'in uygulamasına bakalım ( 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;
}

Aşağıdaki satırlar, forEachyöntemin nesne üzerinde olup olmadığını ve AngularJS sürümü olup olmadığını kontrol eder. Değilse, önceden belirlenmiş işlevi kullanır (yerel sürüm):

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

2. Kolaylık

Yerel JavaScript'te Array.prototype.forEach, bir örneğe özgü bir yöntemdir Array, ancak çoğu Objectda yinelenebilir.

Bu nedenle birçok kütüphane yaratıcısı işlevlerini polimorfik yapar (giriş olarak çoklu türleri kabul edebilir). Yukarıdaki AngularJS kodunu alalım ve hangi girdileri kabul ettiğini görelim:

İşlevler :

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

Diziler (yerel forEach desteği ile):

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

Array (yerel forEach desteği olmadan), String, HTMLElement, Geçerli bir uzunluk özelliğine sahip nesne de dahil olmak üzere dizi benzeri nesneler :

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

Nesneler:

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

Sonuç

Gördüğünüz gibi AngularJS, herhangi bir JavaScript Nesnesinin çoğunu yineleyecektir, ancak yerel işlevle aynı şekilde çalışsa da, çok daha farklı türde girdiler kabul etse de, ES5 işlevlerini getirmenin yanı sıra kitaplığa geçerli bir eklemedir eski tarayıcılara.