Polyfill la gi

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

For example, a polyfill could be used to mimic the functionality of a text-shadow in IE7 using proprietary IE filters, or mimic rem units or media queries by using JavaScript to dynamically adjust the styling as appropriate, or whatever else you require.

The reason why polyfills are not used exclusively is for better functionality and better performance. Native implementations of APIs can do more and are faster than polyfills. For example, the Object.create polyfill only contains the functionalities that are possible in a non-native implementation of Object.create.

Other times, polyfills are used to address issues where browsers implement the same features in different ways. The polyfill uses non-standard features in a certain browser to give JavaScript a standards-compliant way to access the feature. Although this reason for polyfilling is very rare today, it was especially prevalent back in the days of IE6 and Netscape where each browser implemented JavaScript very differently. The 1st version of jQuery was an early example of a polyfill. It was essentially a compilation of browser-specific workarounds to provide JavaScript developers with a single common API that worked in all browsers. At the time, JavaScript developers were having major problems trying to get their website to work across all devices because there was such a discrepancy between browsers that the website might have to be programmed radically differently and have a much different user interface based upon the user's browser. Thus, the JavaScript developer had access to only a very tiny handful of JavaScript APIs that worked more-or-less consistently across all browsers. Using a polyfill to handle browser-specific implementations is less common today because modern browsers mostly implement a broad set of APIs according to standard semantics.

Ví dụ: giả sử bạn muốn sử dụng đối tượng navigator.mediaDevices, nhưng không phải tất cả các trình duyệt đều hỗ trợ điều này. Bạn có thể tưởng tượng một thư viện cung cấp một shim mà bạn có thể sử dụng như thế này:

Trong trường hợp này, bạn rõ ràng đang gọi một shim thay vì sử dụng đối tượng hoặc phương thức ban đầu. Polyfill, mặt khác, thay thế các đối tượng và phương thức trên các đối tượng ban đầu.

Ví dụ:

Trong mã của bạn, có vẻ như bạn đang sử dụng đối tượng navigator.mediaDevices tiêu chuẩn. Nhưng thực sự, polyfill (trong ví dụ của adapter.js) đã thay thế đối tượng này bằng đối tượng của chính nó.

Một trong những nó đã thay thế nó là một shim. Điều này sẽ phát hiện nếu tính năng này được hỗ trợ nguyên bản và sử dụng nó nếu có, hoặc nó sẽ hoạt động xung quanh nó bằng các API khác nếu không.

Vì vậy, một polyfill là một loại shim "trong suốt". Và đây là ý nghĩa của Remy Sharp (người đặt ra thuật ngữ này) khi nói rằng " nếu bạn xóa tập lệnh polyfill, mã của bạn sẽ tiếp tục hoạt động, mà không có bất kỳ thay đổi nào được yêu cầu mặc dù đã xóa bỏ polyfill ".

“[T] mục đích của Babel là lấy mã của bạn sử dụng các tính năng mới mà các trình duyệt có thể chưa hỗ trợ và chuyển nó thành mã mà bất kỳ trình duyệt nào bạn quan tâm đều có thể hiểu được.” - Tyler McGinnis trong “ Compiling vs Polyfills ”

Biên dịch JavaScript là gì?

Babel được sử dụng để biên dịch mã của bạn để tương thích với các phiên bản JavaScript cũ hơn (và do đó hoạt động trong các trình duyệt cũ hơn).

Biên dịch có nghĩa là trình biên dịch (Babel) thực hiện các chuyển đổi cú pháp, nhưng nó không thêm bất kỳ nguyên thủy JavaScript mới nào.

Khi bạn biên dịch mã của mình, bạn đang chuyển đổi nó.

Polyfill JavaScript là gì?

Khi bạn thêm polyfill , bạn đang thêm chức năng hoàn toàn mới vào mã JavaScript của mình mà trước đây không tồn tại ở đó.

Polyfills là cần thiết cho các tính năng mới đã được thêm vào JavaScript mà không thể bị trùng lặp trong mã JavaScript vani.

Polyfills là cần thiết cho các thuộc tính mới đã được thêm vào không gian tên JavaScript toàn cầu, vì trình biên dịch không diễn giải chúng.

Khi nào bạn sử dụng cái nào?

Nó phụ thuộc vào cú pháp so với thuộc tính. Ví dụ, các hàm mũi tên được biên dịch theo cú pháp, nhưng Array.fromđược điền nhiều.

