Tôi tự hỏi tại sao các khung / thư viện có người trợ giúp riêng của họ mặc dù chúng tồn tại nguyên bản.

Hãy dùng jQuery và AngularJS . Chúng có các eachhàm lặp riêng :

• jQuery.each ()
• góc cạnh.forEach ()

Nhưng chúng ta có Array.prototype.forEach.

Tương tự như vậy,

• jQuery.parseJSON ()
• góc cạnh.fromJson ()

Nhưng chúng tôi có JSON.parse()chức năng trong vanilla JavaScript.

Bởi vì khi các thư viện đó được viết, một số trình duyệt chính không hỗ trợ các tính năng đó. Sau khi được viết và sử dụng, các tính năng này không thể bị xóa khỏi các thư viện này mà không phá vỡ nhiều ứng dụng.

(Trong trường hợp này, "trình duyệt chính" có nghĩa là trình duyệt vẫn chiếm thị phần lớn, bao gồm các phiên bản trình duyệt cũ hơn như Internet Explorer, nơi số lượng lớn người dùng không nhất thiết phải nâng cấp lên phiên bản mới nhất.)

Bởi vì các trình duyệt khác nhau có các triển khai và tính năng khác nhau được nướng trong công cụ JavaScript của chúng. Mã "vanilla-JS" giống nhau có thể chạy khác nhau trên hai trình duyệt khác nhau hoặc thậm chí hai phiên bản khác nhau của cùng một trình duyệt.

Lớp trừu tượng được cung cấp bởi các thư viện JS phổ biến là một cách xoay quanh vấn đề này. Đằng sau, nó hoạt động xung quanh các khả năng và giới hạn của các trình duyệt khác nhau và cung cấp một API thống nhất, dễ sử dụng trên đầu trang. Đến lượt mình, điều này cho phép các hoạt động phổ biến như lấy một đối tượng DOM hoặc tìm nạp dữ liệu JSON là nhất quán, hiệu quả và không tin vào trình duyệt.

Điều này làm cho cuộc sống dễ dàng hơn rất nhiều đối với các nhà phát triển hiện có thể tập trung vào mã nào nên làm, thay vì cách viết mã để làm việc với trình duyệt X hoặc Y.

1. Tương thích ngược

JavaScript là một triển khai của ECMAScript . Hầu hết các chức năng đó được giới thiệu trong ECMAScript 5 (ES5) tuy nhiên nhiều trình duyệt cũ hơn vẫn có thị phần đủ đáng kể không hỗ trợ các chức năng này (xem bảng tương thích ECMAScript 5 ), đáng chú ý nhất trong số này là IE8.

Nói chung, các thư viện sẽ trở lại triển khai gốc nếu nó tồn tại nếu không sử dụng polyfill của riêng họ, ví dụ: hãy xem triển khai của 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;
}

Các dòng sau kiểm tra xem forEachphương thức có tồn tại trên đối tượng hay không và đó có phải là phiên bản AngularJS hay không. Nếu không, nó sử dụng chức năng đã được chỉ định (phiên bản gốc):

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

2. Thuận tiện

Trong JavaScript nguyên gốc Array.prototype.forEachlà một phương thức dành riêng cho một thể hiện của Array, tuy nhiên hầu hết mọi thứ Objectđều có thể lặp lại được.

Vì lý do này, nhiều người tạo thư viện làm cho chức năng của họ đa hình (có thể chấp nhận nhiều loại làm đầu vào). Hãy lấy mã AngularJS ở trên và xem những gì đầu vào chấp nhận:

Chức năng :

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

Mảng (với sự hỗ trợ forEach bản địa):

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

Các đối tượng giống như mảng bao gồm Mảng (không có hỗ trợ forEach gốc), Chuỗi, HTMLE bổ sung, Đối tượng có thuộc tính độ dài hợp lệ:

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

Các đối tượng:

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

Phần kết luận

Như bạn có thể thấy AngularJS sẽ lặp lại trên hầu hết mọi Đối tượng JavaScript, mặc dù nó hoạt động giống như chức năng gốc, nó chấp nhận nhiều loại đầu vào khác nhau và do đó là một bổ sung hợp lệ cho thư viện cũng như cách mang các hàm ES5 để các trình duyệt cũ.