全栈工程师修炼指南
熊燚(四火)
Oracle 首席软件工程师
32206 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 46 讲
全栈回顾 (1讲)
加餐 (1讲)
全栈工程师修炼指南
15
15
1.0x
00:00/00:00
登录|注册

09 | MVC架构解析:视图(View)篇

客户端聚合要求客户端具备一定的规范性和运算能力
客户端聚合将服务器端聚合造成的计算压力分散到了客户端
客户端-服务端分离和模板-数据聚合的统一
聚合静态的模板和动态的数据
将一个页面中不同的区域聚合起来
拆分方法决定不同的聚合方式
SSI
Portlet
模板引擎
iFrame 聚合
客户端聚合的弊端
资源上的区别
客户端聚合技术
数据-模板聚合
结构聚合
视图是指将数据有目的、按规则呈现出来的组件
扩展阅读
选修课堂:动手使用 HTML 5 的模板标签
总结思考
模板引擎的工作机制
常见的聚合技术
服务端和客户端聚合方式的比较
页面聚合技术
概念
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
立即购买
登录 后留言

全部留言(14)

  • 最新
  • 精选
  • pyhhou
    1. 之前在用 React 的时候使用过一个叫 JSX 的东西,其功能就是将 HTML 样式的代码转化成 JavaScript 中的函数调用,对于一些复杂的结构,JSX 可以让代码变得更加简洁清晰,使得 React 中的代码风格能够被大多数人所适应,一开始认为 JSX 就是模版引擎,毕竟直观看,它和模版引擎的功能极其相似,但是 JSX 并不是模版引擎,只是用来代替模版引擎的一个语法糖,解释就是 JSX 表达的是 Virtual DOM 并不是实际的 HTML;之前之所以选用这个技术也是看 React 官网上说 JSX 和 React 比较搭 2. 不是特别同意这个观点,老师在文章中已经提到了客户端聚合的一些缺陷,就是这种方式需要客户端有一定的规范性和运算处理能力,如果是仅仅使用客户端聚合而不考虑服务器端聚合,这等同于将鸡蛋放在同一个篮子里,当项目的规模上来了,页面的模块增多了,聚合的复杂性将大大提升,客户端聚合将不能很好的进行;个人认为正确的考虑方式是结合实际情况考虑,将复杂的任务拆分并解耦,综合考虑服务器端聚合和客户端聚合

    作者回复: 👍

    2019-10-08
    4
  • CC
    1. 用过 SSI 和 Nunjucks。 当时选择 SSI 是因为自己对前端技术了解不足,SSI 容易掌握。当对复杂模板有需求后,找到了 Nunjucks。 现在回头看,其实自己对模板引擎的 trade-off 了解并不多,拿到一个就用,缺少深入理解。 2. 我不同意这个观点。 客户端聚合有代价。 第一次进入 web 或 web app 要等待一段时间。如果手机+不流畅的网络访问,一开始的体验不太好。如果是复杂的 web app,那么客户端需要下载的文件量和计算量就较大,等待时间就更长。 如文中提到,服务端聚合,可以通过分层和解耦,把一部分信息优先发送到客户端,这样会有更好的体验。 还有一种选择是 static site generator,把聚合的步骤在本地完成。但它不适合需要动态更新的网站,以及如果网站数据很大,本地编辑和执行的时间就会很长。 根据具体需求,选择适合的方案。

    作者回复: 👍

    2019-10-01
    2
  • 开心噶花苞
    解耦 和 耦合是翻译得很差的计算机专业名词的典范,就是,会中文的人乍一看,也不知道这两个是什么词,当然会有人会觉得这个内涵丰富,词义精准,但是这个就是中文翻译的一个弊端,本来很简单的词,偏偏要用很陌生的词来翻译。

    作者回复: 了解,那具体他们翻译成什么比较好呢?

    2020-05-03
    4
    1
  • garyhimself
    客户端聚合是前后端分离,服务端聚合就是前后端放在一起通过后端渲染页面,不知道我的理解是否到位

    作者回复: 这里的区别是聚合的位置,是在客户端还是服务端。而不是模糊的“前后端分离”

    2021-10-25
  • 丁丁历险记
    我的天,硬是听出玄幻小说等更新的感觉。。。

    作者回复: 😝

    2019-09-30
  • 四喜
    从反爬虫的角度, 放在客户端聚合,势必要分多个请求。不想暴露的数据api就得引入加解密。 对于服务端聚合的页面,比较好控制呈现的数据维度和量,爬虫也只能老实的解析dom树。

    作者回复: 想法不错!但是如果只是为了反爬虫,还有其它更好的方法来做到这一点(比如使用随页面生成的一次性 token),而不是说为了反爬虫就必须把 Web API 隐藏起来。

    2019-09-30
    3
  • 💢 星星💢
    原来公司项目用的template是这个原因啊,我说为啥不直接用jsp el取值呢,哈哈。。
    2019-11-26
    1
  • paperen
    1. 自己写php的,用过smarty(用的人多),其实大部分框架都会包含模板引擎,后来发现公司就这么几个php开发,这模板也不可能让前端去写去学,也就没怎么用了,也逐步改变为页面与服务(页面+接口)分离的模式开发项目 2. 还是得看场景,一个项目来说前端部分在客户端渲染是普遍做法,但管理后台这些内部性质的平台开发还是大多数会选用服务端聚合
    2020-06-02
  • 鹏😎
    小白,努力学习中...
    2019-10-11
  • leslie
    打卡吧:欠账了、、、开发的东西确实学习中结合面向模块编程在啃理解-发现确实还是理解起来很辛苦,放慢学习速度慢慢循环去看才能大致明白;后面加紧吧,坚持在课程完成的时能把每篇文章基本学完。
    2019-10-09
收起评论
显示
设置
留言
14
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部