Thông thường, bạn sẽ cần sử dụng cả polyfills và biên dịch để làm cho mã của bạn tương thích ngược với các trình duyệt cũ hơn.

Các tính năng của ES6 đều không cần thiết khi hỗ trợ các trình duyệt hiện đại, nhưng bạn nên biết cách sử dụng tính năng JavaScript tuyệt vời tiếp theo ngay khi nó được phát hành; biên dịch và / hoặc polyfill tính năng mới đó.

Thuật ngữ ám chỉ

“Hãy biên soạn mã sạch của bạn, nhưng hãy ghép các thuộc tính đẹp đẽ của bạn.” - Tiến sĩ Derek Austin 🥳

Ví dụ: Polyfilled hoặc Composite

Babel có thể biến đổi các hàm mũi tên thành các hàm thông thường với từ khóa function, có nghĩa là các hàm mũi tên có thể được biên dịch .

Các lớp học

Các lớp, giống như các hàm mũi tên, có thể được chuyển đổi thành các hàm thông thường (thông qua việc sử dụng các nguyên mẫu), vì vậy các lớp cũng có thể được biên dịch .

Lời hứa

Babel sẽ không thể làm gì để chuyển đổi các lời hứa thành cú pháp JavaScript gốc mà các trình duyệt cũ hơn sẽ hiểu.

Quan trọng hơn, việc biên dịch sẽ không thêm các thuộc tính mới như Promisekhông gian tên chung. Điều đó có nghĩa là những lời hứa cần được thực hiện.

Phá hủy

Bởi vì Babel có thể biến đổi mọi đối tượng có cấu trúc thành các biến bình thường bằng cách sử dụng .ký hiệu dot ( ), nên cấu trúc hủy sẽ được biên dịch .

Bao gồm

Bao gồm có thể được chuyển đổi để sử dụng indexof, nhưng việc biên dịch không thêm bất kỳ từ khóa, thuộc tính hoặc nguyên thủy mới nào, do đó, bao gồm cần được điền đầy đủ .

Danh sách lớn: Nhiều hoặc Tổng hợp

Danh sách này chỉ bao gồm các tính năng của ES6, không bao gồm các tính năng ECMAScript gần đây hơn như flatMap, cũng sẽ cần được biên dịch hoặc điền vào.

Có thể được biên dịch

• Hàm mũi tên
• Hàm không đồng bộ
• Chặn các chức năng có phạm vi
• Các lớp học
• Thuộc tính lớp
• Tên thuộc tính được tính
• Hằng số
• Trang trí
• Tham số mặc định
• Phá hủy
• Mô-đun
• Đối tượng nghỉ ngơi / lây lan
• Chỉ định phương thức thuộc tính

• ArrayBuffer
• Array.from
• Array.of
• Mảng # tìm
• Mảng # findIndex
• Tên chức năng
• Bản đồ
• Number.isNan
• Object.assign
• Object.entries
• Object.values
• Lời hứa
• Bộ
• Chuỗi # bao gồm
• Biểu tượng
• WeakMap
• WeakSet

Quá nhiều để nhớ?

Bạn sẽ biết một cái gì đó yêu cầu polyfill nếu nó yêu cầu các thuộc tính mới hoặc các nguyên thủy trong JavaScript.

Nhưng nếu thay đổi là đường cú pháp đơn giản (như các hàm mũi tên), nó có thể được biên dịch bằng một công cụ như Babel.

Khi nghi ngờ, bạn luôn có thể chỉ cần Google những gì bạn muốn làm cùng với từ khóa polyfill, chẳng hạn như các hàm mũi tên polyfill hoặc array.from polyfill .

Tài nguyên bổ sung

• David Gilbertson thảo luận chuyên sâu về polyfills và chuyển dịch (biên dịch).
• Các tài liệu chính thức của Babel rất hữu ích để hiểu về quá trình biên dịch.
• Remy Sharp đã đặt ra thuật ngữ polyfill vào năm 2010 và giải thích nó theo cách này:

Web có một khởi đầu nhưng nó sẽ không có kết thúc. Khi công nghệ mới ra đời, chúng sẽ không được các trình duyệt cũ hỗ trợ ngay lập tức. Đây có thể là một thách thức khá lớn để kết hợp các tính năng mới nhất vào trình duyệt để làm cho các ứng dụng của chúng tôi hoạt động thành công mà không phải hy sinh việc sử dụng các tính năng mới nhất.

