JavaScript的MVC是什么？

MVC模式（Model–view–controller）是一种设计模式（或者软件架构），把系统分为三个基本部分：

  • 模型（Model）：只处理有关数据的代码，如与服务器交互数据、增删改查数据
  • 视图（View）：负责用户界面，如渲染HTML渲染、管理html
  • 控制器（Controller）：控制其他流程，但也可以合并M和V。如事件绑定操作、初始化

伪代码如下

  1. class Model{
  2.   data//保存数据
  3.     create(){
  4.       //增
  5.   }
  6.   remove(){
  7.       //删
  8.   }
  9.   update(){
  10.       //改
  11.   }
  12.   get(){
  13.       //查
  14.   }
  15. }
  17. class View {
  18.   elements//管理数据
  19.     html//管理html内容
  20.   render(){
  21.       //负责渲染画面
  22.   }
  23. }
  25. class Controller(){
  26.     init(){
  27.       //初始化相关数据
  28.   }
  29.   events//用户操作的事件
  30.   bindEvent(){
  31.       //绑定事件，响应事件
  32.   }
  33. }

EventBus

EventBus是一种设计模式和框架，主要用于组件/对象间的通信的优化简化。

可以实现M和V之间的通信，M更新数据后可以触发一个函数告诉C更新了，然后就会渲染一次页面。

伪代码

  1. class EventBus {
  2.     on(){
  3.       //监听用户在视图V上进行操作
  4.   }
  5.   trigger(){
  6.       //用户的操作会触发一些更改，将这些更改应用到模拟M上
  7.   }
  8.   off(){
  9.       //不再监听用户在视图V上进行的某项操作
  10.   }
  11. }

表驱动编程

是一种编程模式，即从表里查找信息而不使用逻辑用语。通俗点就是从表里查询信息来代替逻辑语句(如if,case等)。

当代码里为了实现一个功能或者计算一个数值而出现大量的if和else时，可以考虑使用表驱动编程。

伪代码如下：计算一个月的天数

  1. //不使用表驱动编程
  2. if(month = 1){
  3.    day = 31
  4. }else if(month = 2){
  5.     day = 28
  6. }else if(month = 3){
  7.    day = 31
  8. }else if(month = 4){
  9.     day = 30
  10. } else if 
  11. ...
  12. else (month = 12){
  13.     day = 31`
  14. }


  1. //使用表驱动编程
  2. daysPerMonth = array(31,28,31,30,31,30,31,31,30,31,30,31);
  3. days = daysPerMonth[month - 1]

表驱动主要意义是剥离了逻辑和数据，使得程序中的 逻辑和数据一目了然。

模块化的理解

什么是模块化？

  • 将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。
  • 块的内部数据与实现是私有的，只是想外部暴露一些接口（方法）与外部其它模块通信。

好处

  • 避免命名冲突（减少命名空间污染）
  • 更好的分离，按需加载
  • 更高的复用性
  • 更高的维护性