Menyimpan Data Konfigurasi pada Skrip Pemanggil

Belakangan ini Saya mulai mengimplementasikan teknik penyimpanan data konfigurasi JavaScript yang menarik pada ekstensi-ekstensi Mecha yang berhubungan dengan JavaScript. Saya pikir, mungkin akan bermanfaat jika Saya menjabarkannya juga di sini karena beberapa pengembang skrip Blogger tentu akan sangat terbantu dengan teknik semacam ini. Saya sendiri tidak tahu siapa yang pertama kali memberikan gagasan ini, jadi untuk saat ini Saya masih tidak dapat menyebutkan orang-orang yang terkait dengan praktik semacam ini satu per satu. Metode klasik yang sering kita jumpai tentang bagaimana cara menyimpan variabel konfigurasi JavaScript adalah 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 bisa memanggil data konfigurasi yang ada satu per satu. Beberapa nilai default mungkin perlu ditentukan juga untuk memastikan skrip tetap bisa bekerja meski pengguna tidak mendefinisikan data konfigurasi yang diperlukan 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 jika dibandingkan dengan metode pertama meski kita masih tetap memerlukan tag skrip terpisah. Parameter bisa 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 menggunakan teknik penyimpanan data konfigurasi JavaScript pada elemen HTML yang terkait dengan eksekusi skrip tertentu. Hal ini biasanya dipraktikkan untuk meringkas beberapa eksekusi JavaScript sekaligus yang memerlukan data konfigurasi yang berbeda-beda pada masing-masing elemen HTML yang dikenai.

Ketika kita menggunakan 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 mudah untuk mengatasi masalah ini adalah dengan menyimpan data konfigurasi pada elemen target itu sendiri. Mengenai format data yang tersimpan bisa bermacam-macam, tapi yang paling umum adalah 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 adalah metode penyimpanan data konfigurasi yang belakangan ini Saya sukai karena dapat meringkas penulisan data konfigurasi global yang biasanya harus dituliskan pada variabel terpisah (untuk menyederhanakan penerapan data konfigurasi yang spesifik pada target yang berbeda, Saya lebih memilih 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 menggunakan document.currentScript untuk mendapatkan elemen <script> yang digunakan untuk memanggil berkas main.js:

var script = document.currentScript;

var config = JSON.parse(script.getAttribute('data-config'));

Kita juga bisa menggunakan 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&amp;var_2=var&amp;var_3=4"></script>

var script = document.currentScript;

var config = get_vars(script.src);

function get_vars(url) { … }