MVC

一、简介

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

二、代码解释

var model = {
    data: null,
    init(){}
    fetch(){}
    save(){}
    update(){}
    delete(){}
}
view = {
    init() {}
    template: '<h1>hi</h1'>
}
controller = {
    view: null,
    model: null,
    init(view, model){
        this.view = view
        this.model = model
        this.bindEvents()
    }
    render(){
        this.view.querySelector('name').innerText = this.model.data.name
    },
    bindEvents(){}
}

1.Mode(模型)

// var model = Model({ resourceName: 'Message' })
window.Model = function (options) {
    let resourceName = options.resourceName
    return {
        init: function () {
            var APP_ID = 'hg9Xg2ojqCnRblDNUbxva3Ba-gzGzoHsz'
            var APP_KEY = '1FfsrmfHjz0LmzNIseyLJHld'
            AV.init({
                appId: APP_ID,
                appKey: APP_KEY
            });
        },
        fetch: function () {
            var query = new AV.Query(resourceName)
            return query.find() //Promise 对象 
        },
        save: function (object) {
            var X = AV.Object.extend(resourceName);
            var x = new X();
            return x.save(object)  //Promise 对象
        }

    }
}

2.View(视图)

//var view = View('.xxx')
window.View = function(selector){
    return document.querySelector(selector)
}

3.Controller(控制)

/*
Controller({
    init:(){
        this.view
        this.model
        this.xxx()
        this.yyy()
    },
    xxx()
    yyy()
})
*/
window.Controller = function (options) {
    var init = options.init
    let object = {
        view: null,
        model: null,
        init: function (view, model) {
            this.view = view
            this.model = model
            this.model.init()
            init.call(this, view, model)
            this.bindEvents.call(this)
        },
    }
    console.log('object')
    console.log(object)
    // debugger
    console.log('options')
    console.log(options)
    // debugger
    for (let key in options) {
        if (key !== 'init') {
            object[key] = options[key]
        }
    }
    console.log('新的 object')
    console.log(object)
    // debugger
    return object
}