Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

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'));

Sejak artikel ini ditulis, peramban Internet Explorer tidak mendukung fitur document.currentScript. Sebagai alternatif, kita bisa menggunakan cara ini untuk mendapatkan tag <script> yang digunakan untuk memanggil berkas main.js:

var script = document.getElementsByTagName('script').pop(); // mendapatkan elemen `<script>` terakhir

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) {  }

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 2 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Info
  1. http://www.dte.web.id/2013/12/daftar-salinan-berkas-widget-halaman.html
  2. http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html
Tutup
Ke atas!