MVC就是把代碼分成三塊
- 第一塊
view表示視圖 - 第二塊
model操作數(shù)據(jù) - 第三塊
controller控制器，將所有的組合起來
MVC是一種代碼組織形式，不是任何一種框架，也不是任何一種技術(shù)，就是一種組織代碼的思想。
我們要做的事情就是把view 和 model傳給controller，然后controller負責去初始化 model，然后對view 去進行操作。
其中view和model基本沒交互，server和model交互，model和controller交互，controller和view交互
意思就是：Model把數(shù)據(jù)處理好已經(jīng)就丟給controller
Controller拿到數(shù)據(jù)以后就去更新view
View如果被用戶點擊了，就通知controller說我被點了
然后controller就會去調(diào)用model，讓model去請求server
用MVC的一般用法
表示識圖放在view里
獲取數(shù)據(jù)放在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(){ // 獲取數(shù)據(jù)
var APP_ID = 'iMbomh2avqYuLJfoX2AY0kqM-gzGzoHsz';
var APP_KEY = 'YfwIv7huBwyU0vuqr0Gkzl32';
AV.init({appId: APP_ID,appKey: APP_KEY})
},
fetch: function(){ // 新建數(shù)據(jù)
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把頁面內(nèi)容獲取到，然后model里獲取數(shù)據(jù)，把初始化、新建數(shù)據(jù)、和保存數(shù)據(jù)三個函數(shù)放在model里，然后通過controller來組合起來。
因為所以內(nèi)容都在controller里，首先通過controller里的init函數(shù)來初始化，并把一些變量同時初始化一下，然后再init函數(shù)里面調(diào)用各種函數(shù)。
controller里的init函數(shù)執(zhí)行三個函數(shù)：1.初始化model，調(diào)用model的init函數(shù)（this.model.init()）；2.加載message，調(diào)用loadMessages函數(shù)；3.綁定事件，調(diào)用bindEvents函數(shù)。
其中在調(diào)用loadMessages函數(shù)的時候，異步調(diào)用了model的fetch函數(shù)，fetch函數(shù)返回了一個Promise對象（query.find()），這樣loadMessages函數(shù)里的this.model.fetch()就可以用then來異步調(diào)用model的fetch了
其中在調(diào)用bindEvents函數(shù)的時候，bindEvents函數(shù)又調(diào)用了saveMessage函數(shù)。而在saveMessage函數(shù)里，也同樣的異步調(diào)用了model的save函數(shù)，save函數(shù)也返回了一個Promise對象，這樣saveMessage函數(shù)也能異步調(diào)用model的save了。
最后通過controller.init(view, model)實現(xiàn)了代碼的調(diào)用。
