1.CRM(Copy Run Modify)
2.MVC (Model-View-Controller)
MVC英文即Model-View-Controller,即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离。Model负责数据储存交互,View负责视图,Controller负责逻辑,按功能划分代码,使代码结构逻辑化,清晰化。
1.Model: 模型持有所有的数据、状态和程序逻辑.(数据)
2.View: 负责界面的布局和显示.(视图)
3.Controller: 负责模型和界面之间的交互.(处理数据和视图之间的交互)
3.实现MVC的过程
1.模块化:将每个功能独立封装,各模块互不影响。
2.使用立即执行函数创造局部执行环境,避免了全局变量的出现。
3.使用闭包解决两个模块需要交互时的问题(可以通过闭包间接的改变一个局部变量)。
模块1
!function(){
var name=window.name="wang"
}
模块2
!function(){
var name=window.name//wnag
}
这样就可以使模块2获得name存的字符串,实现了两个模块之间的交流。
升级
模块1
!function(){
var person={
name:'wang',
age:18
}
window.wnagGrowup=function(){
person.age++;
return person.age;
}
}
模块2
!function(){
var age=window.wangGrowup();
}
- 立即执行函数使得 person 无法被外部访问
- 闭包使得匿名函数可以操作 person
- window.frankGrowUp 保存了匿名函数的地址
- 任何地方都可以使用 window.frankGrowUp
- 任何地方都可以使用 window.frankGrowUp 操作 person,但是不能直接访问 person
这样我们可以通过全局的接口来操作被屏蔽局部变量。
MVC模式
格式:
var model ={
//获取数据
fecth:function(){},
//存储数据
save:function(){}
}
var view=document.querySelector('#view')
var controller={
view:null,
init:function(){
this.view=view;
this.bindEvent();
},
bindEvent:function(){}
}
实例:
!function () {
var model = {
//初始化数据库
initAV: function() {
//初始化leancloud
var APP_ID = "uIYIoLNwz3v4F1P0wIMobPvU-gzGzoHsz";
var APP_KEY = "Kcm7BYxMpwGKtWHXBJW2ymVs";
AV.init({ appId: APP_ID, appKey: APP_KEY });
},
//获取数据
fetch: function () {
//从云获取历史留言
var query = new AV.Query("message");
//注意这里,要用箭头函数。this内外指向一至。要不然里面就不饿能够用this,this指向花发生变化。
return query.find();
},
//存储数据
save: function (name,content) {
//创建message表
var xxx = AV.Object.extend("message");
//在message表中创建一行数据
var testObject = new xxx();
//数据的内容是 'content': content 保存
//如果保存成功执行consol
return testObject.save({ name: name, content: content })
}
}
var view = document.querySelector('section#LeaveMessage')
var controller = {
view: null, messageBoard: null, myForm: null,model:null,
init: function () {
this.view = view;
this.messageBoard = document.querySelector("#historyMessage");
this.myForm = this.view.querySelector("#messageForm");
this.model=model;
this.model.initAV();
this.loadMessage();
this.bindEvent();
},
loadMessage: function () {
model.fetch().then((messages) => {
let arr = messages.map(items => {
return items.attributes;
});
arr.forEach(items => {
let name = items.name;
let content = items.content;
let li = document.createElement("li");
li.innerText = `${name}:${content}`;
this.messageBoard.appendChild(li);
});
return AV.Object.saveAll(messages);
}).then(function (messages) {
// 更新成功
console.log(messages);
}, function (error) {
// 异常处理
alert(error);
});
},
bindEvent: function () {
this.myForm.addEventListener("submit", (event) => {
event.preventDefault();
//存储留言到云
this.saveMessage();
});
},
saveMessage: function () {
let myForm = controller.myForm;
var content = myForm.querySelector('input[name="content"]').value;
var name = myForm.querySelector('input[name="name"]').value;
if(content===''){
alert('请输入内容')
} else {
let li = document.createElement("li");
li.innerText = `${name}:${content}`;
controller.messageBoard.appendChild(li);
model.save(name, content).then(
function (object) {
console.log("存入一条数据");
console.log(content);
},
() => { }
);
}
}
};
controller.init();
}.call()
箭头函数,内外this不变。箭头函数的this就只最近的作用环境的对象
总结
Model 操作数据
View 表示视图
Controller 是控制器
Model 和服务器交互,Model 将得到的数据交给 Controller,Controller 把数据填入 View,并监听 View
用户操作 View,如点击按钮,Controller 就会接受到点击事件,Controller 这时会去调用 Model,Model 会与服务器交互,得到数据后返回给 Controller,Controller 得到数据就去更新 View