Nhiều khung JavaScript sử dụng MVC hoặc MDV cần phản hồi các thay đổi đối với các đối tượng lập mô hình trạng thái bên trong ứng dụng web. Tính năng này là một phần cơ bản của mô hình liên kết dữ liệu.
Có một số cách khác nhau để theo dõi đối tượng JavaScript và thuộc tính DOM để kích hoạt một số loại hành động, nhưng hầu hết các kỹ thuật đều không lý tưởng vì nhiều lý do như hiệu suất, v.v.
Để cải thiện hiệu suất của các ứng dụng web, một phương thức mới có tên Object.observe() đã được đề xuất cho TC39 – cơ quan tiêu chuẩn giám sát việc phát triển ECMAScript (JavaScript).
Object.observe() cho phép bạn thêm trình nghe vào bất kỳ đối tượng JavaScript nào được gọi bất cứ khi nào đối tượng hoặc thuộc tính của đối tượng đó thay đổi.
Bạn có thể dùng thử ngay trong Chrome Canary phiên bản 25.
Để thử nghiệm tính năng này, bạn cần bật cờ Bật JavaScript thử nghiệm trong Chrome Canary và khởi động lại trình duyệt. Bạn có thể tìm thấy cờ này trong 'about:flags' như minh hoạ trong hình dưới đây:
Dưới đây là một ví dụ đơn giản về cách thiết lập đối tượng tiếp nhận dữ liệu trên một đối tượng:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Khi đối tượng "Đang được xem" được sửa đổi, hàm này sẽ kích hoạt hàm gọi lại "somethingChanged". Hàm này sẽ nhận được một loạt các thay đổi đã được áp dụng cho đối tượng.
Vì vậy, công cụ JavaScript tự do tạo bộ đệm cho một số thay đổi và chuyển tất cả chúng trong một lệnh gọi duy nhất đến hàm callback. Điều này giúp tối ưu hoá các lệnh gọi lại để mã của bạn có thể thực hiện nhiều thao tác với JavaScript nhưng chỉ xử lý một vài lệnh gọi lại bằng cách gộp các bản cập nhật lại với nhau.
Hàm callback sẽ được kích hoạt bất cứ khi nào một thuộc tính được thêm, sửa đổi, xóa hoặc định cấu hình lại.
Một điều thực sự thú vị khác khi quan sát các mảng là nếu một mảng đã có một số thay đổi được thực hiện, thì bạn có thể sử dụng thư viện trợ giúp Tóm tắt thay đổi để tạo tập hợp thay đổi tối thiểu, nhờ đó, JavaScript phía máy khách không phải quét mảng theo cách thủ công để kiểm tra từng mục.
Bạn có thể lặp lại qua từng thay đổi khá dễ dàng bằng cách thực hiện thao tác như sau trong hàm gọi lại 'somethingChanged':
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
Thuộc tính type (loại) xác định những gì đã xảy ra với đối tượng. Bạn có thể xem một số ví dụ về thuộc tính được đặt và loại được liên kết trong mã bên dưới.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Điều tuyệt vời về kỹ thuật này là tất cả các tính năng giám sát thông minh đều nằm trong công cụ JavaScript, cho phép trình duyệt tối ưu hóa nó tốt và giải phóng JavaScript của bạn để triển khai chức năng tận dụng tính năng này.
Một tính năng thực sự tuyệt vời khác để phát triển là khả năng sử dụng Object.observe() để kích hoạt trình gỡ lỗi mỗi khi đối tượng thay đổi. Để làm điều đó, bạn nên sử dụng mã tương tự như ví dụ dưới đây.
Object.observe(beingWatched, function(){ debugger; });
Bạn có thể xem video giới thiệu tuyệt vời về Object.observe() để giải thích chi tiết về Object.observe().
Ngoài ra, bạn cũng có thể xem tài liệu mô tả ở đây và ví dụ minh hoạ ở đây.
Cơ quan tiêu chuẩn TC39 đang thu thập ý kiến phản hồi về tính năng này. Vì vậy, bạn hãy tiếp tục dùng thử và cho chúng tôi biết suy nghĩ của bạn.