首先我们来看一下大神的介绍：
1.MVC是三个单词首字母的缩写，它们是Model（模型）、View（视图）、Controller（控制）。
这个模式认为，程序无论简单或复杂，从结构上看，都可以分为三层。
1）最上面的一层，是直接面向用户的“视图层”（view）。它是提供给用户的操作界面，是程序的外壳。
2）中间的一层，就是“控制层”（controller）。它负责根据用户从“视图层”输入的指令，选取“数据层”的数据，对其进行操作，产生相应的结果
3）最下面的一层，是数据层（model），也就是程序需要操作的数据和信息。
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。
对于MVC，不同的人理解可能略微有些差别，我认为上图可以较好的反应三层结构之间的关系。“控制层”可以操纵“数据层”，然后通过渲染，将数据渲染到页面上，“视图层”可以触发事件，引起“控制层”的动作，操作数据，然后再渲染到视图层。
2.MVC代码实现
接下来，我们将用代码来简单的构造一下MVC模式，我们将会从一个最简单的代码逐步转变成MVC模式。
首先我们先来看一下代码的整体结构：
然后这里是html页面：
//index.html
<div class="modules">
<div class="module1">
<input type="text" name="modules1">
<button name="button1">点我</button>
</div>
<div class="module2">
</div>
<div class="module3">
<input type="text" name="modules3">
<button name="button3">点我</button>
</div>
</div>
<script src="bundle.js"></script>
接下来是module1.js：
import $ from "jquery"
开始 最符合我们意思的方法
let $module1 = $('.module1')
$module1.on('change', 'input', function () {
console.log("change1")
})
$module1.on('click', 'button', function () {
console.log("click1")
})
这应该是每一个初学者都能看懂的代码，我们利用jquery进行了简单的DOM操作，但我们改变输入框的内容和点击按钮的时候，控制台都会有相应的提示语。接下来我们会利用函数进行简单的封装。
function Maker(options) {
let controller = {}
controller.$element = $(options.element)
controller.events = options.events
for(let key in controller.events){
let parts = key.split(' ')
let eventType = parts.shift()
let selector = parts.join(' ')
console.log(selector)
controller.$element.on(eventType,selector,controller.events[key])
}
}
Maker({
element: '.module1',
events:{
'change input': function(e){
console.log("change1111")
},
'click button': function(e){
console.log("click1")
}
}
})
上面的这段代码和开始的代码的作用是一摸一样的，我们只是利用Maker进行了一定的封装，似乎有些傻逼，代码一下子多了好多。然后我们再次修改，改成构造函数的形式。
function Maker(options) {
this.$element = $(options.element)
this.events = options.events
this.bindEvent()
}
Maker.prototype.bindEvent = function () {
for(let key in this.events) {
let parts = key.split(' ')
let eventType = parts.shift()
let selector = parts.join(' ')
console.log(selector)
this.$element.on(eventType, selector, this.events[key])
}
}
new Maker({
element: '.module1',
events:{
'change input': function(e){
console.log("change1111")
},
'click button': function(e){
console.log("click1")
}
}
})
似乎还是有点多，我们将Maker放到别的js文件中（改名为Controller），然后利用import导入
//Controller.js
function Controller(options) {
this.$element = $(options.element)
this.events = options.events
this.bindEvent()
}
Controller.prototype.bindEvent = function () {
for(let key in this.events) {
let parts = key.split(' ')
let eventType = parts.shift()
let selector = parts.join(' ')
console.log(selector)
if (typeof this.events[key] === 'function') {
this.$element.on(eventType, selector, this.events[key])
} else if (typeof this.events[key] === 'string') {
this.$element.on(eventType, selector, this[this.events[key]].bind(this))
}
}
}
export default Controller
module1.js
构建Controller.js 利用import,添加了render方法更新DOM
import Controller from "./Controller.js"
import $ from "jquery"
new Controller({
element: '.module1',
events:{
'change input': 'onChangeInput',
'click button': 'onClickBtn'
},
onClickBtn: function(){
let val = $('.module1').find('input').val()
this.render(val)
},
onChangeInput: function (e) {
var input = e.target
console.log(input.value)
},
render: function (value) {
let $output = this.$element.find('.output')
if($output.length === 0){
let $div = $('<div class="output"><div>').text(value)
$div.appendTo(this.$element)
}else {
$output.text(value)
}
}
})
代码其实已经少了很多，只是我们又多实现render功能。
我们将新加一个template值，之后会利用template将”控制层“和”视图层“分离,同时将render放到Controller.js中。
module1.js
new Controller({
element: '.module1',
template: `
<input type="text" name="modules1" value="{{output}}">
<button name="button1">点我</button>
<div class="output">{{output}}</div>
`,
data: {
output: '1'
},
events: {
'change input': 'onChangeInput',
'click button': 'onClickBtn'
},
onClickBtn: function () {
let val = $('.module1').find('input').val()
this.data.output = val
this.render()
},
onChangeInput: function (e) {
var input = e.target
console.log(input.value)
},
})
接下来我们将在module2.js中完全实现三层结构的分离，首先我们将template放到index.html的是script中。
new Controller({
element: '.module2',
template: '#module2Template', //视图分离，放到了index.html中
data: {
number: 1
},
events: {
'click button[name=increase]': 'increase',
'click button[name=decrease]': 'decrease'
},
init: function () {
$.get("./data.json").then((data) => { // 装一下从服务器获得数据
console.log(data)
this.data = data
this.render()
})
},
increase: function () {
this.removeIncrease().then( () =>{
this.data.number += 1
this.render()
})
},
decrease: function () {
this.data.number--
this.render()
},
removeIncrease: function () {
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log("500毫秒过去啦")
resolve({number:this.number++})
},500)
})
}
})
接下来，我们将model和controller分离
let model = {
data: {
number: 0
},
get(){
return $.get("./data.json").then((response) => { // 装一下从服务器获得数据
this.data = response
})
},
increase(){
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log("500毫秒过去啦")
this.data.number += 1
resolve()
},500)
})
},
decrease(){
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log("500毫秒过去啦")
this.data.number -= 1
resolve()
},500)
})
},
}
new Controller({
element: '.module2',
template: '#module2Template', //视图分离，放到了index.html中
model: model,
events: {
'click button[name=increase]': 'increase',
'click button[name=decrease]': 'decrease'
},
init: function () {
this.model.get().then(()=>{
this.render()
})
},
increase: function () {
this.model.increase().then( () =>{
this.render()
})
},
decrease: function () {
this.model.decrease().then(()=>{
this.render()
})
},
})
这样，我们就基本实现了三个结构的分离，model控制数据，template是视图，而Controller可以操作数据，进行渲染。controller是利用model的接口进行操作，controller和视图层是利用render进行渲染。
书籍推荐：基于MVC的JavaScript Web富应用开发
源码可以读：preact的
参考：
iOS - MVC 架构模式
谈谈MVC模式
方方
网友评论