从shim & polyfill谈浏览器兼容性

摘抄

shim:

shim是一个库，这个库中的方法接收的参数与调用方法与标准的方法一样，但是shim中的方法是自己实现逻辑处理的，因此在方法中加入了兼容性处理。所以方法的返回结果与标准方法相同。

备注： 所谓标准方法就是你原先调用的ES5或者ES6或者其它库中的原生方法。

polyfill:

polyfill指的是符合shim标准的API。polyfill API使用老方法来实现新功能，从而保证在低级浏览器中也能使用比较新的方法。

例如： 使用ES5中的方法来实现ES6中特定的方法，从而在原本不支持ES6的浏览器也能够使用ES6中新增的特定方法。

es5-shim.js/es5-shim-min.js:

可以让一些低级的浏览器支持ES5中的一些特性。

注意： 由于es5-shim.js使用的是EMCScript的原生方法来实现的，因此必须放在所有外部导入js文件的最上面。

es6-shim.js/es6-shim-min.js:

可以让一些低级的浏览器支持ES6中的一些特性。

require(‘es6-promise’).polyfill();

这个polyfill()方法能够在全局范围内处理promise方法。每当promise方法被调用，polyfill()方法就会自动修改为在低版本浏览器中也能处理的语法。

备注： 这个方法也可以写成：require(‘es6-promise/auto’);

最后再举一个处理兼容性的例子。

html5shiv/html5shim:

由谷歌提供的html5.js能够让IE9以下的浏览器也能够正确处理html5中新增的几个标签。正确的调用方法如下：

注意：

1.这里的注释是不能删除的。这个条件注释用于检查当前浏览器版本是否低于IE9，只有当前浏览器版本低于IE9时，这个js文件才会被引入。

2.这个条件注释必须放在head标签能。因为IE浏览器必须在元素解析前知道这个元素。如果放在其他位置则会导致失效！

除此之外还需要在CSS样式表中添加一条样式：

header,
section,
footer,
aside,
nav,
article,
figure {
    display: block;
}

备注： 这条样式是为了让低版本的浏览器能够将html5中新增的标签当作块级元素来处理。否则低版本会将这些元素当作行级元素进行处理。

总结：作为初学者，我还有很多东西理解的不全面或者不准确，如果我理解的有偏差，请您及时指出，便于我作出修整，避免其他初学者被误导。谢谢。