/polyfill

JavaScript Polyfills, Shims and More

Primary LanguageJavaScriptOtherNOASSERTION

polyfill - JavaScript Polyfills, Shims and More

  • A shim lets you write the same code across all browsers by implementing a new API in downlevel browsers.
  • A polyfill is a shim or collection of shims (and a catchy name).
  • A prollyfill is a shim for a proposed API
  • A helper helps write cross-browser code where a true API shim/polyfill is not possible.

Note that my general approach to polyfills is not to produce 100% compliant behavior, but to provide a broad subset of functionality so that, where possible, cooperative code can be written to take advantage of new APIs. No assumptions should be made about security or edge cases. It is preferrable to use a shim where it is possible to create one on supported browsers. If not possible, a helper should be used that lets the same code be used in all browsers.

I use these in various pages on my sites; most are by me, or I have at least tweaked them. A more comprehensive list can be found at The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks by Paul Irish.

Web Standards / Browser Compat

script - unit tests

Bundled together; nearly every page I create needs at least some of these. These will change over time, and going forward I will only target IE8 and later.

  • XMLHttpRequest (for IE6-)
  • FormData (for IE9-)
  • Selector API (for IE7-) - adapted from Paul Young
    • element = document.querySelector(selector)
    • elementArray = document.querySelectorAll(selector)
  • DOM Events
    • Where EventTarget is window, document, or any element:
    • EventTarget.addEventListener(event, handler) - for IE8+
    • EventTarget.removeEventListener(event, handler) - for IE8+
    • window.addEvent(EventTarget, event, handler) - helper for IE7- support - adapted from QuirksMode
    • window.removeEvent(EventTarget, event, handler) - helper for IE7- support - adapted from QuirksMode
    • Event.target
    • Event.currentTarget
    • Event.eventPhase
    • Event.bubbles
    • Event.cancelable
    • Event.timeStamp
    • Event.defaultPrevented
    • Event.stopPropagation()
    • Event.cancelBubble()
  • DOM Miscellany
    • document.head
    • elementArray = document.getElementsByClassName(classNames)
  • HTML Web Application APIs (for IE9-)
    • encodedString = window.btoa(binaryString) - Base64 Encode
    • binaryString = window.atob(encodedString) - Base64 Decode
  • HTML5 Infrastructure - classListspec, relListspec
    • tokenList = elem.classList - for IE8+
    • tokenList = elem.relList - for IE8+
    • tokenList = window.getClassList(element) - helper for IE7- support
    • tokenList = window.getRelList(element) - helper for IE7- support
    • tokenList.length
    • tokenList.item(index)
    • tokenList.contains(token)
    • tokenList.add(token)
    • tokenList.remove(token)
    • tokenList.toggle(token)
  • W3C Timing control for script-based animations - demo page
    • id = window.requestAnimationFrame()
    • window.cancelAnimationFrame(id)
  • Efficient Script Yielding
    • id = setImmediate(callback, args...)
    • clearImmediate(id)
  • dataset and data-* attributes spec (for IE8+, not available in IE7-)
    • str = element.dataset[key] - yields undefined if data-key attribute not present
    • element.dataset[key] = str - fails unless data-key attribute already present
  • JavaScript 1.X String Extras
    • String prototype: trimLeft, trimRight, quote

ECMAScript 5 (polyfill)

script - unit tests

ECMAScript 5 Object, Function, String and Date extras:

  • Object: getPrototypeOf, getOwnPropertyNames, create, defineProperty, defineProperties, keys
  • Function prototype: bind
  • Array: isArray
  • Array prototype: indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight
  • String prototype: trim
  • Date: now
  • Date prototype: toISOString

Does not include JSON - use json2.js

ECMAScript "Harmony" (prollyfills)

"Harmony" is the aspirational term for the future of ECMAScript (the standardized version of JavaScript) beyond ES5.

ES6

script - unit tests

The standardization of ES6 is currently in progress. This will attempt to track the evolving spec, so may change at any time. This assumes ES5, so use es5.js for older browsers (IE9-).

In the ES6 Drafts:

