美文网首页全栈工程师修炼指南
MVC架构解析:视图(View)篇

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

作者: 码农架构 | 来源:发表于2020-11-12 17:10 被阅读0次

    概念

    MVC 架构中的视图是指将数据有目的、按规则呈现出来的组件

    因此,如果返回和呈现给用户的不是图形界面,而是 XML 或 JSON 等特定格式组织呈现的数据,它依然是视图,而用 MVC 来解决的问题,也绝不只是具备图形界面的网站或者 App 上的问题。

    页面聚合技术

    里提到的页面聚合,是指将展示的信息通过某种技术手段聚合起来,并形成最终的视图呈现给用户。页面聚合有这样两种典型类型。

    • 结构聚合:指的是将一个页面中不同的区域聚合起来,这体现的是分治的思想。例如一个页面,具备页眉、导航栏、目录、正文、页脚,这些区域可能是分别生成的,但是最后需要把它们聚合在一起,再呈现给用户。
    • 数据 - 模板聚合:指的是聚合静态的模板和动态的数据,这体现的是解耦的思想。例如有的新闻网站首页整个页面的 HTML 是静态的,用户每天看到的样子都是差不多的,但每时每刻的新闻列表却是动态的,是不断更新的。

    请注意这两者并不矛盾,很多网站的页面都兼具这两种聚合方式。

    服务端和客户端聚合方式的比较

    架构上,客户端聚合达成了客户端 - 服务端分离和模板 - 数据聚合这二者的统一,这往往可以简化架构,保持灵活性。

    浏览器在上海,模板和静态资源从本地的上海节点获取,而数据异步从北京的中心节点获取。这种方式下,静态资源的访问是比较快的,而为了保证一致性,数据是从北京的中心节点获取的,这个速度会慢一些。在模板抵达浏览器以后,先展示一个等待的效果,并等待数据返回。在数据也抵达浏览器以后,则立即通过 JavaScript 进行客户端的聚合,展示聚合后的页面。

    image.png

    如果我们使用服务端聚合,就必须在服务端同时准备好模板和数据,聚合形成最终的页面,再返回给浏览器。整个过程涉及到的处理环节更多,架构更为复杂,而且同样为了保证一致性,数据必须放在北京节点,那么模板也就被迫从北京节点取得,聚合完成之后再返回,这样用户的等待时间会更长,用户也会看到浏览器的进度条迟迟完不成。见下图:

    image.png
    • 资源上,客户端聚合将服务器端聚合造成的计算压力,分散到了客户端
    • 可是实际上,这不只是计算的资源,还有网络传输的资源等等。
    • 客户端聚合也有它天然的弊端。其中最重要的一条,就是客户端聚合要求客户端具备一定的规范性和运算能力。

    常见的聚合技术

    iFrame 聚合

    <iframe src="https://..."></iframe>
    

    模板引擎

    Portlet

    • Java 的 Portlet

    SSI

    还记得前面讲过的 CSI,客户端包含吗?与之相对的,自然也有服务端包含——SSI( Server Side Includes)。

    比如下面这样的一条“注释”,从 HTML 的角度来讲,它确实是一条普通的注释,但是对于支持 SSL 的服务器来说,它就是一条特殊的服务器端包含的指令:

    <!--#include file="extend.html" -->
    

    模板引擎的工作机制

    模板引擎把渲染的工作分为编译和执行两个环节,并且只需要编译一次,每当数据改变的时候,模板并没有变,因而反复执行就可以了。

    公众号:码农架构

    相关文章

      网友评论

        本文标题:MVC架构解析:视图(View)篇

        本文链接:https://www.haomeiwen.com/subject/lsdlbktx.html