Merespons perubahan dengan Object.observe

Alex Danilo

Banyak framework JavaScript yang menggunakan MVC atau MDV perlu merespons perubahan pada objek yang memodelkan status di dalam aplikasi web. Kemampuan ini adalah bagian dasar dari model data-binding.

Ada berbagai cara untuk memantau objek JavaScript dan properti DOM untuk memicu semacam tindakan, tetapi sebagian besar teknik tersebut tidak ideal karena berbagai alasan seperti performa, dll.

Untuk meningkatkan performa aplikasi web, metode baru yang disebut Object.observe() telah diusulkan ke TC39 - badan standar yang mengawasi pengembangan ECMAScript (JavaScript).

Object.observe() memungkinkan Anda menambahkan pemroses ke objek JavaScript apa pun yang akan dipanggil setiap kali objek tersebut, atau propertinya, berubah.

Anda dapat mencobanya sekarang di Chrome Canary versi 25.

Untuk bereksperimen dengan fitur ini, Anda harus mengaktifkan tanda Aktifkan JavaScript Eksperimental di Chrome Canary dan memulai ulang browser. Tanda tersebut dapat ditemukan di 'about:flags' seperti ditunjukkan pada gambar di bawah:

Tanda Chrome.

Berikut ini contoh sederhana tentang cara menyiapkan observer pada sebuah objek:

var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
    // do something
}
Object.observe(beingWatched, somethingChanged);

Jika objek 'beingWatched' diubah, objek tersebut akan memicu fungsi callback 'somethingChanged' yang menerima array perubahan yang diterapkan ke objek.

Jadi, mesin JavaScript bebas untuk melakukan buffering sejumlah perubahan dan meneruskan semuanya dalam satu panggilan ke fungsi callback. Hal ini membantu mengoptimalkan callback sehingga kode Anda dapat melakukan banyak manipulasi JavaScript, tetapi hanya memproses beberapa callback dengan mengelompokkan pembaruan.

Fungsi callback akan dipicu setiap kali properti ditambahkan, diubah, dihapus, atau dikonfigurasi ulang.

Hal lain yang sangat menarik saat mengamati array adalah jika array mengalami sejumlah perubahan padanya, Anda dapat menggunakan library bantuan Change Summary untuk membuat kumpulan perubahan minimal, sehingga JavaScript sisi klien tidak perlu memindai array secara manual untuk memeriksa setiap item.

Anda dapat melakukan iterasi pada setiap perubahan dengan cukup mudah, dengan melakukan sesuatu seperti berikut pada fungsi callback 'somethingChanged' Anda:

function whatHappened(change) {
    console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
    changes.forEach(whatHappened);
}

Properti type mengidentifikasi apa yang terjadi pada objek. Beberapa contoh properti yang ditetapkan dan jenis yang terkait dapat dilihat pada kode di bawah.

beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new

Kelebihan teknik ini adalah semua kecerdasan pemantauan berada di dalam mesin JavaScript yang memungkinkan browser mengoptimalkannya dengan baik dan membebaskan JavaScript Anda untuk menerapkan fungsi dengan memanfaatkan fitur ini.

Fitur lain yang sangat bagus untuk pengembangan adalah kemampuan menggunakan Object.observe() untuk memicu debugger setiap kali objek berubah. Untuk melakukannya, Anda dapat menggunakan kode seperti contoh di bawah ini.

Object.observe(beingWatched, function(){ debugger; });

Berikut adalah pengantar video yang sangat bagus tentang Object.observe() yang menjelaskannya secara mendetail.

Baca juga deskripsi deskriptif yang bagus dan contoh yang berguna di sini.

Badan standar TC39 memerlukan masukan tentang fitur ini, jadi cobalah dan beri tahu kami pendapat Anda.