快捷導(dǎo)航

JavaScript中常見的Polyfill介紹

更新時間：2023年12月07日 16:01:23 作者：慕仲卿

在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見的JavaScript Polyfill兼容方案,并舉例說明它們的應(yīng)用,需要的可以參考下

Promise

旅程始于Promise，異步編程的瑰寶。在舊環(huán)境中缺失此寶物時，es6-promise庫為其承擔(dān)擔(dān)保角色。

// 引入es6-promise并實現(xiàn)polyfill
require('es6-promise').polyfill();
或者
const Promise = window.Promise = require('es6-promise').Promise;

Array.prototype.includes

搜索Array中的元素變得如此簡單。如果環(huán)境尚未支持，array-includes庫即刻效力。

// 引用array-includes庫
var includes = require('array-includes');
includes.shim(); // 執(zhí)行shim方法，將includes方法添加到Array.prototype

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

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

Object.assign

復(fù)制對象得心應(yīng)手，但不在每處可行。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

遠(yuǎn)程數(shù)據(jù)的擒取者，F(xiàn)etch 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

尋覓數(shù)組中的寶物不再艱難，array.prototype.find庫為探索者提供指南。

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

URLSearchParams

解析查詢字符串，構(gòu)建URL參數(shù)無須雕琢，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

將非數(shù)組之物變形為數(shù)組，“Array.from”應(yīng)聲而出，array-from便能施法。

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

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

Symbol

在現(xiàn)代編程語墓中綻放的Symbol，es6-symbol確保其于舊環(huán)境中同樣燦爛。

// 引入es6-symbol實現(xiàn)polyfill
const Symbol = require("es6-symbol");
 
const symbol = Symbol("My custom symbol");
const x = {};
 
x[symbol] = "foo";
console.log(x[symbol]);
("foo");

Number.isNaN

確認(rèn)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));

結(jié)語

在兼容性的海洋中航行，Polyfill為船，開發(fā)者為帆。每一段代碼都是原汁原味的探險，而Polyfill則確保舊世界與新世界之間的通行無阻。向著更宜居的互聯(lián)網(wǎng)邁進(jìn)，在每個角落激發(fā)代碼的魅力，這是開發(fā)的藝術(shù)，這是進(jìn)步的旋律。

到此這篇關(guān)于JavaScript中常見的Polyfill介紹的文章就介紹到這了,更多相關(guān)JavaScript Polyfill內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: