MVC模式

Rinsann 2021年09月06日 582次浏览

浅析MVC模式

Don't Repeat Yourself - DRY 原则

哪里重复了?

代码级别的重复

  • 把相同的三行代码写了两遍
  • 那么你就应该重构它

页面级别

  • 把类似的页面做了10遍
  • 那么你就想出一个万金油的写法

MVC就是一个万金油

  • 所有的页面都可以使用MVC来优化代码结构

  • 每个模块都可以写成三个对象、分别是M、V、C

  • M-Model(数据模型)负责操作所有数据

  • V-View (视图)负责所有UI界面

  • C-Controller(控制器)负责其他

MVC没有严格的定义,M/V/C 分别要做什么也很随意,大概对就行

import方式引入jquery

yarn init / npm init
yarn add jquery / npm install jquery

所有操作系统中滚动条宽度大概在 14~17px左右。

抽象思维1

最小知识原则

  • 引入一个模块需要引入 html、css、js
  • 引入一个模块需要引入html、js
  • 引入一个模块需要引入js
  • 需要知道的知识越少越好,模块化为这一点奠定了基础

代价

  • 这样做会使得页面一开始是空白的,没内容没样式
  • 解决的办法很多,比如加img loading、加骨架、加占位内容等
  • 也有人选择用SSR技术来解决

抽象思维2

以不变应万变

  • 既然每个模块都可以用m+v+c 搞定
  • 那么每个模块我就都可以这样写就好,不用再思考类似的需求该怎么做了

代价

  • 有时候会有一些多余的用不到的代码
  • 有时候遇到特殊情况不知道怎么变通,比如没有html 的模块怎么做mvc

抽象思维3

表驱动编程

  • 当你看到大批类似但不重复的代码
  • 看看到底那些才是重要的数据,把重要的数据做成哈希表,你的代码就简单了
  • 这是数据结构只是给我们的红利

代码

  • 没有代价

抽象思维4

事不过三

  • 同样的代码写三遍,就应该抽取成一个函数
  • 同样的属性写三遍,就应该做成共用属性(原型或类)
  • 同样的原型写三遍,就应该用继承

代价

  • 有时候会造成继承层级太深,无法以下看懂代码
  • 可以通过写文档,画类图解决

抽象思维5

俯瞰全局

  • 把所有的对象看成点,一个点和一个点怎么通信
  • 一个点和多个点怎么通信,多个点和多个点怎么通信
  • 最终我们找出一个专用的点负责通信
  • 这个点就是event bus(事件总线)

抽象思维6

view=render(data)

  • 比起操作DOM对象,直接render简单多了
  • 只要改变data,就可以得到对应的view

代价

  • render粗犷的渲染肯定会比DOM操作浪费性能
  • 但是可以使用虚拟DOM,虚拟DOM能让render值更新改更新的地方