前端 MVC 是什么?
MVC 是一种代码组织形式,不是框架,也不是技术。
- Model 操作数据
- View 表示视图
- Controller 是控制器
Model 和服务器交互,Model 将得到的数据交给 Controller,Controller 把数据填入 View,并监听 View
用户操作 View,如点击按钮,Controller 就会接受到点击事件,Controller 这时会去调用 Model,Model 会与服务器交互,得到数据后返回给 Controller,Controller 得到数据就去更新 View
请用代码大概说明 MVC 三个对象分别有哪些重要属性和方法。
window.Model = function(options){
let resourceName = options.resourceName
return{
init: function(){ // 初始化
var APP_ID = 'xiq5lRgBGzFzh91gpwf9NzbM-9Nh9j0Va';
var APP_KEY = 'wMbB0ijtXYFr7DHTvz3dMRza';
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();
message.set(object);
return x.save()
}
}
}
window.View = function(selector){
return this.document.querySelector(selector)
}
window.Controller = function(options){
var init = options.init // B
let object = {
view: null,
model: null,
init: function(view, model){ // A
this.view = view
this.model = model
this.model.init()
init.call(this, view, model) // init 是第二行的 init ,因为第6行的 init 是属性
this.bindEvents.call(this)
},
}
for(let key in options){ // 遍历 把options上的属性(除了 init)复制到 object 里
if(key !== 'init'){
object[key] = options[key]
}
}
return object
}