Skip to content

Web技术演化

简单网站

1.静态页面

Web技术在最初阶段，网站的主要内容是静态的，大多站点托管在ISP上，由文字和图片组成，制作和表现形式也是以表格为主。当时的用户行为也非常简单，基本只是浏览网页。

ISP(Internet Service Provider)

  • 基本角色 ISP是一家公司，它为您（个人、家庭、企业）提供接入互联网的服务。没有ISP，您的设备（电脑、手机等）就无法连接到全球互联网网络。常见的ISP包括中国电信、中国联通、中国移动，以及国外的Comcast、AT&T等。

  • 具体作用

    1. 对于网站访问者（用户）： 在浏览器中输入一个网址（如 www.google.com）并按下回车时，请求会首先发送到ISP。 ISP的网络会帮助将这个请求路由到目标网站所在的服务器。 然后，目标服务器将网站的数据（文字、图片等）再通过ISP的网络传回给您的设备。 所以，ISP的速度和稳定性直接决定了访问网站的快慢和流畅度。
    2. 对于网站所有者： 网站需要被存放在一台永远连接在互联网上的服务器上。这台服务器本身也是通过一个ISP接入互联网的。 网站所有者通常会向主机托管服务商 或云服务提供商（如阿里云、腾讯云、AWS等，这些本身也是特定类型的ISP）租用服务器和网络带宽。 因此，网站服务器的ISP质量和带宽，决定了全球用户访问这个网站的速度和稳定性。

2. 多媒体阶段

随着技术的不断发展，音频、视频、Flash等多媒体技术诞生了。多媒体的加入使得网页变得更加生动形象，网页上的交互也给用户带来了更好的体验。

3. CGI阶段

渐渐的，多媒体已经不能满足人们的请求，于是CGI (Common Gateway Interface) 应运而生。CGI定义了Web服务器与外部应用程序之间的通信接口标准，因此Web服务器可以通过CGI执行外部程序，让外部程序根据Web请求内容生成动态的内容。

在这个时候，各种编程语言如PHP/ASP/JSP也逐渐加入市场，基于这些语言可以实现更加模块化的、功能更强大的应用程序。

4. MVC、MVP、MVVM

MVC、MVP 与 MVVM 架构演化

1. MVC

  • 全称： Model-View-Controller

  • 核心思想： 将应用分为三个核心部件，各司其职。

  • 工作流程：

    1. Model： 数据和业务逻辑。它负责直接操作数据、访问数据库、包含业务规则。当数据改变时，它会通知它的“观察者”（通常是Controller，但在不同实现中也可能是View）。

    2. View： 用户界面。它负责将数据（从Model获取）可视化，展示给用户。它不处理业务逻辑，只是渲染UI。

    3. Controller： 中间人。它接收用户的输入（例如点击、表单提交），然后根据输入去调用相应的Model进行处理，最后通知View更新以反映Model的变化。

  • 交互关系：

    • 用户操作 View -> View 将输入传递给 Controller -> Controller 调用 Model -> Model 更新并通知 View（在某些实现中，Model通过观察者模式直接通知View更新，这导致了View和Model的一定耦合）-> View 从 Model 获取最新数据并重新渲染。

2. MVP

  • 全称： Model-View-Presenter

  • 核心思想： MVC的一种演变模式，旨在完全切断 View 和 Model 的联系，让 View 变得非常“薄”，所有逻辑都交给 Presenter。

  • 工作流程：

    1. Model： 同MVC，负责数据和业务逻辑。

    2. View： 用户界面。在MVP中，View变得非常被动，它只负责显示Presenter给它的数据，并将所有用户输入事件直接委托给Presenter处理。

    3. Presenter： 中间人，但权力更大。它不仅仅是中间人，它包含了大部分的展示逻辑。它从Model获取数据，进行加工处理后，主动更新View。View和Model完全不知道彼此的存在。

  • 交互关系：

    • 用户操作 View -> View 直接调用 Presenter -> Presenter 调用 Model -> Model 更新并返回数据给 Presenter -> Presenter 主动更新 View。

3. MVVM

  • 全称： Model-View-ViewModel

  • 核心思想： 通过数据绑定来自动同步 View 和 ViewModel，让开发者可以几乎不写“更新UI”的代码。

  • 工作流程：

    1. Model： 同MVC和MVP，负责数据和业务逻辑。

    2. View： 用户界面。在MVVM中，View通过声明式的方式（如XAML、HTML模板）绑定到ViewModel的属性上。

    3. ViewModel： 它是一个“View的模型”，它包含了View要显示的状态和数据。它暴露一些命令供View调用，并包含可观察的属性。当这些属性改变时，通过数据绑定机制，View会自动更新。

  • 交互关系：

    • 用户操作 View -> View 触发 ViewModel 中的一个命令 -> ViewModel 调用 Model -> Model 更新并返回数据给 ViewModel -> ViewModel 的属性自动更新 -> 由于数据绑定，View 自动更新。

总结

  • MVC (分工)： 提出了最基本的分离，但留下了View和Model耦合的尾巴。

  • MVP (解耦)： 通过引入Presenter，彻底斩断了View和Model的联系，代价是需要手动同步，但换来了可测试性。

  • MVVM (自动化)： 利用数据绑定技术，在保持解耦优势的同时，实现了View更新的自动化，极大地提升了开发效率，最终成为现代UI开发的主流思想。