「每日一题」MVC 是什么?

面试时被问到的话,会不会一脸懵逼呢?

后端的 MVC

最开始,前端是没有 MVC 的,MVC 是后端的一个设计模式,所以我们先从后端开始讲。

绝大部分后端服务器,都做一件事情:接收用户发来的请求,返回一段响应内容(内容可以是 HTML、CSS、JS 或者图片等,我们下面主要讨论 HTML)

如下图:

好,既然所有的服务器都要做「接收请求,响应HTML」这件事,是不是就该把这件事总结总结?有些有经验的程序员就开始总结了。

假设我们做的是一个博客网站。


一般来说,有经验的后端会首先「设计 URL」

用户请求 /users/1 可以查看id 为 1 的用户的信息


用户请求 /articles/1 可以查看 id 为 1 的博客文章

简单起见,URL 就先定这两个。定好 URL,再做 MVC 之前,有一个非常重要的东西——路由(Router)。对就是路由器的路由,跟路由器的作用也很相似。

Router 的作用就是让每个 URL 都有一段代码来负责响应。

伪代码如下:

if url == /users/userId
  then showUser(userId)
if url is /articles/articleId
  then showArticle(articleId)

意思就是,当 url 是 /users/userId 的时候调用 showUser,当 url 是 /articles/articleId 的时候,调用 showArticle。

路由的使命就结束了,接下来的工作交给 showUser 和 showArticle。

Controller

上面说的 showUser 和 showArticle 函数就是 Controller(注1)。Controller 负责做什么呢?

先看伪代码:

function showUser (userId)
  user = UserModel.find(userId) // 从数据库获取 user 数据
  content = readFile('user.html') // 获取 user.html 内容
  response = render(content, user) // 将 user 数据填入 HTML 中
  return response // 返回给用户

function showActicle (articleId)
  article = ArticleModel.find(articleId) // 从数据库获取 article 数据
  content = readFile('content.html') // 获取 article.html 内容
  response = render(content, article) // 将 article 数据填入 HTML 中
  return response // 返回给用户

Controller 的作用包括:

  1. 获取数据
  2. 获取 HTML 内容
  3. 将数据填入 HTML
  4. 返回给用户

可能你现在还没理解 Controller,不要紧,我们先看看 Model,也就是上面代码中的 UserModel 和 ArticleModel。


Model

/users/1 页面要「获取用户数据」,然后放到页面里。

/articles/1 页面要「获取文章数据」,然后放到页面里。

也就是说,所有页面都会从数据库读数据(或者往数据库里面写数据)

那么老司机就想:是不是可以把这个行为固定下来,省的每次都要想怎么写。

每个数据都对应一个 Model 对象,Model.find(id) 可以帮你从 MySQL 里取数据,model.save() 可以帮你存数据到 MySQL。

Model 的作用就是:将所有纯数据的操作放到一个类上。

UserModel.find = function (id)
  sql = 'select * from users where id = {id}'
  result = run(sql)
  return result
这样一来,Controller 里就可以直接使用 UserModel.find(id) 来查找 user 了。

View

上面的代码为什么没有 View 呢?

有的,user.html 和 article.html 就是 View。显然,几乎所有 URL 都对应一个 View(HTML)

View 负责的就是视图,或者说,View 负责展示、负责外貌、负责颜值。

<h1>{{ user.name }}</h1>

<img src={{ user.picture }}>

这就是一个 View(视图)。

再回头看 Controller

Controller 其实是联系 Model 和 View 的桥梁,Controller 拿到 Model,然后将 Model 放到 View 里。

最终,就有上面的图了。

以上,就是后端的 MVC 了,一定要记住 MVC 里面还有个 Router 哦。

下次讲前端 MVC。

上期的每日一题:「每日一题」Babel 是什么?

更多前端交流,尽在前端交流5群:152052597


注1:本文没有区分 Controller 和 Action。

编辑于 2016-10-11

文章被以下专栏收录