MVVM

MVC架构

• M 层 （ Model ） 模型

• V 层 （ View ） 视图

• C 层 （ Controller ） 控制器

MVP架构

• M 层 （ Model ） 模型

• V 层 （ View ） 视图

• P 层 （ Presenter ） 主持人

MVVM架构

• M 层 （ Model ） 模型
• V 层 （ View ） 视图
• VM 层 （ View Model ） 视图模型

数据绑定原理

Object.defineProperty

<input type="text" id="input1" autocomplete="off">
<span id="span1"></span>
<script>
    var M = {
        a : ""
    }
    var V = {

    }
    var VM = {
        init(){
            input1.onkeyup = function(){
                M.a = this.value;                
            }
            VM.observer(M, "a");
        },
        observer(obj, attr){
            var val = obj[attr];
            Object.defineProperty(obj, attr, {
                get(){
                    return val;
                },
                set( v ){
                    input1.value = span1.innerHTML = val = v;
                }
            })
        }
    }

    VM.init();
</script>