Banyak framework JavaScript yang menggunakan MVC atau MDV perlu merespons perubahan pada objek yang membuat model status di dalam aplikasi web. Kemampuan ini adalah bagian mendasar dari model data binding.
Ada sejumlah cara untuk memantau objek JavaScript dan properti DOM guna memicu tindakan tertentu, 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 yang 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 Enable Experimental JavaScript di Chrome Canary dan memulai ulang browser. Flag ini dapat ditemukan di bagian 'about:flags' seperti yang ditunjukkan pada gambar di bawah:
Berikut adalah contoh sederhana cara menyiapkan observer pada objek:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Saat objek 'beingWatched' diubah, objek tersebut akan memicu fungsi callback 'somethingChanged' yang menerima array perubahan yang diterapkan ke objek.
Jadi, mesin JavaScript bebas menyimpan 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 update secara bersamaan.
Fungsi callback akan dipicu setiap kali properti ditambahkan, diubah, dihapus, atau dikonfigurasi ulang.
Hal lain yang sangat bagus saat mengamati array adalah jika array telah mengalami sejumlah perubahan, Anda dapat menggunakan library helper Ringkasan Perubahan untuk membuat set 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 hal seperti berikut dalam fungsi callback 'somethingChanged':
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 terkait dapat dilihat dalam kode di bawah.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Keunggulan teknik ini adalah semua kecerdasan pemantauan berada di dalam mesin JavaScript yang memungkinkan browser mengoptimalkannya dengan baik dan membebaskan JavaScript Anda untuk menerapkan fungsi yang 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 harus menggunakan kode seperti contoh di bawah.
Object.observe(beingWatched, function(){ debugger; });
Berikut adalah pengantar video yang bagus tentang Object.observe() yang menjelaskannya secara mendetail.
Ada juga tulisan deskriptif yang bagus dan contoh yang berfungsi di sini.
Lembaga standar TC39 mencari masukan tentang fitur ini, jadi coba fitur ini dan beri tahu kami pendapat Anda.