javascript 对象状态（KVO）观察者

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_33743661

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量108

点赞数

文章标签： javascript 移动开发 c# ViewUI

原文链接：https://my.oschina.net/ososchina/blog/349604

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.首先来看一段代码

<script type="text/javascript">

var callback = function(records) //监听状态改变的回调函数
{     
    records.map(function(record){     //状态改变的记录信息    
        console.log('Previous attribute value: ' + record.oldValue);       
    }); 
 }; 
 
 var mo = new MutationObserver(callback); //构建观察者
 
 var element = document.getElementById('#my_element'); 

 var options = { 
                 'attributes': true,     
                 'attributeOldValue': true 
                  }

mo.observe(element, options); //设置要观察的对象和对象状态

//observer.disconnect(); //停止观察
//observer.takeRecords(); 清除变动信息，本次变动不在处理
</script>

上述是一个非常简单的例子

在一个HTML元素中，可被观察的属性或者状态如下。

childList：子元素的变动。
attributes：属性的变动。
characterData：节点内容或节点文本的变动。
subtree：所有

二。我们也要知道的一点是，一个对象也可被多个观察者观察！

~~~~~~~~~~~~~~~~~~~~~~~2014-11-29日更新~Observer~~~~~~~~~~~~~~~~~~~~~~~~~

Object.observe方法用于观察对象属性的变化。

var o = {}; 
Object.observe(o, function(changes) {   
        changes.forEach(function(change) {     
                    console.log(change.type, change.name, change.oldValue);   
                    }); 
             }); 
o.foo = 1; 
// add, 'foo', undefined 
o.foo = 2; 
// update, 'foo', 1 
delete o.foo; 
// delete, 'foo', 2

对于KVO的用法，相信学习IOS的人活着学过java观察者模式的人比较了解，通过这些UI状态的变化，我们可以更新各种数据，在MVC->MVP->MVVM的过程，“

基于数据的驱动”取代“基于事件的驱动”是一种非常好的设计里面，C# +wpf就是这种理念，当然js也有,android也有。

转载于:https://my.oschina.net/ososchina/blog/349604