Mục lục
Polyfill là gì trong khoa học lập trình?
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


Theo thuật ngữ của những người bình 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ỗ và vết nứt để làm phẳng bất kỳ khuyết tật nào trên tường. Ở Anh, có một thương hiệu phổ biến cho loại keo dán này được gọi là “Polyfilla”.
Đối với web, thuật ngữ "Polyfill" cũng có ý nghĩa tương tự. Polyfill là một đoạn code nhỏ hoặc một chức năng bị thiếu của trình duyệt cần phải được thêm vào hoặc điền vào.
Để đơn giản, hãy xem một đoạn mã JavaScript ES6 nhỏ dưới đây:
// ES6 Code
var s = 'Tom and Jerry';
if (s.startsWith('Tom')) {
console.log('Hello Tom');
}
Phương thức startsWith là một phần trong đặc tả ES6 được công bố năm 2015. Đoạn mã trên hoạt động hoàn hảo trên các trình duyệt phiên bản mới, chẳng hạn Chrome 41+. Lưu ý: Phiên bản Chrome 41 chỉ hỗ trợ một phần các tính năng của ES6. Chỉ đến khi phiên bản Chrome 51 (Tháng 5 năm 2016) được phát hành ES6 mới được Chrome hỗ trợ đầy đủ.
Browser | Version Supports startsWith | Version Fully Support ES6 | Date |
Chrome | 41 | 51 | May 2016 |
Edge | 12 | 14 | Aug 2016 |
Firefox | 17 | 54 | Jun 2017 |
Internet Explorer | No | No | |
Safari | 9 | 10 | Sep 2016 |
Opera | 28 | 38 | Jun 2016 |
Để hỗ trợ các trình duyệt cũ bạn phải vá các chức năng mà nó đang thiếu. Cụ thể, trong trường hợp này, để chắc chắn hãy kiểm tra trình duyệt có hỗ trợ phương thức startsWith hay không. Nếu không được hỗ trợ, bạn cần mô phỏng nó với tính năng tương đương:
// ES5 Code
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
var s = 'Tom and Jerry';
if (s.startsWith('Tom')) {
console.log('Hello Tom');
}
Một ví dụ khác về polyfill. Phương thức tĩnh Math.trunc(number) được sử dụng để "cắt bỏ" phần thập phân của một số và trả về một số nguyên, chẳng hạn Math.trunc(1.23) trả về 1. Các trình duyệt cũ không hỗ trợ phương thức này, vì vậy chúng ta cần mô phỏng phương thức này để thêm vào cho nó.
if (!Math.trunc) { // if no such method
// implement it
Math.trunc = function (number) {
// Math.ceil and Math.floor exist even in ancient JavaScript engines
// they are covered later in the tutorial
return number < 0 ? Math.ceil(number) : Math.floor(number);
};
}
Tại thời điểm bài viết này được phát hành (2021), về cơ bản, chúng ta có thể chắc chắn rằng hầu hết người dùng đã chuyển sang sử dụng trình duyệt hỗ trợ JavaScript ES5+. Vì vậy việc tạo ra các polyfill cho các trình duyệt "quá cũ" (ES4-) không thực sự cần thiết nữa.
caniuse.com là một website giúp bạn kiểm tra một tính năng nào đó được những trình duyệt nào hỗ trợ. Chẳng hạn kiểm tra sự hỗ trợ của các trình duyệt đối với phương thức startsWith:

Về cơ bản có 2 cách để sử dụng Polyfill:
Polyfilling manually
Viết và sử dụng các Polyfill của bạn một cách thủ công như các ví dụ ở trên.
Polyfill library
Rất nhiều các thư viện Polyfill được tạo ra bởi cộng đồng và được chia sẻ miễn phí, thông thường chúng thường được sử dụng cùng với các Transpiler (trình chuyển đổi mã nguồn).
Ví dụ, các thư viện JavaScript Polyfill như babel-polyfill, Es6-shim, polyfill-library,... có thể được nhập khẩu vào các dự án của bạn, chẳng hạn NodeJS, React,...
Một vài ví dụ sử dụng các thư viện Polyfill mà bạn có thể quan tâm:
- TODO Link?