09 | MVC架构解析：视图（View）篇
四火
该思维导图由 AI 生成，仅供参考
你好，我是四火。
今天我们继续学习 MVC 架构，主要内容就是 MVC 架构的第二部分——视图（View）。
概念
首先，我想问一问，什么是视图？有程序员说是界面，有程序员说是 UI（User Interface），这些都对，但是都不完整。
我认为 MVC 架构中的视图是指将数据有目的、按规则呈现出来的组件。因此，如果返回和呈现给用户的不是图形界面，而是 XML 或 JSON 等特定格式组织呈现的数据，它依然是视图，而用 MVC 来解决的问题，也绝不只是具备图形界面的网站或者 App 上的问题。
页面聚合技术
虽然视图的定义实际更宽泛，但是我们平时讲到的视图，多半都是指“页面”。这里，就不得不提花样繁多的页面聚合技术了。
回想一下，之前我们在讲 Model 层的时候，是怎样解耦的？我们的办法就是继续分层，或是模块化；而对于 View 层来说，我们的办法则是拆分页面，分别处理，最终聚合起来。具体来说，这里提到的页面聚合，是指将展示的信息通过某种技术手段聚合起来，并形成最终的视图呈现给用户。页面聚合有这样两种典型类型。
结构聚合：指的是将一个页面中不同的区域聚合起来，这体现的是分治的思想。例如一个页面，具备页眉、导航栏、目录、正文、页脚，这些区域可能是分别生成的，但是最后需要把它们聚合在一起，再呈现给用户。
数据 - 模板聚合：指的是聚合静态的模板和动态的数据，这体现的是解耦的思想。例如有的新闻网站首页整个页面的 HTML 是静态的，用户每天看到的样子都是差不多的，但每时每刻的新闻列表却是动态的，是不断更新的。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了MVC架构中的视图（View）以及页面聚合技术的相关内容。视图不仅限于图形界面，还包括XML或JSON等特定格式组织的数据。页面聚合技术包括结构聚合和数据-模板聚合两种典型类型，客户端聚合和服务端聚合各有优劣。文章重点介绍了模板引擎的工作机制，以及HTML 5的模板标签的使用。通过小例子展示了模板引擎的编译和执行过程，以及HTML 5模板标签的使用方法。总结思考部分强调了对软件复杂性问题的解决方法，即“拆分”，并提出了两个问题供读者思考。最后，提供了选修课堂和扩展阅读的内容，引导读者进一步学习相关知识。整体而言，本文内容涵盖了MVC架构中的视图层、页面聚合技术、模板引擎的工作机制以及HTML 5的模板标签的使用方法，适合读者快速了解相关技术特点。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《全栈工程师修炼指南》，新⼈⾸单¥59
《全栈工程师修炼指南》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(14)
- 最新
- 精选
- pyhhou1. 之前在用 React 的时候使用过一个叫 JSX 的东西，其功能就是将 HTML 样式的代码转化成 JavaScript 中的函数调用，对于一些复杂的结构，JSX 可以让代码变得更加简洁清晰，使得 React 中的代码风格能够被大多数人所适应，一开始认为 JSX 就是模版引擎，毕竟直观看，它和模版引擎的功能极其相似，但是 JSX 并不是模版引擎，只是用来代替模版引擎的一个语法糖，解释就是 JSX 表达的是 Virtual DOM 并不是实际的 HTML；之前之所以选用这个技术也是看 React 官网上说 JSX 和 React 比较搭 2. 不是特别同意这个观点，老师在文章中已经提到了客户端聚合的一些缺陷，就是这种方式需要客户端有一定的规范性和运算处理能力，如果是仅仅使用客户端聚合而不考虑服务器端聚合，这等同于将鸡蛋放在同一个篮子里，当项目的规模上来了，页面的模块增多了，聚合的复杂性将大大提升，客户端聚合将不能很好的进行；个人认为正确的考虑方式是结合实际情况考虑，将复杂的任务拆分并解耦，综合考虑服务器端聚合和客户端聚合
作者回复: 👍
2019-10-084 
CC1. 用过 SSI 和 Nunjucks。 当时选择 SSI 是因为自己对前端技术了解不足，SSI 容易掌握。当对复杂模板有需求后，找到了 Nunjucks。 现在回头看，其实自己对模板引擎的 trade-off 了解并不多，拿到一个就用，缺少深入理解。 2. 我不同意这个观点。 客户端聚合有代价。 第一次进入 web 或 web app 要等待一段时间。如果手机+不流畅的网络访问，一开始的体验不太好。如果是复杂的 web app，那么客户端需要下载的文件量和计算量就较大，等待时间就更长。 如文中提到，服务端聚合，可以通过分层和解耦，把一部分信息优先发送到客户端，这样会有更好的体验。 还有一种选择是 static site generator，把聚合的步骤在本地完成。但它不适合需要动态更新的网站，以及如果网站数据很大，本地编辑和执行的时间就会很长。 根据具体需求，选择适合的方案。作者回复: 👍
2019-10-012
开心噶花苞解耦 和 耦合是翻译得很差的计算机专业名词的典范，就是，会中文的人乍一看，也不知道这两个是什么词，当然会有人会觉得这个内涵丰富，词义精准，但是这个就是中文翻译的一个弊端，本来很简单的词，偏偏要用很陌生的词来翻译。作者回复: 了解，那具体他们翻译成什么比较好呢？
2020-05-0341
garyhimself客户端聚合是前后端分离，服务端聚合就是前后端放在一起通过后端渲染页面，不知道我的理解是否到位作者回复: 这里的区别是聚合的位置，是在客户端还是服务端。而不是模糊的“前后端分离”
2021-10-25
丁丁历险记我的天，硬是听出玄幻小说等更新的感觉。。。作者回复: 😝
2019-09-30
四喜从反爬虫的角度， 放在客户端聚合，势必要分多个请求。不想暴露的数据api就得引入加解密。 对于服务端聚合的页面，比较好控制呈现的数据维度和量，爬虫也只能老实的解析dom树。作者回复: 想法不错！但是如果只是为了反爬虫，还有其它更好的方法来做到这一点（比如使用随页面生成的一次性 token），而不是说为了反爬虫就必须把 Web API 隐藏起来。
2019-09-303
💢 星星💢原来公司项目用的template是这个原因啊，我说为啥不直接用jsp el取值呢，哈哈。。2019-11-261
paperen1. 自己写php的，用过smarty（用的人多），其实大部分框架都会包含模板引擎，后来发现公司就这么几个php开发，这模板也不可能让前端去写去学，也就没怎么用了，也逐步改变为页面与服务（页面+接口）分离的模式开发项目 2. 还是得看场景，一个项目来说前端部分在客户端渲染是普遍做法，但管理后台这些内部性质的平台开发还是大多数会选用服务端聚合2020-06-02
鹏😎小白，努力学习中...2019-10-11
leslie打卡吧:欠账了、、、开发的东西确实学习中结合面向模块编程在啃理解-发现确实还是理解起来很辛苦，放慢学习速度慢慢循环去看才能大致明白；后面加紧吧，坚持在课程完成的时能把每篇文章基本学完。2019-10-09
收起评论
