Polyfill是什么

polyfill 是什么

Polyfill是一个js库，主要抚平不同浏览器之间对 js 实现的差异。帮你把这些差异化抹平，不支持的变得支持了。

例如 IE 一直没有实现Array.includes()这个方法, 于是我们为了在 IE 实现这个方法，就会引用下面的polyfill。

// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {Object.defineProperty(Array.prototype, "includes", {value: function (searchElement, fromIndex) {if (this == null) {throw new TypeError('"this" is null or not defined');}// 1. Let O be ? ToObject(this value).var o = Object(this);// 2. Let len be ? ToLength(? Get(O, "length")).var len = o.length >>> 0;// 3. If len is 0, return false.if (len === 0) {return false;}// 4. Let n be ? ToInteger(fromIndex).//    (If fromIndex is undefined, this step produces the value 0.)var n = fromIndex | 0;// 5. If n ≥ 0, then//  a. Let k be n.// 6. Else n < 0,//  a. Let k be len + n.//  b. If k < 0, let k be 0.var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);function sameValueZero(x, y) {return (x === y ||(typeof x === "number" &&typeof y === "number" &&isNaN(x) &&isNaN(y)));}// 7. Repeat, while k < lenwhile (k < len) {// a. Let elementK be the result of ? Get(O, ! ToString(k)).// b. If SameValueZero(searchElement, elementK) is true, return true.if (sameValueZero(o[k], searchElement)) {return true;}// c. Increase k by 1.k++;}// 8. Return falsereturn false;},});
}

加入之后就可以在 IE 浏览器环境下使用Array.includes()方法了。

如何使用

<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>

这包含了我们默认的 polyfill 设置。这个默认设置是我们人工挑选的一个特性列表，我们认为这个列表中所包含的特性对于现代网络开发来说不可或缺，而且相对应的 polyfill 相当小且十分精确。如果你想指定添加某个 polyfill 特性，只需要这么做：

<!-- 只需要Array.from polyfill --><scriptsrc="//cdn.polyfill.io/v1/polyfill.min.js?features=Array.from"asyncdefer
></script><scriptsrc="//cdn.polyfill.io/v1/polyfill.min.js?features=default,Navigator.prototype.geolocation"asyncdefer
></script>

参考文章：

https://cnodejs.org/topic/57106c9a6a2d2bda52de95dc
https://medium.com/@alexian853/polyfill%E6%98%AF%E4%BB%80%E9%BA%BC-bc07fd6eb880

Polyfill是什么相关推荐

position:sticky 的 polyfill——stickyfill 源码浅析
本人最近在修改 blogsue 中的样式时,使用到了 position: sticky.话不多说,开始主要内容. 定义 position: sticky 是 CSS position 属性的一个新值. ...
vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
ie 报错 vuex requires a Promise polyfill in this browser
<script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script> 转载于:https://www.cnblo ...
IE报vuex requires a Promise polyfill in this browser问题解决
使用Vuex, IE浏览器报错因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本的浏览器不支持. 解决方法第一步: 安装 babel-polyfill . babel-poly ...
ES6 Proxy兼容polyfill实现
2019独角兽企业重金招聘Python工程师标准>>> Proxy 可以拦截对象的读取.修改遍历等操作,这个polyfill只支持get和set. 通过defineProperty和 ...
javascript --- polyfill中几个常用方法
ES6中,新增了许多有用的方法,下面分享几个ES6之前得版本写的polyfill Number.EPSILON: // 机器精度,并判断2个数是否相等 if(!Number.EPSILON){Numb ...
前端“黑话”polyfill
前言在Web前端开发这个日新月异的时代,总是需要阅读一些最新的英文技术博客来跟上技术的发展的潮流.而有时候会遇到一些比较高频的"黑话",在社区里面可能已经是人人皆知的" ...
bind函数polyfill源码解析
准备知识使用new来调用函数会自动执行下面的操作: 创建一个全新的对象这个新对象会被执行原型连接这个新对象会绑定到函数调用的this 如果函数没有返回其他对象,那么new表达式中的函数调用会自动 ...
babel6和babel7中关于polyfill和preset-env和babel-plugin-transform-runtime等总结
记录自己零散的收获,随笔. 一些基础 babel的作用是转换JS新的特性代码为大部分浏览器能运行的代码. babel转码又分为两部分,一个是语法转换,一个是API转换. 对于API的转换又分为两部分, ...
一起Polyfill系列：Function.prototype.bind的四个阶段
昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用其实 ...

Polyfill是什么

polyfill 是什么

如何使用

Polyfill是什么相关推荐

最新文章

热门文章