Đây là một vấn đề lớn, phải không? Nhưng sợ hãi không phải là đối với mọi vấn đề đều có giải pháp cho nó. Các vị thần đã tạo ra một thuật ngữ mới cho nó và họ đã gọi nó là "Polyfills" .

Polyfills là gì?

Theo thuật ngữ của người dân, người ta có thể hình dung polyfill như một loại keo dán thông thường có thể được sử dụng để lấp đầy các lỗ hổng và vết nứt để làm phẳng mọi khuyết tật trên tường. Ở Anh, có một thương hiệu phổ biến cho loại dán này được gọi là “Polyfilla”. Về việc sử dụng miếng dán này, không thể nói rằng có một lỗ hổng trên tường. Đồ gọn gàng hả?

Đối với web, polyfill cũng làm điều tương tự. Có thể có một số chức năng bị thiếu trong trình duyệt cần được thêm hoặc điền vào.

Điều này đưa chúng ta đến câu trích dẫn sau:

Polyfill (hoặc polyfiller) là một đoạn mã (hoặc plugin) cung cấp công nghệ mà chúng tôi, các nhà phát triển, mong đợi trình duyệt cung cấp nguyên bản.

Các tính năng trình duyệt phổ biến nơi Polyfills được sử dụng

JavaScript là ngôn ngữ được sử dụng để tạo polyfill, nhưng polyfill có thể được sử dụng để triển khai các tính năng trình duyệt khác nhau ngoài các tiêu chuẩn ECMAScript (ES5, ES6, v.v.):

• SVG
• Tranh sơn dầu
• Bộ nhớ Web (bộ nhớ cục bộ / bộ nhớ phiên)
• Video
• Chia sẻ tài nguyên đa nguồn gốc (CORS)
• Phần tử HTML5
• Mô-đun thiết kế đáp ứng CSS
• Khả năng tiếp cận / ARIA
• Ổ cắm web
• Vị trí địa lý
• Quản lý trạng thái trình duyệt và nhiều người khác!

Một ví dụ về polyfill là đoạn mã dưới đây là polyfill cho phương thức Chuỗi ES6 mới startWith ():

Các dòng mã trên chỉ là JavaScript thông thường cần thiết để trình duyệt hiểu nếu trình duyệt không có hỗ trợ gốc cho tính năng cụ thể startWith () .

Hơn nữa, if (!String.prototype.startsWith)được sử dụng để ngăn việc ghi đè lên phương thức startWith () của trình duyệt . Nếu tính năng không có mặt thì polyfill sẽ lấp đầy lỗ hổng trong bộ tính năng của trình duyệt. Công cụ tuyệt vời!

Một ví dụ khác về polyfill là dành cho Web Storage ( lưu trữ cục bộ hoặc lưu trữ phiên ). Mã cho nó thô được đưa ra dưới đây:

Đoạn mã trên định nghĩa một IIFE (Biểu thức hàm được gọi ngay lập tức) nơi các tiêu chuẩn lưu trữ web có thể được xác định bằng JavaScript . Chức năng trước khi thực thi sẽ kiểm tra xem localStorage và sessionStorage đã có trong trình duyệt hay chưa.

Trong thời kỳ khởi đầu của Web Storage, nó phải đối mặt với những mâu thuẫn do đó các polyfills cho nó phải đi vào hình ảnh. Hy vọng rằng điều này sẽ vẽ ra một ý tưởng về cách một người có thể sử dụng polyfills trong các dự án của riêng họ.

Người ta có thể đặt một thư mục polyfills trong cấu trúc dự án ứng dụng của họ và có thể đặt các tệp JavaScript của họ vào đó để được liên kết và sử dụng trong khi chạy ứng dụng. Đặc biệt, điều này hợp lệ nếu ai đó đang phát triển bộ polyfills của riêng họ cho ứng dụng của họ.

Bây giờ bạn có quyền hack trình duyệt để hỗ trợ các tính năng còn thiếu.

Nhưng không nhanh như vậy. Web là một nơi rộng lớn, người ta có thể lạc vào đó theo đúng nghĩa đen. Trước khi hack web, chúng ta phải biết những polyfills nào đã tồn tại và những cái nào chúng ta cần tập trung vào.

Liên kết sau cung cấp một ý tưởng hợp lý về các polyfills đã tồn tại: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Vì vậy, hãy nhớ khắc phục những vết nứt trên tường khi cần thiết. Bức tường của bạn chắc chắn sẽ nhận được một số sự chú ý không thể phân chia. Bạn có ý tưởng, phải không?