打造属于自己的MVVM框架: 3.双向绑定

古城微笑少年丶 2022-07-24 09:23 196阅读 0赞

> MVVM中对Bingding的解析只能算viewModel->view的单项绑定，但MVVM绝不仅仅只有单向绑定，更重要的是如何监控viewModel变化，将信息实时的反馈给view。

[原文请戳][Link 1]  
[源码请戳][Link 2]

## 如何监控Object的变化 ##

你会可能会遇到一下场景：前端UI已经渲染完成，但并没有数据，因此发送请求向服务器请求数据，AJAX回调完成后，用Callback里的值去更新UI（很可能是暴力的Jquery）；当前端根据渲染的数据再次做了操作后，又得去DOM中取出修改后的值，一来一去十分麻烦，而且一旦UI结构有变化，那简直会被玩死。

而MVVM的最大好处就是避免这种复杂的DOM操作，取而代之的是监控绑定在页面上的observable对象，然后实时的更新DOM，整个过程均为自动化。

那么问题来了，如何监控一个对象的变化呢？

### 方案1.Object.observe ###

`Object.observe`将会成为ECMAScript的标准，它不需要任何的库就能实现对象的变化的监控。如下：

// Let's say we have a model with data
    var model = {};
    // Which we then observe
    Object.observe(model, function(changes){ 
    
        // This asynchronous callback runs
        changes.forEach(function(change) { 
    
            // Letting us know what changed
            console.log(change.type, change.name, change.oldValue);
        });
    
    });

在Chrome调试如下：

model.name = “xiaofei”;

add name undefined

“xiaofei”

可以看到，`Object.observe`十分强大，它不但能监控对象的变化，而且连变化的类型都知道，十分的方便。  
然而，狗血的事情来了。正如我上面所说，它只是未来ECMA的标准，因此属于非标准的用法。兼容性如下：

![observe.jpg][]

### 方案2.Object.defineProperty ###

`Object.defineProperty`可以在对象上新添一个自定义的属性，属性的所有设置都有自己配置（是否可枚举，是否可读写等），十分灵活。这些并不能实现对象的监控，但它提供了`get`和`set`的属性器以及事件回调，因此我们可以利用这个`set`事件去实现对象的监控。

代码如下：

ko.observable = function(defaultValue) { 
        var self = {};
        var value = defaultValue;
        var fn = function(val) { 
            if(val) {
                self.value = val;
            } else {
                return self.value;
            }
        };
        fn.isObservable = true; 
        Object.defineProperty(self, 'value', {
            get: function() { 
                return value;
            },
            set: function(val) { 
                value = val;
                console.log("here I can capture changes event");
            }
        });
    
        return fn;
    }

思路如下：

ko.observable方法会将对象封装为一个observable对象，该对象的值由`Object.defineProperty`定义，因此当observable更新值时会触发`Object.defineProperty`的set方法，此时可以认为该对象变化了。

在Chrome下测试结果为：

var o = observable(“xiaofei”);

undefined

o();

“xiaofei”

o(“new name”)

here I can capture changes event

undefined

o()

“new name”

看起来似乎不错，可是为了实现foreach，我们还需要另外创建一个observableArray对象，毕竟数组和基本的对象不太一样，参考上面的实现：

ko.observableArray: function(defaultValue) { 
        if(defaultValue && defaultValue.constructor.name != 'Array') {
            throw "observableArray param must be array."
        }
        var self = {};
        var value = defaultValue;
        var fn = function(val) { 
            if(val) {
                self.value = val;
            } else {
                return self.value;
            }
        };
        fn.isObservable = true; 
        var keys = ["pop", "push", "reverse", "shift", "sort", "splice", "unshift", "concat", "join", "slice", "indexOf", "lastIndexOf", "forEach", "every", "map", "some", "reduce", "reduceRight", "each", "clone", "min", "max", "average", "sum", "unique", "shuffle", "pluck"];
        for(var i in keys) {
            var key = keys[i];
            fn[key] = (function(key) { 
                return function() { 
                    var elements = ko.unwrap(fn);
                    elements[key] && elements[key].apply(elements, arguments);
                    fn(elements);
                };
            })(key);
        }
        Object.defineProperty(self, 'value', {
            get: function() { 
                return value;
            },
            set: function(val) { 
                value = val;
                console.log("here I can capture changes event");
    
            }
        });
        return fn;
    }

`observableArray`的实现在`observable`的基础上，继承了Array的操作，因为对于`observableArray`对象来说，更新元素里面的值的属性并不算它更新了，而只有它的个数活着自身的集合发生变化时才认为是变化了。而在这里我没有直接遍历所有Array的方法是因为Array的方法默认是不可迭代的，所以只能一一列出，甚至，根本不需要这么多方法，完全可以根据实际情况去定制。

在Chrome测试如下：

var arr = ko.observableArray(\[1,2,3\]);

undefined

arr.push(4)

here I can capture changes event

undefined

arr()

\[1, 2, 3, 4\]

arr.pop();

undefined

arr()

\[1, 2, 3\]

## 5.总结 ##

这一节主要介绍了如何实现双向绑定中的对象监控，实现了这个功能后，可以在事件捕获时再次通知模版引擎去重新渲染UI，这样就形成了双向通信，下一篇将会进行整合。

[原文请戳][Link 1]  
[源码请戳][Link 2]

[Link 1]: https://kkkkkxiaofei.github.io/jekyll/update/2015/12/21/mvvm%283%29.html
[Link 2]: https://github.com/kkkkkxiaofei/Dig-Knockout
[observe.jpg]: https://kkkkkxiaofei.github.io/img/mvvm3/observe.jpg