Polyfill 和 Shim

• Author: CodecWang
• Date: 2020/08/30

说实话，这两个术语名字取的，确实让人难以一下子理解。但理解了之后又不得不佩服这取名：妙啊。

示例

比如你想判断一个数是不是整数，那么你可能会用到 JavaScript 的Number.isInteger()

代码语言：javascript复制

Number.isInteger(9);      // true
Number.isInteger(4 / 3);  // falseCopy to clipboardErrorCopied

你在 Chrome 开发者工具的 console 中运行，没问题，但在 IE 上却报错了：对象不支持 “isInteger” 属性或方法，这是因为 IE 并不支持这一特性（浏览器兼容性自查）。

那怎么办呢？我们可以自己写一段代码来实现Number.isInteger

代码语言：javascript复制

Number.isInteger = Number.isInteger || function(value) {
  return typeof value === "number" && 
         isFinite(value) && 
         Math.floor(value) === value;
};Copy to clipboardErrorCopied

这样，在原生支持isInteger的 Chrome 浏览器上，还是用的原生接口，而在不支持的 IE 浏览器上就会调用我们写的函数。这种代码块就叫 Polyfill。MDN 上有时会给出所查询接口的 Polyfill 代码，很贴心，如Number.isInteger()

Polyfill

Polyfill 本身是一个网络词汇，意思是软质的填充物。创造者是 Remy Sharp，在他的网站上做了详细的解释：What is a Polyfill?

Remy Sharp 有次喝咖啡的时候想着用一个词来表达这种含义："如果浏览器没有原生实现某个 API，就用 JavaScript(或 flash 或其他手段) 来实现它"。于是他就从一个叫 Polyfilla 的墙料产品上获得灵感，拍脑袋造了这个词