MVC架构

• M 层 （ Model ） 模型
• V 层 （ View ） 视图
• C 层 （ Controller ） 控制器

<input type="text" id="input1" autocomplete="off">
<span id="span1"></span>
<script>
    var M = {
        a : "",
        set( v ){
            M.a = v;
            V.render();
        },
        get(){
            return M.a;
        }
    }

    var V = {
        init(){
            input1.onkeyup = C.keyup;
        },
        render(){
            span1.innerHTML = M.get();
        }
    }

    var C = {
        keyup(){
            M.set( this.value )
        }
    }
    
    V.init();

</script>

MVP架构

• M 层 （ Model ） 模型
• V 层 （ View ） 视图
• P 层 （ Presenter ） 主持人

<input type="text" id="input1" autocomplete="off">
<span id="span1"></span>
<script>
    var M = {
        a : "",
        set( v ){
            M.a = v;
            P.render();
        },
        get(){
            return M.a;
        }
    }

    var V = {
        init(){
            input1.onkeyup = P.keyup;
        },
        render(){
            span1.innerHTML = P.get();
        }
    }

    var P = {
        keyup(){
            M.set( this.value );
        },
        render(){
            V.render();
        },
        get(){
            return M.get();
        }
    }
    
    V.init();

</script>

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>