首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript Polyfill

JavaScript中常见的Polyfill介绍

2023-12-07 16:01:24 作者：慕仲卿

在多姿多彩的JavaScript世界,Polyfill如同一座架在浏览器兼容性鸿沟之上的桥梁,本文将介绍常见的JavaScript Polyfill兼容方案,并举例说明它们的应用,需要的可以参考下

在多姿多彩的JavaScript世界，Polyfill如同一座架在浏览器兼容性鸿沟之上的桥梁，让新生的Web特性得以在陈旧浏览器中生根发芽。本文将介绍常见的JavaScript Polyfill兼容方案，并举例说明它们的应用。

Promise

旅程始于Promise，异步编程的瑰宝。在旧环境中缺失此宝物时，es6-promise库为其承担担保角色。

// 引入es6-promise并实现polyfill
require('es6-promise').polyfill();
或者
const Promise = window.Promise = require('es6-promise').Promise;

Array.prototype.includes

搜索Array中的元素变得如此简单。如果环境尚未支持，array-includes库即刻效力。

// 引用array-includes库
var includes = require('array-includes');
includes.shim(); // 执行shim方法，将includes方法添加到Array.prototype

var arr = [ 'one', 'two' ];

includes(arr, 'one'); // true
includes(arr, 'three'); // false
includes(arr, 'one', 1); // false

Object.assign

复制对象得心应手，但不在每处可行。object-assign便是解答。

// 使用object-assign模块来模拟Object.assign
var assign = require('object-assign');

objectAssign({foo: 0}, {bar: 1});
//=> {foo: 0, bar: 1}
 
// multiple sources
objectAssign({foo: 0}, {bar: 1}, {baz: 2});
//=> {foo: 0, bar: 1, baz: 2}
 
// overwrites equal keys
objectAssign({foo: 0}, {foo: 1}, {foo: 2});
//=> {foo: 2}
 
// ignores null and undefined sources
objectAssign({foo: 0}, null, {bar: 1}, undefined);
//=> {foo: 0, bar: 1}

Fetch

远程数据的擒取者，Fetch API。未得原生支持则启用whatwg-fetch。

// 使用whatwg-fetch来引入fetch的polyfill
require('whatwg-fetch');
// 或者
import 'whatwg-fetch'

// 使用
fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

Array.prototype.find

寻觅数组中的宝物不再艰难，array.prototype.find库为探索者提供指南。

// 引用array.prototype.find
require('array.prototype.find').shim();

URLSearchParams

解析查询字符串，构建URL参数无须雕琢，url-search-params-polyfill轻松办到。

// as a function
const find = require('array.prototype.find');
find([1, 2], function (x) { return x === 2; }); // 2

// to shim it
require('array.prototype.find').shim();

// Default:
[1, 5, 10, 15].find(function (a) { return a > 9; }) // 10

String.prototype.startsWith

判断字符串始于何处？使用string.prototype.startswith，答案尽在掌握。

// 添加String.prototype.startswith的Polyfill
require('string.prototype.startswith').shim();

Array.from

将非数组之物变形为数组，“Array.from”应声而出，array-from便能施法。

// 使用array-from模拟Array.from功能
const from = require('array.from');
const assert = require('assert');

assert.deepEqual(from('abc'), ['a', 'b', 'c']);

Symbol

在现代编程语墓中绽放的Symbol，es6-symbol确保其于旧环境中同样灿烂。

// 引入es6-symbol实现polyfill
const Symbol = require("es6-symbol");
 
const symbol = Symbol("My custom symbol");
const x = {};
 
x[symbol] = "foo";
console.log(x[symbol]);
("foo");

Number.isNaN

确认NaN，无需多疑。is-nan提供确凿答案。

// 使用is-nan代替Number.isNaN
Number.isNaN = require('number.isnan');
var assert = require('assert');

assert.notOk(Number.isNaN(undefined));
assert.notOk(Number.isNaN(null));
assert.notOk(Number.isNaN(false));
assert.notOk(Number.isNaN(true));
assert.notOk(Number.isNaN(0));
assert.notOk(Number.isNaN(42));
assert.notOk(Number.isNaN(Infinity));
assert.notOk(Number.isNaN(-Infinity));
assert.notOk(Number.isNaN('foo'));
assert.notOk(Number.isNaN(function () {}));
assert.notOk(Number.isNaN([]));
assert.notOk(Number.isNaN({}));

assert.ok(Number.isNaN(NaN));

结语

在兼容性的海洋中航行，Polyfill为船，开发者为帆。每一段代码都是原汁原味的探险，而Polyfill则确保旧世界与新世界之间的通行无阻。向着更宜居的互联网迈进，在每个角落激发代码的魅力，这是开发的艺术，这是进步的旋律。

到此这篇关于JavaScript中常见的Polyfill介绍的文章就介绍到这了,更多相关JavaScript Polyfill内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！