ployfill是什么

ployfill是什么

有一些老的浏览器不支持一些api,怎么办呢?那就要手动地去增加一些额外的东西让它可以正常使用啦。

polyfill相当于一段代码,它先检查这个浏览器是否支持某个API,如果不支持就加载对应的polyfill

抛出问题:
vue-awesome-swiper在IE9下报错,是不是不支持IE9?

解答问题:
主要原因是element.classlist.add()方法在ie9中是不支持的。

解决方案:

// 解决方法是加个ployfill:
npm install classlist-polyfill --save
 // 在webpack.base.conf.js中 加入classlist-polyfill,
如:module.exports = 
{entry: 
{  app: 
['classlist-polyfill', 'babel-polyfill', './src/main.js']
},
....

}

之所以能做 polyfill,是因为这些特性都不是语言特性,而是 api,函数,类什么的,它们通过现有的技术是能够实现的。例如以前的 Array.prototype.includes() ,很显然用了Array.prototype.indexOf() 就能实现。而那些与语言特性相关,或者使用了宿主环境不提供的能力的,就无法自拔polyfill 了。例如,fetch 无法完全 polyfill,只能部分模拟,因为它涉及到流,不支持 fetch 的浏览器都没有提供面向流编程的接口。symbol 和 WekMap 也无法 polyfill,它们属于语言特性

咦,你是不是有疑问,babel不是可以做编译吗,可以把高级语法编译成低级语法,达到兼容。

看个例子:

// 转换前代码
let array = [1, 2, 3, 4, 5, 6];
array.includes(item => item > 2);
new Promise()
// Babel转换后代码
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
  return item > 2;
});
new Promise()

Babel 默认只是转换了 箭头函数 let ,但是Promise 和 includes 都没有转换 ,这是为什么

Babel 把 Javascript 语法 分为 syntax 和 api

先说 api , api 指那些我们可以通过 函数重新覆盖的语法 ,类似 includes,map,includes,Promise,凡是我们能想到重写的都可以归属到 api啥子是 syntax ,像 箭头函数,let,const,class, 依赖注入 Decorators,等等这些,我们在 Javascript 在运行是无法重写的,想象下,在不支持的浏览器里不管怎么样,你都用不了 let 这个关键字

很多人以为只要 引用了 Babel 就不会出现兼容性问题了,这个是大错特错的

所以,在有些情况下,就得需要ployfill的出场相救啦~

shim是什么

一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现 一个polyfill就是一个用在浏览器API上的shim.
polyfill 是 shim 的一种。

上一篇:轮播图


下一篇:选项卡