大家好,很高兴又见面了,我是前端进阶,由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发! polyfillvsPonyfillvsProllyfill 今天的主题是前端经常遇到的Polyfill、Ponyfill、Prollyfill,三个单词长得很像,那么它们有什么区别呢?1。什么是polyfill? polyfill是通过修补API来添加缺失功能的代码。典型的例子是在旧浏览器中添加新功能。例如,Modernizr检测浏览器功能并使用一组polyfill来启用旧浏览器中的浏览器功能,或者提供尚不支持的功能的补丁。 什么是polyfill 下面代码是笔者用于处理Android4。4以下浏览器webview不支持部分功能的代码,分别添加了urlpolyfill(可以使用newURL)、babelpolyfill、es5shim(部分代码兼容)这3个polyfill:!urlpolyfill。min。js!babelpolyfill6。26。0polyfill。min。js!es5shim4。6。7es5shim。min。js 这种解决方案的问题是,因为它们是修补缺失的API方法,所以特点是污染全局作用域。2。Ponyfill 图片引用自:https:github。comsindresorhusponyfill ponyfill的做法更聪明一些:它不会污染全局范围,而是将功能导出为模块。例如,一个Number。MAXSAFEINTEGERponyfill的例子可以是:module。exports9007199254740991使用模块导出 重要的是不要在ponyfill实现中使用本地方法,因为环境差异,这些方法可能表现不同。 如果你想使用本地方法,你可以将它包装在模块escope之外:constMAXSAFEINTEGERNumber。MAXSAFEINTEGERrequire(numbermaxsafeinteger)做下代码兼容3。Prollyfill是什么? Prollyfill是什么? prollyfill是用于尚未标准化的API的polyfill。它提供了将来可以本地支持,但目前在EMACScript规范中缺失的功能。比如下面是trim方法的polyfill:if(!String。prototype。trim){String。prototype。trimfunction(){returnthis。replace(〔s〕〔s〕g,);};} 这里的函数trim就是所说的prollyfill:functiontrim(text){returntext。replace(〔s〕〔s〕g,);} 又例如,我希望将JSON。save或JSON。load视为本地方法,但目前浏览器环境缺少它们,这时候就可以考虑使用prollyfill。比如可以用下面的三方库来提供上面2个方法:constjsonFuturerequire(jsonfuture) 参考资料 https:kikobeats。compolyfillponyfillandprollyfill https:github。comKikobeatsjsonfuture https:ponyfoo。comarticlespolyfillsorponyfills