2019-09-08 双向绑定

意义：

自动监视监视到数据变更，并免得你自己再去自己写代码序列化，反序列化以及同步。

https://m.imooc.com/wenda/detail/332194

Two-way binding just means that:

When properties in the model get updated, so does the UI.
When UI elements get updated, the changes get propagated back to the model.

MVVM：
https://www.liaoxuefeng.com/wiki/1022910821149312/1108898947791072

双向绑定：
https://www.liaoxuefeng.com/wiki/1022910821149312/1109527162256416

用js实现双向绑定，简单来说就是，当我们改变一个对象的某个属性的值的时候，相应的页面的相关dom的内容自动更改。
要实现这个功能，首先要监听用户的操作，然后改变对象的属性值，因为对象属性值的改变，映射到文档中某个元素的改变。

<div id="div1"></div>
<hr/>
<div id="div2">
    <input id="view">
</div>
<script>
    var o={};
    var Model;
    
    view = document.getElementById("view");
    view.addEventListener("input",MVVM);
    function MVVM()
    {
        o.ModelView = view.value;
    }
    Object.defineProperty(o,"ModelView",
                            {
                                get: function() {
                                        console.log("modelValue1 is"+modelValue1);
                                        return Model;
                                    },
                                set: function(value) {
                                        Model =  value;
                                        document.getElementById("div1").innerHTML = value;
                                    }
                            }
                        );
     
</script>
<style>
    #div1{
        width:200px; height:200px;
        background-color:black;
        color:white;
    }
    
    #div2{
        width:200px;height:200px;
        background-color:yellowgreen;
    }
</style>

可以看到，input 的值改变（识图层View改变），引发了JavaScript中的对象的属性值的改变（Mode改变），这是第一个绑定。JavaScript中的对象的属性值的改变让div内容改变（VIew改变），这是第二个绑定。

参考：
http://baijiahao.baidu.com/s?id=1598895704302488578&wfr=spider&for=pc
https://www.zhihu.com/question/44724640
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

maybe
https://blog.csdn.net/Cceking/article/details/81275392
https://www.jb51.net/article/131971.htm