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 mô hình hoá trạng thái bên trong ứng dụng web. Khả 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 để theo dõi các đối tượng JavaScript và thuộc tính DOM nhằm kích hoạt một số 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 – tổ chức 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 mỗi khi đối tượng đó hoặc các thuộc tính của đối tượng đó thay đổi.
Bạn có thể dùng thử tính năng này 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 rồi khởi động lại trình duyệt. Bạn có thể tìm thấy cờ này trong phần "about:flags" như trong hình dưới đây:
Dưới đây là ví dụ đơn giản về cách thiết lập trình quan sát 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 "beingWatched" được sửa đổi, đối tượng này sẽ kích hoạt hàm gọi lại "somethingChanged". Hàm này sẽ nhận được một mảng các thay đổi đã áp dụng cho đối tượng.
Vì vậy, công cụ JavaScript có thể lưu một số thay đổi vào vùng đệm và truyền tất cả các thay đổi đó trong một lệnh gọi duy nhất đến hàm gọi lại. Đ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 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 gọi lại sẽ được kích hoạt bất cứ khi nào một thuộc tính được thêm, sửa đổi, xoá hoặc định cấu hình lại.
Một điều 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, bạn có thể sử dụng thư viện trợ giúp Change Summary (Tóm tắt thay đổi) để tạo một 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 từng thay đổi một cách dễ dàng bằng cách thực hiện một số 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 xác định điều gì đã xảy ra với đối tượng. Bạn có thể xem một số ví dụ về các thuộc tính đang được đặt và loại 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 bên trong công cụ JavaScript, cho phép trình duyệt tối ưu hoá tốt và giải phóng JavaScript để triển khai chức năng tận dụng tính năng này.
Một tính năng tuyệt vời khác cho quá trình phát triển là khả năng sử dụng Object.observe() để kích hoạt trình gỡ lỗi bất cứ khi nào một đối tượng thay đổi. Để làm việc đó, bạn sẽ sử dụng mã như ví dụ bên dưới.
Object.observe(beingWatched, function(){ debugger; });
Dưới đây là video giới thiệu tuyệt vời về Object.observe() giúp giải thích chi tiết về hàm này.
Ngoài ra, bạn cũng có thể tham khảo nội dung mô tả chi tiết và ví dụ thực tế tại đây.
Tổ chức tiêu chuẩn TC39 đang tìm ý kiến phản hồi về tính năng này. Vì vậy, hãy dùng thử và cho chúng tôi biết cảm nhận của bạn.