MVVM

（1）传统开发模式MVP

案例：jQuery操作-面向对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=Edg,chrome=1">
    <meta name="render" content="webkit">
    <title>demo</title>
    <script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" id="input">
        <button id="btn">提交</button>
        <ul id="showList"></ul>
    </div>
    <script type="text/javascript">
       function List(){

       }
       $.extend(List.prototype,{
        init(){
            this.bindEvent();
        },
        bindEvent(){
            var btn = $('#btn');
            /* 将this.handleBtnClick中this绑定到了this的Page实例引用 */
            btn.on('click',$.proxy(this.handleBtnClick,this));
        },
        handleBtnClick(){
            console.log(666)
            var inputValue = $('#input').val();
            var showList = $('#showList');
            showList.append("<li>"+inputValue+"</li>")
            $('#input').val('')
        }
       })
       var list = new List();
       list.init();
    </script>
</body>
</html>

分析：

　　jQuery代码符合MVP模式

M：与AJAX交互，获取远程数据
V：视图层---DOM结构
P：控制器层---大部分都是DOM操作

对比MVVM实现方式，可以减少DOM操作代码30%以上