MVC是什么？
MVC是一种编程思路，或者说是一种程序架构
注意：它不是框架
MVC将程序结构分为三层：View（视图层）、Model（数据层）、Controller（控制层）。
- View层：用户展示信息，只与Controller通信
- Model层：主要用于处理数据，只与Controller通信
- Controller层：作为中间人，从View层接收信息，告诉Model层，Model层进行数据更新后，通知Controller，Controller再进行处理后告知View进行展示。
这三个层每个都是一个独立的部分，它们之间的交互要遵循一定的规则：View不能与Model直接联系，必须通过Controller进行交互。
如：
MVC模型.png
上图展示的是一个MVC模型之间的数据流向，可以看到View和Model是通过Controller来进行交互的
再以用户上网为例进行说明，如下图：
image.png
以用户搜索“美食为例”，当用户按下Enter键发送请求，该请求到了服务器（Controller），服务器本身并不存储数据，它会通知数据库（Model）去找美食，数据库找到之后，将数据返回给服务器（Controller），服务器对数据进行处理，然后生成页面（View）显示给用户看，这便是一个MVC架构的网址的执行流程
针对于前端代码的MVC
前端代码中的MVC，简单描述就是：Controller监听View层（一般是DOM节点）的变化，然后通过Model层（数据层），数据层进行数据的处理，处理完成后通知Controller层，Controller再通知View层进行渲染
面试问题：
- MVC是什么？
- MVVM是什么？
- React与Vue分别是什么？有什么区别？
参考：《基于MVC的Javascript的富应用》
注意：在前端领域看源代码不是个很好的学习方式，一是因为更新换代太快，二是大部分写的一般，最重要的是要理解它背后的逻辑，了解其原理
可以看下：preact这个库，是react的精简版，只有4k代码
image.png
image.png
image.png
MVC
- M：数据，只与数据有关
- V：视图
- C：控制操作，调用Model，渲染View
MVC就是将代码分成3个层次，
- Model只与数据有关，其他均不管；它是最地下的一层，是核心数据层
- View只与HTML有关，其他均不管，它是在最上面的一层，面向用户
- 而Controller，是控制着Model和View，相当于作为一个中间人的地址，当Model数据更新了就调用View进行渲染，当检测到View中操作，就调用Model 进行数据更改，更改完成后，再执行View进行渲染；
Controller监听View层，如果View有变动，则对Model进行更新，更新完成后再进行渲染；
Controller同时可以监听Model层，当Model层有变动，则对View层进行修改
image.png
Model和View之间是不会相互操作的
//-------- View 视图层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack-demos</title>
</head>
<body>
<div class="modules">
<div class="module1">
</div>
<div class="module2">
</div>
<div class="module3">
<input type="text" name="number2">
<button name="button2">点我</button>
</div>
</div>
<script id="module2Template" type="text/x-handlerbars">
<hr>
<div>{{number}}</div>
<hr>
<button name="increase">加</button>
<hr>
<button name="decrease">减</button>
</script>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
// Controller 类
import $ from 'jquery'
const Handlebars = require('handlebars');
class Controller{
constructor(options){
for(let key in options){
this[key] = options[key]
}
this.$element = $(this.element)
this.init && this.init()
if(this.template && this.render){
this.render()
}
this.bindEvents()
}
bindEvents(){
for(let key in this.events){
let parts = key.split(' ')
let eventType = parts.shift()
let selector = parts.join(' ')
if(typeof this.events[key] === 'function'){
this.$element.on(eventType, selector, this.events[key])
}else if(typeof this.events[key] === 'string'){
let methodName = this.events[key]
this.$element.on(eventType, selector, this[methodName].bind(this))
}
}
}
render(){
let template = (this.template[0] === '#') ?
(document.querySelector(this.template).innerHTML) :
this.template
let html = Handlebars.compile(template)(this.model.data)
this.$element.html(html)
}
}
export default Controller
import Controller from './Controller'
import $ from 'jquery'
// ----------这是Model层
let model = {
data: {
number: 0
},
get(){
return $.get('/data.json').then((response)=>{
this.data = response
return this.data
})
},
increase(){ // 向服务器发请求
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log('500ms 过去了')
this.data.number += 1
resolve(this.data)
},500)
})
},
decrease(){ // 向服务器发请求
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log('500ms 过去了')
this.data.number -= 1
resolve(this.data)
},500)
})
}
}
// ------------这是Controller实例
new Controller({
element: '.module2',
template: '#module2Template',
model: model,
events: {
'click button[name=increase]': 'increase',
'click button[name=decrease]': 'decrease',
},
init(){
this.model.get().then(()=>{
this.render()
})
},
increase(){
this.model.increase().then(()=>{
this.render()
})
},
decrease(){
this.model.decrease().then(()=>{
this.render()
})
}
})
网友评论