MVC各司其职

  • 模型M（Model）：管理数据（保存数据，增删改查等）
  • 视图V（View）：管理用户能看得见的东西（管理元素、管理HTML、页面渲染等）
  • 控制器C（Controller）：响应用户操作（初始化，绑定事件等） ```javascript / 用伪代码描述 /

class Model { // 保存一些数据 data

  1. // 管理数据（增删改查）
  2. create(){}        // 增
  3. remove(){}        // 删
  4. update(){}        // 改
  5. get(){}                // 查

}

class View { // 管理元素 elements

  1. // 管理HTML
  2.   html
  4. // 负责页面渲染
  5. render(){}

}

class Controller { // 初始化相关操作 init() {}

  1. // 用户操作的事件
  2. events
  4. // 绑定事件，响应用户操作
  5. bindEvent() {}

}

  2. <a name="UR6q4"></a>
  3. ## EventBus
  5. - EventBus（事件总线）
  6. ```javascript
  7. /* 伪代码描述 */
  8. class EventBus {
  9.     // 监听事件
  10.     on() {
  11.         // 监听用户在视图V上进行的操作
  12.     }
  14.     // 触发事件
  15.     trigger() {
  16.         // 用户的操作会触发一些更改，将这些更改应用到模型M上
  17.     }
  19.     // 取消监听事件
  20.     off() {
  21.         // 不再监听用户在视图V上进行的某项操作
  22.     }
  23. }

表驱动编程

何为表驱动

  • 《代码大全》12.2节对于表驱动编程是这样描述的：

    表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。 事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

  • 总结一下就是：表驱动法简化了代码中复杂的if-else逻辑

    表驱动的意义

  • 表驱动的意义在于：逻辑和数据分离

    参考资料：把if-else改成表格驱动法的意义 - caoglish

  • 逻辑的修改是复杂的、高成本的；

  • 数据的修改是简单的、低成本的；

    举个例子🌰

  • 实现一个将一些名词翻译的函数，使用if-else逻辑写法如下： ```javascript / 星期几中文转英文 / function translate(term) { if (term === ‘算法’) {

    1.   return 'Algorithm'

    } else if (term === ‘数据库’) {

    1.   return 'Database'

    } else if (term === ‘框架’) {

    1.   return 'Framework'

    } else {

    1.   return '我不懂你在说什么'

    } }

// 如果想添加一个新的名词翻译，需要再添加一个if-else逻辑，例如： function translate(term) { if (term === ‘算法’) { return ‘Algorithm’ } else if (term === ‘数据库’) { return ‘Database’ } else if (term === ‘框架’) { return ‘Framework’ } else if (term === ‘人工智能’) {
// 此处添加了一个新的名词翻译 return ‘Artificial Intelligence’ } else { return ‘我不懂你在说什么’
} }

  2. - 使用表驱动写法如下：
  3. ```javascript
  4. function translate(term) {
  5.     let terms = {
  6.         '算法': 'Algorithm',
  7.         '数据库': 'Database',
  8.         '框架': 'Framework'
  9.     }
  10.     return terms[term];
  11. }
  13. // 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
  14. function translate(term) {
  15.     let terms = {
  16.         '算法': 'Algorithm',
  17.         '数据库': 'Database',
  18.         '框架': 'Framework',
  19.         '人工智能': 'Artificial Intelligence'        // 添加一个新的名词翻译
  20.     }
  21.     return terms[term];
  22. }
  • 也就是说，表驱动法剥离了逻辑和数据。使得程序中逻辑和数据一目了然。当我们需要修改，只需要修改数据而无需修改代码的逻辑。
  • 大概这就是Linus在TED访谈中所说的Good Code吧

模块化我之理解

什么是模块化

  • 模块化就是将一个或一些功能封装在一个模块中，对外只暴露出必要的接口。

    模块化的优点

  • 提高了可维护性：模块内部的东西只属于它自己，所以改变模块的内部实现并不会对使用这个模块的其他模块造成影响。

  • 提高了复用性：一个模块的功能可以被多次使用，而不需要每次使用再重写一遍。
  • 模块区分得好的话，可以减少实现不同功能代码之间的耦合性。

小结

  • 我觉得无论MVC还是表驱动还是模块化，最终的目的都是为了减少耦合（解耦）。
  • MVC降低了具体视图和抽象数据之间的耦合；
  • 表驱动降低了逻辑和数据之间的耦合；
  • 模块化降低了实现不同功能的代码之间的耦合；
  • 归根结底，都是为了提高代码的可维护性。