Object.watch() cho tất cả các trình duyệt?

Question

Tôi đang tìm kiếm một cách dễ dàng để theo dõi một đối tượng hoặc biến cho các thay đổi và tôi đã tìm thấy Object.watch(), được hỗ trợ trong trình duyệt Mozilla, nhưng không được hỗ trợ trên IE. Vì vậy, tôi bắt đầu tìm kiếm xung quanh để xem liệu có ai đã viết một số loại tương đương hay không.

Điều duy nhất tôi tìm thấy là a jQuery plugin, nhưng tôi không chắc đó có phải là cách tốt nhất để đi hay không. Tôi chắc chắn sử dụng jQuery trong hầu hết các dự án của tôi, vì vậy tôi không lo lắng về khía cạnh jQuery ...

Dù sao, câu hỏi: Ai đó có thể chỉ cho tôi ví dụ làm việc của plugin jQuery đó? Tôi đang gặp sự cố khi hoạt động ...

Hoặc, có ai biết về bất kỳ giải pháp thay thế nào tốt hơn sẽ hoạt động trên trình duyệt không?

Cập nhật sau câu trả lời:

Cảm ơn tất cả mọi người cho câu trả lời! Tôi đã thử mã được đăng tại đây: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

Nhưng tôi dường như không làm cho nó hoạt động với IE. Các mã dưới đây hoạt động tốt trong Firefox, nhưng không có gì trong IE. Trong Firefox, mỗi lần watcher.status được thay đổi, document.write() trong số watcher.watch() được gọi và bạn có thể xem kết quả trên trang. Trong IE, điều đó không xảy ra, nhưng tôi có thể thấy rằng watcher.status đang cập nhật giá trị, bởi vì cuộc gọi document.write() cuối cùng hiển thị giá trị chính xác (trong cả IE và FF). Nhưng, nếu chức năng gọi lại không được gọi, thì đó là loại vô nghĩa ... :)

Tôi có thiếu gì đó không?

var options = {'status': 'no status'}, 
watcher = createWatcher(options); 

watcher.watch("status", function(prop, oldValue, newValue) { 
    document.write("old: " + oldValue + ", new: " + newValue + "<br>"); 
    return newValue; 
}); 

watcher.status = 'asdf'; 
watcher.status = '1234'; 

document.write(watcher.status + "<br>"); 

Answer 1

(Xin lỗi cho cross-đăng, nhưng câu trả lời này ta đã ban cho một câu hỏi tương tự hoạt động tốt ở đây)

tôi đã tạo ra một nhỏ object.watch shim cho việc này một thời gian trước đây. Nó hoạt động trong IE8, Safari, Chrome, Firefox, Opera, v.v.

Answer 2

tôi thấy hai người đó tuyên bố đã giải quyết vấn đề này:

Crossbrowser Object watch (tuyên bố hỗ trợ cho IE, Opera, Safari)

watch() Missing JS Function in IE với việc sử dụng prototype.js cho IE (Opera? , Safari?)

Answer 3

Plugin đó chỉ đơn giản sử dụng bộ đếm thời gian/khoảng thời gian để liên tục kiểm tra các thay đổi trên đối tượng. Có lẽ đủ tốt nhưng cá nhân tôi muốn nhanh chóng hơn là một người quan sát.

Đây là nỗ lực nhằm mang lại watch/unwatch tới IE: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html.

Nó thay đổi cú pháp từ cách thêm người quan sát của Firefox. Thay vì:

var obj = {foo:'bar'}; 
obj.watch('foo', fooChanged); 

Bạn làm:

var obj = {foo:'bar'}; 
var watcher = createWatcher(obj); 
watcher.watch('foo', fooChanged); 

Không như ngọt ngào, nhưng như một người quan sát bạn sẽ được thông báo ngay lập tức.

Answer 4

Cập nhật cho cuối năm 2015

Object.observe() bây giờ bị hủy. Xin lỗi mọi người!

Cập nhật cho 2015

Sử dụng Object.observe() from ES7.

Here's a polyfill.

Answer 5

Tôi cũng nghĩ rằng ngay bây giờ là giải pháp tốt nhất là sử dụng Watch.JS, hãy tìm một hướng dẫn tốt đẹp ở đây: Listen/Watch for object or array changes in Javascript (Property changed event on Javascript objects)

Answer 6

Lưu ý rằng trong Chrome 36 và cao hơn, bạn có thể sử dụng Object.observe là tốt. Đây thực sự là một phần của tiêu chuẩn ECMAScript trong tương lai và không phải là một tính năng dành riêng cho trình duyệt như là Object.watch của Mozilla.

Object.observe chỉ hoạt động trên các thuộc tính đối tượng, nhưng có hiệu suất cao hơn nhiều so với Object.watch (có nghĩa là cho mục đích gỡ lỗi, không sử dụng sản xuất).

var options = {}; 

Object.observe(options, function(changes) { 
    console.log(changes); 
}); 

options.foo = 'bar'; 

Answer 7

bạn có thể sử dụng Object.defineProperty.

xem tài sản bar trong foo

Object.defineProperty(foo, "bar", { 
    get: function (val){ 
     //some code to watch the getter function 
    }, 

    set: function (val) { 
     //some code to watch the setter function 
    } 
})