最近發現一個比較有意思的js庫可以為javascript的對象實現觀察者模式,以往我們使用javascript實現的觀察者模式都是通過使用回調函數配合dom上的event事件來操作的,而“Watch.js”可以為javascript的對象實現觀察者模式,監聽對象的變化。
watch.js目前主要可以做如下這些事情:
1,監聽對象上一個或多個屬性的改變,當改變后觸發自定義事件。
2,批量觀察一個對象上所有的屬性,當有任何一個改變時,觸發自定義事件。
3,可以取消訂閱觀察
4,你可以在你需要的時候,不用改變對象上的屬性值,就可手動觸發觀察器。
5,可以與jquery兼容
下面看一個watch.js的基本使用,更多的代碼可以參考本文最后的項目地址。
var ex1 = {
attr1: "initial value of attr1",
attr2: "initial value of attr2"
};
//監聽ex1的attr1,當attr1值發送改變時候觸發函數
watch(ex1, "attr1", function(){
alert("attr1 changed!");
});
//改變attr1值將彈出 attr1 changed!
ex1.attr1 = "other value";
attr1: "initial value of attr1",
attr2: "initial value of attr2"
};
//監聽ex1的attr1,當attr1值發送改變時候觸發函數
watch(ex1, "attr1", function(){
alert("attr1 changed!");
});
//改變attr1值將彈出 attr1 changed!
ex1.attr1 = "other value";
該類庫內部由於目前是使用__defineSetter__與__defineGetter__實現,所以目前只能工作在如下瀏覽器中。
* IE 9+, FF 4+, SF 5+, WebKit, CH 7+, OP 12+, BESEN, Rhino 1.7+不過開發者聲稱在一下次的更新中將會兼容所有瀏覽器(我還沒想明白在IE8以前如何實現,有高人可以指點一下)。有興趣的朋友也可以在github關注這個項目。
項目地址:https://github.com/melanke/Watch.JS