Fundamental Objects

  • Object: assign(), is(), setPrototypeOf()
  • Symbol: Symbol(description), Symbol.for(), Symbol.keyFor(), Symbol.iterator, Symbol.toStringTag
    • No security, just creates an object with a unique string representation. typeof Symbol() will incorrectly report "object" but Symbol() instanceof Symbol will return true
  • Not supported: Function.prototype.toMethod()

Numbers and Dates

  • Number: EPILON, isFinite(), isInteger(), isNaN(), isSafeInteger(), MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, parseFloat(), parseInt()
  • Math: acosh(), asinh(), atanh(), cbrt(), clz32(), cosh(), expm1(), fround, hypot(), imul(), log1p(), log10(), log2(), sign(), sinh(), tanh(), trunc()

Text Processing

Indexed Collections

  • Array: from(), of()
  • Array prototype: copyWithin(), entries(), fill(), find(), findIndex(), keys(), values(), [@@iterator]()
  • TypedArray - for browsers without native support (IE9-) include typedarray.js
  • %TypedArray% prototype: from(), of()
  • %TypedArray% prototype: copyWithin(), entries(), every(), fill(), filter(), find(), findIndex(), forEach(), indexOf(), join(), keys(), lastIndexOf(), map(), reduce(), reduceRight(), reverse(), slice(), some(), sort(), values(), [@@iterator]()

Keyed Collections

  • Map: clear(), delete(), entries(), forEach(), get(), keys(), has(), set(), size, values(), [@@iterator]()
  • Set: add(), clear(), delete(), entries(), forEach(), has(), size, values(), [@@iterator]()
  • WeakMap: clear(), delete(), get(), has(), set()
  • WeakSet: add(), clear(), delete(), has()
    • WeakMap and WeakSet are intrusive and modify the valueOf property of keys

Asynchronous Programming

  • Promise: p = new Promise(), Promise.resolve(), Promise.reject(), Promise.cast(), Promise.race(), Promise.all(), p.then(), p.catch()
  • promises spec

Not Yet Approved

  • Number: compare() - probably won't be in ES6
  • Array prototype: pushAll(), contains() ref
  • @dict module: keys(dict), values(dict), entries(dict)
    • dict() is shortcut for Object.create(null) - this needs a rework

Syntax Helpers

  • forOf(o, function(i) { ... }) - since for (i of o) { ... } can't be polyfilled. Uses iterators, so works with arrays, maps, sets, and strings, via implicit @@iterator and explicit iterators returned by keys/values/entries methods and functions.

See also: uate - ES5 "tagged template strings"

Typed Arrays

script - unit tests - spec

Originally specified separately, Typed Arrays are now included in ES6.

  • ArrayBuffer
  • Uint8Array, Int8Array, Uint16Array, Int16Array, Uint32Array, Int32Array, Float32Array, Float64Array
  • DataView

Creating index getter/setters (i.e. array[0], array[1], etc) is slow and consumes significant memory. Arrays larger than 100k entries will be too slow to initialize in most cases so an upper limit is placed on the size of arrays and exception is thrown on construction.

Experimental

ES7 Proposals

WHATWG URL API

script - unit tests - draft spec - See script for cross-browser quirks

var url = new URL(url, base);
var value = url.searchParams.get(name);
var valueArray = url.searchParams.getAll(name);
url.searchParams.append(name, valueOrValues);
url.searchParams.delete(name);

URL objects have properties:

  • href
  • origin
  • protocol
  • username
  • password
  • host
  • hostname
  • port
  • pathname
  • search
  • searchParams
    • append(name, value)
    • delete(name)
    • get(name)
    • getAll(name)
    • has(name)
    • set(name, value)
  • hash

W3C Keyboard Events (polyfill)

script - demo page - draft spec

// Adds the following properties to each KeyboardEvent:
event.code
event.location

// You can get a label for the key using:
KeyboardEvent.queryKeyCap(code);

// IE7- only: In your keydown/keyup handler, call this in your handler
// before accessing the `code` or `location` properties:
window.identifyKey(keyboardEvent);

W3C Geolocation API

script - demo page - spec - uses freegeoip.net

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
navigator.geolocation.clearWatch(watchId);

Obsolete

Obsolete and Unmaintained Polyfills