MVC
1. 解释他是什么
是一种设计理念,将代码进行逻辑分离,
分离成控制层、视图层及数据层三层
2. 有什么作用
降低了耦合度,提高了代码的扩展性,易修改性
M:Model,模型。 JavaBean
- 完成具体的业务操作,如:查询数据库,封装对象
V:view视图。JSP、HTML等来进行数据展示
C:Controller控制器。 Servlet
获取View的请求
调用模型将数据交给视图进行展示
html
<script src="../js/data.js"></script>
<script src="../js/model.js"></script>
<script src="../js/view.js"></script>
<script>
data.forEach(function(obj) {
var model = createModel(obj);
var view = createView(model);
document.querySelector('ul').appendChild(view);
})
</script>
data.js
var data = [
{
head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
nick: "hey,熊猫先生",
words: "大郎,该吃药了!",
type: "info",
time: "1小时前",
pics: [
"https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
"https://t7.baidu.com/it/u=4069854689,43753836&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF",
"https://t7.baidu.com/it/u=1035726655,1110652804&fm=193&f=GIF",
"https://t7.baidu.com/it/u=762481686,2214126081&fm=193&f=GIF"
]
},{
head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
nick: "路人甲",
words: "今天好像看到策哥了!",
type: "video",
time: "1小时前",
video_url: "https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF"
},{
head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
nick: "hey,熊猫先生",
words: "大郎,该吃药了!",
type: "info",
time: "1小时前",
pics: [
"https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
"https://t7.baidu.com/it/u=4069854689,43753836&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF"
]
},{
head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
nick: "hey,熊猫先生",
words: "大郎,该吃药了!",
type: "info",
time: "1小时前",
pics: [
"https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF"
]
},{
head_pic: "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
nick: "路人已",
words: "今天好像看到策哥了!",
type: "ad",
time: "1小时前",
ad_pic: "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
link: "http://www.baidu.com"
},{
head_pic: "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
nick: "路人并",
words: "今天好像看到策哥了!",
type: "link",
time: "1小时前",
linkInfo: {
pic: "https://t7.baidu.com/it/u=801209673,1770377204&fm=193&f=GIF",
content: "这是个链接",
url: "http://www.jd.com"
}
},{
head_pic: "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
nick: "路人已",
words: "今天好像看到策哥了!",
type: "ad",
time: "1小时前",
ad_pic: "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
link: "http://www.baidu.com"
},{
head_pic: "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
nick: "路人并",
words: "今天好像看到策哥了!",
type: "link",
time: "1小时前",
linkInfo: {
pic: "https://t7.baidu.com/it/u=801209673,1770377204&fm=193&f=GIF",
content: "这是个链接",
url: "http://www.jd.com"
}
},{
head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
nick: "hey,熊猫先生",
words: "大郎,该吃药了!",
type: "info",
time: "1小时前",
pics: [
"https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
"https://t7.baidu.com/it/u=4069854689,43753836&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF"
]
},{
head_pic: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
nick: "路人甲",
words: "今天好像看到策哥了!",
type: "video",
time: "1小时前",
video_url: "https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF"
}
];
model.js
function Model(obj) {
this.head_pic = obj.head_pic;
this.nick = obj.nick;
this.time = obj.time;
this.type = obj.type;
this.words = obj.words;
}
// 子类
function InfoModel(obj) {
Model.call(this, obj);
this.pics = obj.pics;
}
function Admodel(obj) {
Model.call(this, obj);
this.ad_pic = obj.ad_pic;
this.link = obj.link;
}
function VideoModel(obj) {
Model.call(this, obj);
this.video_url = obj.video_url;
}
function LinkModel(obj) {
Model.call(this, obj);
this.linkInfo = obj.linkInfo;
}
// 外部调用
function createModel(obj) {
var model = null;
if (obj.type === 'ad') {
model = new Admodel(obj);
} else if (obj.type === 'link') {
model = new LinkModel(obj);
} else if (obj.type === 'video') {
model = new VideoModel(obj);
} else if (obj.type === 'info') {
model = new InfoModel(obj);
}
return model;
}
view.js
// 创建不同类型的视图
function infoView(model) {
var d = document.createElement('li');
d.innerHTML = `
<img src="${model.head_pic}" alt="">
<div>
<p class="nick">${model.nick}</p>
<p class="words">${model.words}</p>
<div class="pics">
</div>
<p class="time">${model.time}</p>
</div>
`;
// 根据数据的内容,动态添加img
var pics = d.querySelector('.pics');
model.pics.forEach(function (url) {
pics.innerHTML += `
<img src = "${url}" />
`;
})
return d;
}
function adView(model) {
var d = document.createElement('li');
d.innerHTML = `
<img src="${model.head_pic}" alt="">
<div>
<p class="nick">${model.nick}</p>
<p class="words">${model.words}</p>
<a class="adLink" href="${model.link}">
<img src="${model.ad_pic}" alt="">
</a>
<p class="time">${model.time}</p>
</div>
`;
return d;
}
function linkView(model) {
var d = document.createElement('li');
d.innerHTML = `
<img src="${model.head_pic}" alt="">
<div>
<p class="nick">${model.nick}</p>
<p class="words">${model.words}</p>
<a href="${model.linkInfo.url}" class="link">
<img src="${model.linkInfo.pic}" alt="">
<p>${model.linkInfo.content}</p>
</a>
<p class="time">${model.time}</p>
</div>
`;
return d;
}
function videoView(model) {
var d = document.createElement('li');
d.innerHTML = `
<img src="${model.head_pic}" alt="">
<div>
<p class="nick"${model.nick}</p>
<p class="words">${model.words}</p>
<img class="videoImg" src="${model.video_url}" alt="">
<p class="time">${model.time}</p>
</div>
`;
return d;
}
// 对外调用
function createView(model) {
var view = null;
if (model.type === 'ad') {
view = adView(model);
} else if (model.type === 'link') {
view = linkView(model);
} else if (model.type === 'video') {
view = videoView(model);
} else if (model.type === 'info') {
view = infoView(model);
}
return view;
}