一、MVC介绍
1.为什么要有MVC
在开发的过程中会遇到的实际情况
-
重复的代码：三行相同代码写了两遍以上
-
重复的页面：把类似的页面做了10遍
MVC就是为了让开发者不需要写那么多重复的代码
-
让新手开发者避免写出屎山
-
只会调用API，不懂得提升自己
-
只会写业务不会封装，不会造轮子
2.MVC是啥
每个模块都可以写成三个对象，即M、V、C
-
M:Model（数据模型）负责操作所有数据 -
V:View（视图）负责所有VI界面 -
C-Controller（控制器）没有明确定义，我们把它作为其他代码的集合对象 -
其实MVC并没有严格定义，一万个开发者心中可能有一万种MVC的定义，因为是抽象的概念
二、MVC代码实现和思想
1.做一个有两个小功能的页面
- 第一个功能，显示数字下方四个按钮分别对应：加1、减1、乘2、除2，点击按钮后，显示的数字发生对应变化
- 第二个功能，两个标签，点击不同标签下方显示不同内容，且被选中的标签变色
2.代码实现
-
新建html文件，引入
style.css文件和main.js文件 -
使用模块化思想分别新建功能1的
app1.js文件、app1.css文件和功能2的app2.js文件、app2.css文件 -
分别把这两个js文件以及css文件引入main.js文件,这样解决了代码很乱的问题
//main.js
import './app1.js'
import './app1.css'
import './app2.js'
import './app2.css'
- 由于还没有学习vue和react等主流框架，所以我只能用jQuery来实现效果
app1.js
-
jQuery获取显示的数据和四个按钮
-
把获取到的数据存进变量里
-
给四个按钮分别设置事件监听，点击以后操作存了数据的变量
-
每一次按钮点击后还需要把变量内的值更新到页面内
app2.js
-
jQuery获取到四个元素
-
给上方的标签设置事件监听，点击以后给上方和下方对应的元素添加class，让其改变颜色和显示
-
判断一下，假如点击了一个标签，则另一个标签的class则为空
MVC改变一下代码
-
给app1.js和app2.js文件内新建三个对象，M、V、C
-
把两个文件内的代码分类后装到这三个对象内
3.抽象思维学习MVC
1.最小知识原则
-
最开始引入一个模块需要引入html、css、js
-
我们过渡到只需要引入html和js，把css放进js里
-
最后我们会把功能内需要的html文件也装进对应的js里，最终做到引入一个功能只需要js就够了
-
以功能1和2为例，我们把需要用的html保存到对应的变量里，在最开始时就添加到页面里
2.以不变应万变
-
我理解到的其实每个模块都能用MVC的模式搞定
-
假如未来遇到类似的需求就不用再思考咋做了，直接代入MVC即可
3. View = render(data)
-
数据改变后，把保存HTML代码的变量直接重新渲染一遍
-
这样比起操作
DOM对象来说，直接render要简单很多 -
只要改变了数据，就可以得到对应的
View -
但这样粗犷的渲染比
DOM操作更浪费性能（后面学习虚拟DOM能解决）
4.表驱动编程
-
假如代码内有大批类似但不重复的代码
-
把重要的数据抽离出来，做成哈希表之类的，用的时候再去调表内的数据
-
我理解到的就是从表里查找信息而不用逻辑语句
if else -
比如功能1的四个按钮，我需要设置四个事件监听函数，可以把重要的数据放进表里，每次用到事件监听的时候再去调用相应的数据，这样可以简化很多
5.俯瞰全局
-
把所有的对象看成点
-
一个与多个点，多个与多个点之间通信，可以找出一个专门用来通讯的点
-
比如
View需要监听Model内的数据发生了改变就渲染数据 -
这时候就需要用到
Event Bus（事件总线）
6.事不过三
-
同样的代码写三遍，就应该封装成一个函数
-
同样的属性写三遍，就应该做成共有属性（原型或类）
-
同样的原型写三遍，就应该用继承（比如EventBus）
-
EventBus在功能1和功能2里的M、V对象内都用到了，我们可以直接让M和V对象继承EventBus的属性，这样就不用反复在M和V里写EventBus了
三、总结
-
MVC确实很抽象，且晦涩难以理解，但如果以后写代码时尽量往这个思想上靠，强迫自己利用MVC优化代码，这样久而久之就能理解MVC的便利
-
理解MVC是为了学习Vue和React打好基础，其实主流框架也就是MVC设计模式优化或做了改变而来的
-
MVC还可以简化为MV，因为C确实感觉实际的用处不太大，给我的感觉是为了多一个对象而新建的C对象
-
MV对象可以直接作为类让app1和app2直接使用，这样MV对象就成为了中间件，app1和app2之间就不会相互影响了
