一瑟曲、簡(jiǎn)介
MVC是三個(gè)單詞的首字母縮寫(xiě)，它們是Model（模型）字旭、View（視圖）和Controller（控制）。
這個(gè)模式認(rèn)為哟沫，程序不論簡(jiǎn)單或復(fù)雜，從結(jié)構(gòu)上看锌介，都可以分成三層嗜诀。
1）最上面的一層猾警，是直接面向最終用戶(hù)的"視圖層"（View）。它是提供給用戶(hù)的操作界面隆敢，是程序的外殼发皿。
2）最底下的一層，是核心的"數(shù)據(jù)層"（Model）拂蝎，也就是程序需要操作的數(shù)據(jù)或信息穴墅。
3）中間的一層，就是"控制層"（Controller）温自，它負(fù)責(zé)根據(jù)用戶(hù)從"視圖層"輸入的指令玄货，選取"數(shù)據(jù)層"中的數(shù)據(jù)，然后對(duì)其進(jìn)行相應(yīng)的操作悼泌，產(chǎn)生最終結(jié)果松捉。
這三層是緊密聯(lián)系在一起的，但又是互相獨(dú)立的馆里，每一層內(nèi)部的變化不影響其他層隘世。每一層都對(duì)外提供接口（Interface），供上面一層調(diào)用也拜。這樣一來(lái)以舒，軟件就可以實(shí)現(xiàn)模塊化趾痘，修改外觀或者變更數(shù)據(jù)都不用修改其他層慢哈，大大方便了維護(hù)和升級(jí)。
二永票、代碼解釋
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 對(duì)象
},
save: function (object) {
var X = AV.Object.extend(resourceName);
var x = new X();
return x.save(object) //Promise 對(duì)象
}
}
}
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
}
