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)实现了代码的调用。
