Internet Explorer memang browser yang sudah mulai ditinggalkan, bahkan oleh Microsoft sendiri sudah tidak memperbarui versinya lagi sejak versi 11. Namun, beberapa organisasi masih menggunakan IE karena sudah bertahun-tahun digunakan oleh seluruh stakeholder dan aplikasi yang ada di organisasi mereka. Sehingga, ada kalanya kita harus mengikuti kebutuhan organisasi, dengan membuat aplikasi web kita compatible untuk dijalankan pada IE. Maka, kita coba run aplikasi web yang sudah kita bangun di browser IE.
Negara api mulai menyerang, Javascript yang paling hancur berantakan. Inilah list kehancuran Javascript:
- Undefined Functions
- String.startsWith
- Array.includes
- Default Parameter
- Class
- Date
- Promise
Disclaimer: kehancuran ini adalah kehancuran yang saya pribadi temukan. Belum tentu semua kehancuran yang terjadi tercantum di list di atas.
Lalu apa yang harus kita lakukan untuk memperbaiki kehancuran yang terjadi?
Undefined Functions
Fungsi yang belum tersedia pada IE, harus kita sediakan sendiri. Masukkan code snippet ini ke file javascript yang di-include di seluruh halaman aplikasi web kita.
// String.startsWith
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}
// Array.includes
if (!Array.prototype.includes) {
Array.prototype.includes = function (obj) {
var newArr = this.filter(function (el) {
return el == obj;
});
return newArr.length > 0;
};
}
Default Parameter
Fungsi dengan default parameter tidak di-support di IE, sehingga kita harus mengubahnya. Before:
function foo(id = null, name = "") { }
After:
function foo(id, name) {
if (id === undefined) { id = null; }
if (name === undefined) { name = ""; }
}
Class
IE ini tidak berkelas, lihat saja, kode ini akan menghasilkan error pada IE:
class Angri {
constructor(tangan, kaki) {
this.tangan = tangan;
this.kaki = kaki;
}
}
Solusinya, ubah seluruh penggunaan kelas dengan function. Seperti berikut ini:
function Angri (tangan, kaki) {
this.tangan = tangan;
this.kaki = kaki;
}
Angri.prototype.tangan = ""; // default value
Angri.prototype.kaki = ""; // default value
Date
Pada browser populer lain, fungsi new Date dapat melakukan parse pada string dengan informasi tanggal / waktu seadanya, atau yang tidak terformat dengan baik. Tapi pada IE, tidak semudah itu ferguso.
Pada browser lain:
var a = new Date ("17/07/2019 15:08:29"); // a = date 17 Jul 19 15:08:29
var b = new Date ("17/07/2019 15.08.29"); // b = date 17 Jul 19 15:08:29
var c = new Date ("17 July 2019"); // c = date 17 Jul 19 00:00:00
var d = new Date ("July 2019"); // d = date 1 Jul 19 00:00:00
Pada IE:
var a = new Date ("17/07/2019 15:08:29"); // a = date 17 Jul 19 15:08:29
var b = new Date ("17/07/2019 15.08.29"); // exception :D
var c = new Date ("17 July 2019"); // c = date 17 Jul 19 00:00:00
var d = new Date ("July 2019"); // exception juga :D
Menarik sekali bukan?? Solusinya, rapikan dulu string yang akan di parse. Pastikan sesuai dengan format IE yang manjah.
Promise
Ini sampai sekarang saya juga belum menemukan solusinya. Ada solusi yang cukup membantu, yaitu dengan include fungsi promise (salah satunya dengan polyfill, ini juga bisa utk undefined functions), tetapi untuk sebagian kasus, promise tetap tidak bisa digunakan.
