MVC的思想理解

MVC就是把代码分成三块

• 第一块 view 表示视图
• 第二块 model 操作数据
• 第三块 controller 控制器，将所有的组合起来

MVC是一种代码组织形式，不是任何一种框架，也不是任何一种技术，就是一种组织代码的思想。

我们要做的事情就是把view 和 model传给controller，然后controller负责去初始化 model，然后对view 去进行操作。
其中view和model基本没交互，server和model交互，model和controller交互，controller和view交互

意思就是：Model把数据处理好已经就丢给controller
Controller拿到数据以后就去更新view
View如果被用户点击了，就通知controller说我被点了
然后controller就会去调用model，让model去请求server

MVC关系图

用MVC的一般用法

表示识图放在view里
获取数据放在model里
操作代码放在controller里

    var view = document.querySelector('xxx')
    var model = {
        fetch: function(){}
        save:: function(){}  
    }
    var controller = {
        view: null,
        model: null,
        init: function(view, model){
           this.view = view
           this.model = model
        },
    }
    controller.init(view, model)

用这个模板，把GitHub的留言功能的代码放进来。

    var view = document.querySelector('section.message')
    var model = {
        init: function(){        //  获取数据
            var APP_ID = 'iMbomh2avqYuLJfoX2AY0kqM-gzGzoHsz';
            var APP_KEY = 'YfwIv7huBwyU0vuqr0Gkzl32';
            AV.init({appId: APP_ID,appKey: APP_KEY})
        },
        fetch: function(){    //  新建数据
            var query = new AV.Query('Message');
            return query.find()    // Promis 对象
        },
        save: function(name, content){
            var Message = AV.Object.extend('Message');
            var message = new Message();
            return message.save({     // Promis 对象
                'name': name,
                'content': content
            })
        }
    }
    var controller = {
        view: null,
        model: null,
        messageList: null,
        init: function(view, model){
            this.view = view
            this.model = model
            this.messageList = view.querySelector('#messageList')
            this.form = view.querySelector('form')
            this.model.init()
            this.loadMessages()
            this.bindEvents()
        },
        loadMessages: function(){
            this.model.fetch().then(
                (messages) => {
                    let array = messages.map((item)=> item.attributes)
                    array.forEach( (item) => {
                        let li = document.createElement('li')
                        li.innerText = `${item.name} : ${item.content}`
                        this.messageList.append(li)
                    });
                }
            );
        },
        bindEvents: function(){
            this.form.addEventListener('submit',(e) => {
                e.preventDefault()
                this.saveMessage()
            })
        },
        saveMessage: function(){
            let myForm = this.form
            let content = myForm.querySelector('input[name=content]').value
            let name = myForm.querySelector('input[name=name]').value
            this.model.save(name,content).then(function(object) {
                let li = document.createElement('li')
                li.innerText = `${object.attributes.name} : ${object.attributes.content}`
                let messageList = document.querySelector('#messageList')
                messageList.append(li)
                myForm.querySelector('input[name=content]').value = ''
                myForm.querySelector('input[name=name]').value = ''
                console.log(object)
            })
        }
    }
    controller.init(view, model)

首先，通过view把页面内容获取到，然后model里获取数据，把初始化、新建数据、和保存数据三个函数放在model里，然后通过controller来组合起来。

因为所以内容都在controller里，首先通过controller里的init函数来初始化，并把一些变量同时初始化一下，然后再init函数里面调用各种函数。

controller里的init函数执行三个函数：1.初始化model，调用model的init函数（this.model.init()）；2.加载message，调用loadMessages函数；3.绑定事件，调用bindEvents函数。

其中在调用loadMessages函数的时候，异步调用了model的fetch函数，fetch函数返回了一个Promise对象（query.find()），这样loadMessages函数里的this.model.fetch()就可以用then来异步调用model的fetch了

其中在调用bindEvents函数的时候，bindEvents函数又调用了saveMessage函数。而在saveMessage函数里，也同样的异步调用了model的save函数，save函数也返回了一个Promise对象，这样saveMessage函数也能异步调用model的save了。

最后通过controller.init(view, model)实现了代码的调用。

在上面代码中，每个函数都很简单，不像以前写在一起，不知道做什么，也不知道发生了什么，需要把所有代码看一遍才知道发生什么。但是如果是MVC就知道，如果看怎么获取数据的，直接看model部分就好。想要看看用户点击按钮发什么了什么，就在找controller模块里的bindEvents就好了。有什么bug可以比较方便的找到对应的位置了，这样MVC职责分明，模块清晰，层次分明了。

代码链接：https://github.com/xiaozhi1/resume-3/blob/master/js/message.js