Shim、Polyfill

目录

基础知识

简介

Shim

Pollyfill

实例

ES6 polyfill

ES6 Promise polyfill

---

基础知识

简介

Shim

Shim【垫片】可理解为是指仅依靠旧的环境里已有的方法实现模拟出一个新的API，方便不同的浏览器表现出相同的效果。

Shim的一种通常做法是针对旧版本浏览器对新特性支持的不足，做一些兼容性的库，例如JQuery里的$.ajax封装了window.XMLHttpRequest和IE里的ActiveXObject来创建xhr对象。

Shim的一个特点是拦截浏览器里的一些旧的API调用，并提供自己的API实现。

Shim是实践优雅降级开发理念的一种方法。

Pollyfill

Pollyfill【填充物】可以理解为是用于为旧版本浏览器提供它没有原生支持的较新语法和功能的实现代码，通俗点说可以理解为通过js代码【插件】提高程序运行时的浏览器兼容性。

Pollyfill的一种通常做法是检查当前浏览器是否支持某个API，不支持的话就加载对应的Pollyfill，使其支持该API。例如ajax提交表单时，在IE浏览器中增加window.XMLHttpRequest，而内部实现用IE浏览器自带的ActiveXObject。

Pollyfill可以理解为是Shim的一种，但是其API是遵循标准的，而Shim设计的API则是自定义设计的【不一定遵循标准】。

例如有的旧版本浏览器不支持js ES6语法新特性，而开发的程序中却用到了js ES6新特性，这时就要考虑使用Pollyfill。

实例

ES6 polyfill

代码示例：

<script type="text/javascript" src ="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>

如果引入加载速度慢的话可以考虑把文件下载到本地文件夹并引用。

ES6 Promise polyfill

代码示例：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>