面向对象mvc

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面 显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式（architectural pattern），属于编程的方法论。MVC模式就是架构模式的一种。
问题：假如你的项目需要保存用户的数据到后台服务器。
（1）你数据来源从数据库中来。也就是说，你需要根据具体的数据来生成一个显示数据的页面。
（2）在用户添加一个特办事项后，你需要把数据存入数据库中。然后，从数据库中取出当前最新的数据，显示给用户。
使用mvc框架实现-分析
Model:提供数据及操作数据的各类方法。
View:提供视图。
Controller:接收用户的动作，修改数据，更新视图。
数据保存在json中

"data":[{
                "id":1,
                "todo":"学习js",
                "time":"2016-08-01"
            },
            {
                "id":2,
                "todo":"吃饭"
            },
            {
                "id":31,
                "todo":"散步",
                "time":"2016-08-01"
            },
            {
                "id":4,
                "todo":"休息"
            }]

添加数据

第一步：获取用户的数据。
第二步：controller.addData(something).先关键字过滤，完成后，再调用Model.addData();
第三步：controller.showData()
从Model中获取数据。
从模板(view视图)中获取结构信息。
把结构信息中占位符(如$todo$)换成数据。
显示数据（container.innerHTML）

理解mvc的运转

添加数据：从controller -----> model
获取数据：model --->controller
显示数据：controller( model + view) --- > 数据显示页面。

var model = {
        "data":[{
                "id":1,
                "todo":"学习js",
                "time":"2016-08-01"
            },
            {
                "id":2,
                "todo":"吃饭"
            },
            {
                "id":31,
                "todo":"散步",
                "time":"2016-08-01"
            },
            {
                "id":4,
                "todo":"休息"
            }]
        ,
        "getMaxId":function(){
            var maxId = this.data[0].id;
            for(var i = 0; i<this.data.length;i++){
                if(this.data[i].id > maxId)
                    maxId = this.data[i].id;
            }
            return maxId; 
        },
        "addData":function(todo){
            var id = this.getMaxId() + 1;
            var o = {"id":id,"todo":todo};
            this.data.push(o);
            console.info(this.data);
        },
        "getTotalNum":function(){ //当前的数据的条数
            return this.data.length;
        }
    }
    
    //控制器
    var controller = {
        showData:function(){
            //第一步：取出模板的内容
            var string = document.getElementById("template").innerHTML;
            
            //第二步：通过正则来进行数据的替换
            var str = "";
            var p1 = /\$\w+\$/g;
            for(var i = 0; i<model.data.length;i++){
                var _str = string.replace(p1,function(m){
                    var t = m.replace(/\$/g,"");//去掉m前后$，相当于把$id$ -- >id
                    return model.data[i][t];
                });
                str +=_str; //把每次替换的结果都保存下来。
            }
            
            //第三步：显示最终的页面
            document.getElementById("container").innerHTML = str;
            
            //第四步：更新总数据的条数
            this.updateTotalNumber();
        },
        addData:function(something){
            //检测合法性，有效性....
            // 检测通过，则调用model的相关方法去实现具体的工作
            if(something == "战争"){
                return false;
            }
            else{
                model.addData(something);
            }
        },
        updateTotalNumber:function(){
            document.getElementById("totalNumber").innerHTML = model.getTotalNum() +"条";
        }
    }

    //点击按钮后
    document.getElementById("btn").onclick =function(){
        var something = document.getElementById("todo").value;

       // var newToDo = {"id":100,"todo":something};
        
       // model.addData(something); 
        controller.addData(something);
        //数据添加完成
        controller.showData();
        
        console.info(model.data);
    }
    
    controller.showData();
    
    

为什么要使用mvc

1.有利于分工
例如专人负责model
2.有利于细化问题，分步解决
例如：你希望多加一些关键字的处理，则可以在controller去更新，而不会影响其它的开发