Sunday, March 23, 2014

JavaScript “Extend”

Fungsi ini setara dengan jQuery.extend() yang memungkinkan kita untuk menciptakan variabel opsional, dimana variabel tersebut bisa dinyatakan ataupun ditiadakan. Jika tidak dinyatakan, maka nilai variabel yang tidak hadir tersebut akan jatuh pada nilai default yang telah ditentukan di dalam fungsi:

function extend(def, alt) {
    alt = alt || {};
    for (var i in def) {
        if (typeof alt[i] === "undefined") {
            alt[i] = def[i];
        } else if (
            typeof def[i] === "object" &&
            typeof alt[i] === "object" &&
            alt[i] !== null
        ) {
            alt[i] = extend(def[i], alt[i]);
        }
    }
    return alt;
}

Contoh Penggunaan

function myFunction(config) {

    var defaults = {
        firstName: 'Taufik',
        lastName: 'Nurrohman',
        age: 22
    };

    // Extend...
    config = extend(defaults, config);

    return config;

}

Ketika Anda mengubah beberapa nilai variabel konfigurasi, maka variabel-variabel konfigurasi default yang lain yang tidak diubah akan menyesuaikan:

myFunction({
    firstName: 'Foo'
});

Hasil

JavaScript Extend Test via Window Console
Taufik telah berubah menjadi Foo.

Sebenarnya dulu Saya sudah pernah menulis posting yang sejenis dengan ini. Tapi metode yang Saya tuliskan dalam posting tersebut tidak mampu untuk menangani objek multi-dimensi seperti ini:

var defaults = {
    option_1: value_1,
    option_2: value_2,
    option_3: {
        option_3_1: {
            option_3_1_1: value_3_1_1,
            option_3_1_2: value_3_1_2
        },
        option_3_2: value_3_2,
        option_3_3: value_3_3
    },
    option_4: value_4
};

Labels: , ,

5 Comments:

At Monday, March 24, 2014 at 10:13:00 AM GMT+7, Blogger Kang Mousir said...

// Extend...
config = extend(defaults, config);

return config;

fungsi ini berjalan apabilan nilai dibawah ini kosong ya ?
firstName: 'Taufik',
lastName: 'Nurrohman',
age: 22

 
At Monday, March 24, 2014 at 3:58:00 PM GMT+7, Blogger budkalon said...

Wah ketemu juga caranya, saya juga sering mengalami kendala saat menangani objek multidimensi, tapi datanglah javascript ini...

 
At Thursday, March 27, 2014 at 8:13:00 PM GMT+7, Anonymous Anonymous said...

wah kebetulan nih, tadi dapet tugas javascript dr pak guru, thanks gan

 
At Saturday, March 29, 2014 at 3:18:00 AM GMT+7, Blogger Demo İçin said...

This Syntax
http://i.hizliresim.com/w18vYD.png
Please Share?

 
At Saturday, March 29, 2014 at 2:46:00 PM GMT+7, Blogger Taufik Nurrohman said...

Clues:
1. http://highlightjs.org
2. /2012/04/tag-pre-pada-css-tricks.html
3. /2012/04/make-automatic-numbering-system-on-each.html

 

Post a Comment

<< Home