mvc 设计模式
2022.2.28 zgn
- 导航
- 模块化编程
- mvc 三个对象
- 表驱动编程
- eventBus
- 其他补充内容
一、模块化编程
通常我们在刚刚初学前端的时候，会学到在HTML中利用 link 标签和 script 标签 引用css 和 js 文件 但是随着我们的代码越写越长，单个文件中的代码往往会杂乱不堪，出了bug无法快速定位，维护很困难，因此 我们要学习模块化编程的思想
1.index.html ：<script src="main.js"> </script>
//在HTML中只导入一个 main.js文件
2.main.js: import app1.js
import app1.js
import 全局.css
//将代码按照不同功能写入到单个文件中，通过import导入到main.js中，
3. app1.js:import app1.css
app2.js:import app2.css
//将各个模块的css引入到对应的js文件中
/*在这里main相当一个过渡层，把各个功能不同的模块隔绝，互不影响，而且可以快速定位，后期无论是
修改或者是删除都只需要在main文件中修改是否导入即可，不会影响到其他代码*/
二、MVC的三个对象
从最简单的字面意义上来看，MVC是对代码的进一步细化封装，我们将已经写好的代码封装在三个对象中
import $ from 'jquery'
const m={ data } //m 即 model 在这个对象中储存我们代码中需要使用的数据和操作数据的api
const v={ this.render=function() {}} // view 视图 将获取到的数据渲染到页面中，这部分实现我们在页面中能看到的东西
const c={ if (m.data>5){v.render()} } // controller 控制器 负责具体操作的实现 连接v和m
封装到对象中的代码互相不受影响，只通过内部定义的api调用,且分工明确 但是即使优化到这一步，我们任然会发现会有很多重复出现的代码，那就需要我们去更加细化封装代码，这就需要用到表驱动编程和everntBus
三、表驱动编程
function translate(term) {
let terms = {
'1': '一',
'2': '二',
'3': '三'
}
return terms[term];
}
// 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
function translate(term) {
let terms = {
'1': '一',
'2': '二',
'3': '三'
'4': '四' // 添加一个新的名词翻译
}
return terms[term];
}
//避免出现
if（item===1）{console.log('一'}
if（item===2）{console.log('二'}
if（item===3）{console.log('三'}
四、everBus
这块其实我理解的很差，但是我觉得，由于M V C 三个对象之间并没有什么联系（作用域），所以使用v来操作m会比较麻烦，尤其涉及到监控数据变化给出相应变化的函数等
eventBus是一种适用于对象直接通信的方式，从字面意思上看，用到了事件：
- 声明一个全局的对象，它包含on ，trigger等属性
- 利用on为m中的数据添加事件，监控数据是否发生变化，一但变化就调用在c中的teigger 回应一个相应的操作
五、其他
- mvc并没有固定的概念，每个人的理解并不相同，有很多的演化版本
- 当代码中的某个属性重复出现可以声明一个全局可用的类，然后利用继承来使用它
- 如果代码中用到的某个库等，对全体代码都有影响，而且未来可能维护或更换，一定要设置一个过渡层，避免 直接作用到全体代码中，后面维护时，只需要修改过渡层就可以。
