Belakangan ini Saya mulai mengimplementasikan teknik penyimpanan data konfigurasi JavaScript yang menarik pada ekstensi-ekstensi Mecha yang bekerjasama dengan JavaScript. Saya pikir, mungkin akan bermanfaat bila Saya menjabarkannya juga di sini alasannya ialah beberapa pengembang skrip Blogger tentu akan sangat terbantu dengan teknik semacam ini. Saya sendiri tidak tahu siapa yang pertama kali menawarkan gagasan ini, jadi untuk ketika ini Saya masih tidak sanggup menyebutkan orang-orang yang terkait dengan praktik semacam ini satu per satu. Metode klasik yang sering kita jumpai perihal bagaimana cara menyimpan variabel konfigurasi JavaScript ialah sebagai berikut:
Metode 1: Pada Tag Skrip Terpisah
Di sini pengguna diminta untuk mendefinisikan data konfigurasi pada variabel JavaScript yang diletakkan terpisah dari skrip utama.
<script> var config = { var_1: 'foo', var_2: 'bar', var_3: 4 }; </script> <script src="main.js"></script>Kemudian di dalam berkas main.js kita sanggup memanggil data konfigurasi yang ada satu per satu. Beberapa nilai default mungkin perlu ditentukan juga untuk memastikan skrip tetap sanggup bekerja meski pengguna tidak mendefinisikan data konfigurasi yang dibutuhkan pada variabel konfigurasi pengguna:
var config = config || {}; var var_1 = config.var_1 || 'foo', var_2 = config.var_2 || 'bar', var_3 = config.var_3 || 4; // Lakukan sesuatu dengan `var_1`, `var_2` dan `var_3` di sini…Metode 2: Pada Argumen Fungsi
Di sini pengguna diminta untuk mendefinisikan data konfigurasi pada variabel JavaScript sebagai parameter fungsi. Tampilannya lebih ringkas bila dibandingkan dengan metode pertama meski kita masih tetap memerlukan tag skrip terpisah. Parameter sanggup berupa satu variabel sebagai objek yang menyimpan beberapa data atau beberapa variabel yang masing-masing variabel menyimpan data tunggal:
Sebagai Objek
<script src="main.js"></script> <script> var main = new Main({ var_1: 'foo', var_2: 'bar', var_3: 4 }); </script>Kemudian di dalam berkas main.js:
function Main(config) { config = config || {}; this.var_1 = config.var_1 || 'foo'; this.var_2 = config.var_2 || 'bar'; this.var_3 = config.var_3 || 4; // Lakukan sesuatu dengan `this.var_1`, `this.var_2` dan `this.var_3` di sini… }Sebagai Deret Variabel
<script src="main.js"></script> <script> var main = new Main('foo', 'bar', 4); </script>Kemudian di dalam berkas main.js:
function Main(var_1, var_2, var_3) { this.var_1 = var_1 || 'foo'; this.var_2 = var_2 || 'bar'; this.var_3 = var_3 || 4; // Lakukan sesuatu dengan `this.var_1`, `this.var_2` dan `this.var_3` di sini… }Metode 3: Pada Elemen HTML
Beberapa ada juga yang memakai teknik penyimpanan data konfigurasi JavaScript pada elemen HTML yang terkait dengan sanksi skrip tertentu. Hal ini biasanya dipraktikkan untuk meringkas beberapa sanksi JavaScript sekaligus yang memerlukan data konfigurasi yang berbeda-beda pada masing-masing elemen HTML yang dikenai.
Ketika kita memakai metode ke dua, maka ini yang akan terjadi:
<div class="item" id="item-1"></div> <div class="item" id="item-2"></div> <div class="item" id="item-3"></div> <script src="main.js"></script> <script> var itam_1 = new Item(document.querySelector('#item-1'), { var_1: 'foo untuk item 1', var_2: 'bar untuk item 1', var_3: 4 }); var itam_2 = new Item(document.querySelector('#item-2'), { var_1: 'foo untuk item 2', var_2: 'bar untuk item 2', var_3: 7 }); var itam_3 = new Item(document.querySelector('#item-3'), { var_1: 'foo untuk item 3', var_2: 'bar untuk item 3', var_3: 2 }); </script>Kemudian di dalam berkas main.js:
function Item(target, config) { config = config || {}; target.innerHTML = config.var_1 || ""; target.title = config.var_2 || null; // dan seterusnya… }Solusi paling gampang untuk mengatasi problem ini ialah dengan menyimpan data konfigurasi pada elemen sasaran itu sendiri. Mengenai format data yang tersimpan sanggup bermacam-macam, tapi yang paling umum ialah tersimpan sebagai JSON:
<div class="item" id="item-1" data-config='{ "var_1": "foo untuk item 1", "var_2": "bar untuk item 1", "var_3": 4 }'></div> <div class="item" id="item-2" data-config='{ "var_1": "foo untuk item 2", "var_2": "bar untuk item 2", "var_3": 7 }'></div> <div class="item" id="item-3" data-config='{ "var_1": "foo untuk item 3", "var_2": "bar untuk item 3", "var_3": 2 }'></div> <script src="main.js"></script> <script> document.querySelectorAll('.item').forEach(function(target) { new Item(target, JSON.parse(target.getAttribute('data-config'))); }); </script>Metode 4: Pada Tag Skrip Itu Sendiri
Ini ialah metode penyimpanan data konfigurasi yang belakangan ini Saya sukai alasannya ialah sanggup meringkas penulisan data konfigurasi global yang biasanya harus dituliskan pada variabel terpisah (untuk menyederhanakan penerapan data konfigurasi yang spesifik pada sasaran yang berbeda, Saya lebih menentukan metode ke tiga).
<script src="main.js" data-config='{ "var_1": "foo", "var_2": "bar", "var_3": 4 }'></script>Kemudian di dalam berkas main.js, kita memakai document.currentScript untuk mendapat elemen <script> yang dipakai untuk memanggil berkas main.js:
var script = document.currentScript; var config = JSON.parse(script.getAttribute('data-config'));Kita juga sanggup memakai teks kueri di URL berkas main.js untuk menyimpan data konfigurasi, tapi kita perlu fungsi khusus seperti ini atau ini atau ini untuk mengubah teks kueri menjadi objek.
<script src="main.js?var_1=foo&var_2=var&var_3=4"></script>var script = document.currentScript; var config = get_vars(script.src); function get_vars(url) { … }