Using Polyfills to implement missing language features

medini_1024169437

You may have noticed or read in one of the articles in this board that the Java Script engine that is used in medini is not supporting all concepts and language details that are available in top-notch browser engines. So if you frequenlty search the net for some nice JS solution and it does not work, you may have hit a limitation in the engine language.

This problem is not solely a medini problem, web developers get nightmares when they have to develop pages for IE11. Fortunately there is a solution out there which is named "polyfills". In short: "a polyfill is code that implements a feature on web browsers that do not support the feature" (see wikipedia). So you basically can implement a missing language feature with JS itself. The prototype way of things in JS makes it possible!

Example

Lets take this simple example:

var a = [ "Foo", "Bar", "Foo bar" ];

if (a.includes("Foo")) {
	alert("Yahoo!");
} else {
	alert("You fool!");
}

This will fail with

We can extend the script and actually check at runtime whether Array.includes is available:

var a = [ "Foo", "Bar", "Foo bar" ];

if (!Array.prototype.includes) {
	throw "This JS engine does not support Array.includes which is bad";
}

if (a.includes("Foo")) {
	alert("Yahoo!");
} else {
	alert("You fool!");
}

This will bail out if the engine does not support Array.includes. So far so good. Now the Polyfill. There are plenty of Polyfills available in the net for each and everything. You can simply search for it. For Array.includes I actually copied one from https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

The final script is attached as a file because it is now  a bit bigger but basically looks like:

var a = [ "Foo", "Bar", "Foo bar" ];

if (!Array.prototype.includes) {
	 Object.defineProperty(Array.prototype, 'includes', {
	 value: function(searchElement, fromIndex) {
	 	...
	 }
	 });
	}

if (a.includes("Foo")) {
	alert("Yahoo!");
} else {
	alert("You fool!");
}

Happy Scripting