Video học lập trình mỗi ngày

Cách triển khai một Polyfill Polyfill là một đoạn mã (thường là JavaScript trên Web) được sử dụng để cung cấp chức năng hiện đại trên các trình duyệt cũ hơn vốn không hỗ trợ nó. Bài viết này thuộc vào series - Tuyển tập những mẹo viết javascript.

Polyfill là gì?

Remy Sharp chính là người khởi xướng thuật ngữ này, và hơn ai hết ông cũng có một bài viết khá rõ về thuật ngữ này. Thật ra, các bạn cũng không cần hiểu nó nhiều và kỹ đâu. Các bạn chỉ cần hiểu nôm na là thế này. 

Polyfills la gì - "Polyfill là một đoạn mã (thường là JavaScript trên Web) được sử dụng để cung cấp chức năng hiện đại trên các trình duyệt cũ hơn vốn không hỗ trợ nó." Theo MDN. Có nghĩ là sao? Có nghĩa là có thể một số trình duyệt cũ như IE8 không hỗ trợ những tính năng trong ES6, chẳng hạn như một trong những tính năng của Method arrays đó là Array.include(). 

Chính vì vậy nếu chính chúng ta đang triển khai trên IE8 thì chúng ta sẽ phải viết một method riêng để hỗ trở nó. Đi sâu hơn chúng ta hãy xem một vài ví dụ mà tôi triển khai.

Polyfill JavaScript

Giả sử rằng chúng ta chạy câu lệnh này trên browser Chrome như sau:

const contacts = ['Brooke', 'Becca', 'Nathan', 'Adam', 'Michael']
if (contacts.includes('Rachel')) {
  console.log('You have a Rachel!')
}

Rất ok , thế nhưng khi áo dụng cho IE thì sẽ nhận được một lỗi như sau:

Uncaught TypeError: contacts.includes is not a function

"Uncaught TypeError: contacts.includes is not a function" đó là browser iE không support medthos này. Chính vì thế ta phải viết một method riêng cho ta, hay còn gọi là Polyfill js đấy. Cách viết thế nào sao cho đúng, thì hay xem tôi giải thích:

if (!Array.prototype.includes) {
  Array.prototype.includes = function includes(searchElement) {
    return this.indexOf(searchElement) !== -1
  }
}

Đó là cách viết một polyfill khi trình duyệt không hỗ trợ method includes(). Chú ý, khi dùng if có nghĩa là nếu chức năng này chưa tồn tại thì có thể sử dụng cái mà tôi viết. CÒn nếu mà nó tồn tại rồi, thì sẽ không đi vào phần mà tôi viết. Chú ý !Array.prototype.includes có dấu chấm than (!) nhé.

Tóm lại

Một số điều đơn giản, nhưng đôi lúc chúng ta bỏ quên. Hay có nhiều trường hợp mà tôi gặp phải là "Ồ giờ cái này em viết nhiều mà em không biết gọi nó là như thế nào?". Đó khổ vậy đó cho nên hy vọng rằng những bài viết thuộc Series Mẹo JavaScript sẽ giúp bạn nhiều hơn.

 Xin chào!