大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

polyfill vs Ponyfill vs Prollyfill

今天的主题是前端经常遇到的Polyfill、Ponyfill、Prollyfill，三个单词长得很像，那么它们有什么区别呢？

1.什么是polyfill？

polyfill 是通过修补 API 来添加缺失功能的代码。典型的例子是在旧浏览器中添加新功能。 例如，Modernizr 检测浏览器功能并使用一组 polyfill 来启用旧浏览器中的浏览器功能，或者提供尚不支持的功能的补丁。

什么是polyfill

下面代码是笔者用于处理Android 4.4以下浏览器webview不支持部分功能的代码，分别添加了url-polyfill（可以使用new URL）、babel-polyfill、es5-shim（部分代码兼容）这3个polyfill：

这种解决方案的问题是，因为它们是修补缺失的API方法，所以特点是污染全局作用域。

2.Ponyfill

图片引用自：https://github.com/sindresorhus/ponyfill

ponyfill 的做法更聪明一些：它不会污染全局范围，而是将功能导出为模块。 例如，一个 Number.MAX_SAFE_INTEGER ponyfill 的例子可以是：

module.exports = 9007199254740991
// 使用模块导出

重要的是不要在 ponyfill 实现中使用本地方法，因为环境差异，这些方法可能表现不同。

如果你想使用本地方法，你可以将它包装在模块 escope 之外：

const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || require('number-max-safe-integer')
// 做下代码兼容

3.Prollyfill是什么？

Prollyfill是什么？

prollyfill是用于尚未标准化的 API 的 polyfill。它提供了将来可以本地支持，但目前在 EMACScript 规范中缺失的功能。比如下面是trim方法的polyfill：

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[s  ]+|[s  ]+$/g, '');
  };
}

这里的函数trim就是所说的prollyfill：

function trim (text) {
  return text.replace(/^[s  ]+|[s  ]+$/g, '');
}

又例如，我希望将 JSON.save 或 JSON.load 视为本地方法，但目前浏览器环境缺少它们，这时候就可以考虑使用prollyfill。比如可以用下面的三方库来提供上面2个方法：

const jsonFuture = require('json-future')

参考资料

https://kikobeats.com/polyfill-ponyfill-and-prollyfill/

https://github.com/Kikobeats/json-future

https://ponyfoo.com/articles/polyfills-or-ponyfills