前端开发基础

starshine360

已于 2022-05-22 23:04:34 修改

阅读量1k

点赞数

分类专栏：前端开发文章标签：前端

于 2022-05-22 21:35:49 首次发布

本文链接：https://blog.csdn.net/weixin_44249077/article/details/124916407

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文内容源自《Vue.js前端开发 - 基础与项目实战》，在此由衷感谢该书的作者。本文首先概述网页开发的发展历程，重点介绍MVC、MVP、MVVM的概念和区别，最后列举合适的开发工具。

文章目录

1. 前端开发的发展历程

在万维网（World Wide Web）创建初期，网页是完全基于HTML页面的，所有内容都是静态的，不能对页面进行修改。随后，JS应运而生，实现了客户端的计算任务。Ajax的出现则将我们从Web网页时代带到了Web应用时代，即Web 2.0时代。

Web网页时代和Web应用时代大不相同。在Web网页时代，网页是由服务端渲染的。服务端先渲染出HTML页面，之后柔和JS和CSS文件，再发送给浏览器，让浏览器解析并呈现。在Web应用时代，客户端可以自己对数据进行处理，并且做出相应的渲染。

而后，jQuery的出现促进了Web 2.0时代的进步，优雅的语法、事件驱动型的编程思维使得它极易上手。继而，React、Vue.js等框架的出现，促进了前后端分离的进程。在前后端分离的架构中，前后端之间通过HTTP请求进行交互。后端按照约定的数据格式为前端提供可调用的API服务，前端获取数据后进行组装和渲染。

2. MVC、MVP、MVVM

2.1 MVC简介

MVC是对Model层、View层、Controller层的统称。Model层存储数据，View层则是展示数据。Controller层接收用户输入，进行相应操作，触发Model层或者View层。注意，Controller层在触发View层时，并不会更新View层中的数据。View层中的数据是通过监听Model层数据变化而自动更新的，与Controller层无关。

MVC框架的缺点是，大部分逻辑集中于Controller层，带给Controller层很大压力，而已经有独立处理事件能力的View层却没有用到。此外，Controller层和View层之间是一一对应的，断绝了View层复用的可能，产生了较多冗余代码。

2.2 MVP简介

MVP是指Model-View-Presenter。在MVC层，View层可以直接监听Model层来更新。但在MVP中，View层必须通过Presenter层提供的接口来间接访问Model，如此，将View层与Model层完全分离，所以View层可以抽离出来做成组件，复用性较好。

MVP框架的缺点是，View层和Model层都需要经过Presenter层，使得Presenter层比较复杂，维护较难。而且因为没有绑定数据，所有数据都需要通过Presenter层进行“手动同步”。

2.3 MVVM简介

MVVM包含Model层、View层、ViewModel层。ViewModel层把Model层与View层的“数据同步”自动化，解决了MVP框架中数据同步比较麻烦的问题。ViewModel层双向绑定了View层和Model层，随着View层的数据变化，系统会自动修改Model层的数据，反之同理。MVVM模型中数据绑定方法一般有3种：数据劫持、发布-订阅模式、脏值检查。