MVC(Model View Controller)

1.CRM(Copy Run Modify)

2.MVC (Model-View-Controller)

MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离。Model负责数据储存交互，View负责视图，Controller负责逻辑，按功能划分代码，使代码结构逻辑化，清晰化。

1.Model: 模型持有所有的数据、状态和程序逻辑.（数据）
2.View: 负责界面的布局和显示.（视图）
3.Controller: 负责模型和界面之间的交互.（处理数据和视图之间的交互）

3.实现MVC的过程

1.模块化：将每个功能独立封装，各模块互不影响。
2.使用立即执行函数创造局部执行环境，避免了全局变量的出现。
3.使用闭包解决两个模块需要交互时的问题（可以通过闭包间接的改变一个局部变量）。

模块1
！function(){
    var name=window.name="wang"
}

模块2
!function(){

    var name=window.name//wnag
}

这样就可以使模块2获得name存的字符串，实现了两个模块之间的交流。

升级

模块1
!function(){
    var person={
        name:'wang',
        age:18
    }

    window.wnagGrowup=function(){

        person.age++;
        return person.age;
    }

}

模块2
！function(){
    var age=window.wangGrowup();

}

• 立即执行函数使得 person 无法被外部访问
• 闭包使得匿名函数可以操作 person
• window.frankGrowUp 保存了匿名函数的地址
• 任何地方都可以使用 window.frankGrowUp
• 任何地方都可以使用 window.frankGrowUp 操作 person，但是不能直接访问 person
  这样我们可以通过全局的接口来操作被屏蔽局部变量。

MVC模式

格式：

var model ={
    //获取数据
    fecth:function(){},
    //存储数据
    save:function(){}
}
var view=document.querySelector('#view')
var controller={
    view:null,
    init:function(){
        this.view=view;
        this.bindEvent();
    },
    bindEvent:function(){}
}

实例：

!function () {
    var model = {
        //初始化数据库
        initAV: function() {
            //初始化leancloud
            var APP_ID = "uIYIoLNwz3v4F1P0wIMobPvU-gzGzoHsz";
            var APP_KEY = "Kcm7BYxMpwGKtWHXBJW2ymVs";
            AV.init({ appId: APP_ID, appKey: APP_KEY });
        },
        //获取数据
        fetch: function () {
            //从云获取历史留言
            var query = new AV.Query("message");
            //注意这里，要用箭头函数。this内外指向一至。要不然里面就不饿能够用this，this指向花发生变化。
            return query.find();
        },
        //存储数据
        save: function (name,content) {
            //创建message表
            var xxx = AV.Object.extend("message");
            //在message表中创建一行数据
            var testObject = new xxx();
            //数据的内容是 'content': content 保存
            //如果保存成功执行consol
            return testObject.save({ name: name, content: content })
        }
    }

    var view = document.querySelector('section#LeaveMessage')


    var controller = {
        view: null, messageBoard: null, myForm: null,model:null,
        init: function () {
            this.view = view;
            this.messageBoard = document.querySelector("#historyMessage");
            this.myForm = this.view.querySelector("#messageForm");
            this.model=model;
            this.model.initAV();
            this.loadMessage();
            this.bindEvent();
        },

        loadMessage: function () {

            model.fetch().then((messages) => {
                let arr = messages.map(items => {
                    return items.attributes;
                });
                arr.forEach(items => {
                    let name = items.name;
                    let content = items.content;
                    let li = document.createElement("li");
                    li.innerText = `${name}:${content}`;
                    this.messageBoard.appendChild(li);
                });
                return AV.Object.saveAll(messages);
            }).then(function (messages) {
                    // 更新成功
                    console.log(messages);
                }, function (error) {
                    // 异常处理
                    alert(error);
                });
        },
        bindEvent: function () {

            this.myForm.addEventListener("submit", (event) => {
                event.preventDefault();
                //存储留言到云
                this.saveMessage();
            });
        },
        saveMessage: function () {
            let myForm = controller.myForm;
            var content = myForm.querySelector('input[name="content"]').value;
            var name = myForm.querySelector('input[name="name"]').value;
            if(content===''){
                alert('请输入内容')
            } else {
                let li = document.createElement("li");
                li.innerText = `${name}:${content}`;
                controller.messageBoard.appendChild(li);

                model.save(name, content).then(
                    function (object) {
                        console.log("存入一条数据");
                        console.log(content);
                    },
                    () => { }
                );
            }


        }
    };
    controller.init();
}.call()

箭头函数，内外this不变。箭头函数的this就只最近的作用环境的对象

总结

Model 操作数据
View 表示视图
Controller 是控制器

Model 和服务器交互，Model 将得到的数据交给 Controller，Controller 把数据填入 View，并监听 View
用户操作 View，如点击按钮，Controller 就会接受到点击事件，Controller 这时会去调用 Model，Model 会与服务器交互，得到数据后返回给 Controller，Controller 得到数据就去更新 View