Introduction

Chúng ta có nhiều cách để hỗ trợ viết javascript cho những trình duyệt phiên bản cũ (IE 8, IE 9...), một trong số chúng là sử dụng Polyfill.Bạn đang xem: Polyfill là gì

What’s a polyfill?


*

Polyfill là một đoạn code để chỉ cho browser những cách để implement các javascript feature. Một khi chúng ta đã sử dụng polyfill cho một function nào đó thì sau đó chúng ta sẽ không cần lo lắng về việc liệu function hay method ta vừa viết có được browser support hay không nữa.Bạn đang xem: Polyfill là gì

Polyfill có phương thức hoạt động khá đơn giản như sau:

check xem feature có được browser support hay khôngnếu browser không support, nó sẽ add code để support việc implement feature

Lấy ví dụ về method Array.prototype.find, trong trường hợp browser không support Array.prototype.find, nó sẽ hướng dẫn browser cách để implement:

Using Polyfills

Về cơ bản, có 2 cách để sử dụng polyfill:

Polyfill manually: theo cách thủ công (giống như ta làm ở trên)Polyfill library: add nhiều polyfill cùng một lúc thông qua thư viện

Polyfilling manually

Đầu tiên chúng ta phải search polyfill mà chúng ta cần, có thể thông qua google, hiện giờ hầu như các function hay method mới mà các browser cũ ít hỗ trợ đều có sẵn polyfill trên MDN.

Bạn đang xem: Sự khác biệt giữa shim và polyfill là gì ? polyfill là gì

Sau khi tìm được polyfill phù hợp, chúng ta có thể add nó vào như đoạn code bên trên.

Polyfill library

Using cutting-edge JavaScript features

Ngoài ra chúng ta có thể sử dụng Babel - là tool với chức năng chính là compile Javascript, trong quá trình compile nó có thể đọc các file js, sau đó convert các file đó về dạng mà browser có thể hiểu được.

Xem thêm: Vecto Chỉ Phương Và Vecto Pháp Tuyến Trong Không Gian, Cách Tìm Vecto Pháp Tuyến Của Mặt Phẳng

What if polyfills aren’t enough?

Nếu trong trường hợp polyfill vẫn không đủ để support một feature nào đó, thì chúng ta nên cân nhắc lại một chút:

Liệu có cần dùng chính xác feature đấy cho các browser khác nhau không? chúng ta có thể sử dụng sang 1 feature khác tương đương nhưng đảm bảo các browser đều supportHoặc chúng ta có thể xử lý theo hướng khác mà không cần dùng đến feature đấy, hay thậm chí là không cần đến javascript?

How to tell if a browser supports the feature?

Để check xem feature mà chúng ta đang sử dụng được các browser nào hỗ trợ, ta có thể dùng caniuse.com. Viết javascript feature mà chúng ta muốn check, sau đó chúng ta có thể xem kết quả, vd như với Array.prototype.find:


*

*

Beware the cost of JavaScript

Khi chúng ta sử dụng polyfill, đồng nghĩa với việc chúng ta sẽ thêm nhiều dòng code javascript hơn. Một khi số lượng file js quá lớn, cũng sẽ gây nhiều ảnh hưởng:

Những browser cũ thường được sử dụng trên những hệ thống cũ, có nghĩa là việc phải tải số lượng file js lớn sẽ ảnh hưởng đến performanceSố lượng file js càng nhiều, quá trình Javascript bundle sẽ càng mất nhiều thời gian hơn

Summary

Bài viết nhằm chia sẻ về cách để support javascript với các browser cũ qua việc sử dụng Polyfill và các thư viện hay các tool liên quan. Bài viết còn nhiều hạn chế, cảm ơn bạn đã dành thời gian theo dõi.