190322&说说你对框架发展历程的理解？_发展历程的框架-CSDN博客

本文链接：https://blog.csdn.net/qq531295642/article/details/105716529

说说你对框架发展历程的理解？

从一开始的 js, 到 jquery，再到 angularjs, vue, 以及 react，都经历了哪些过程呢。整体来梳理一下。

框架的发展历程
自己的话来捋一捋
准备练一练
参考

框架的发展历程

在上个世纪的 1989 年，欧洲核子研究中心的物理学家 Tim Berners-Lee 发明了超文本标记语言（HyperText Markup Language），简称 HTML，并在 1993 年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。

最早的 HTML 页面是完全静态的网页，它们是预先编写好的存放在 Web 服务器上的 HTML 文件。

浏览器请求某个 URL 时，Web 服务器把对应的 HTML 文件扔个浏览器，就可以用显示 HTML 文件的内容了。

如果要针对不同的用户显示不同的页面，显然不可能给成千上万的用户准备好成千上万的不同的 HTML 文件，所以，服务器就需要针对不同的用户，动态生成不同的 HTML 文件。一个最直接的想法就是利用 C、C++这些编程语言，直接向浏览器输出拼接后的字符串。这种技术被称为 CGI：Common Gateway Interface。

很显然，像新浪首页这样的复杂的 HTML 是不可能通过拼字符串得到的。于是，人们又发现，其实拼字符串的时候，大多数字符串都是 HTML 片段，是不变的，变化的只有少数和用户相关的数据，所以，又出现了新的创建动态 HTML 的方式：ASP、JSP 和 PHP 等—分别有微软、SUN 和开源社区开发。

在以前：

在ASP中，一个ASP文件就是一个HTML，但是，需要替换的变量用特殊的<%=var%>标记出来了，再配合循环、条件判断，创建动态HTML就比CGI要容易得多。

但是，

一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是重新想服务器获取一份新的HTML内容。如果浏览器想要自己修改HTML页面的内容，怎么办？那就需要等到1995年年底，JavaScript被引入到浏览器。

有了JavaScript后，

浏览器就可以运行JavaScript，然后，对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现。

我们只需要知道浏览器就是 JS 执行容器，执行完之后，通过页面显示结果就行了。就像 Java 需要编译器一样原理。

用 JavaScript 在浏览器中操作 HTML，也经历了若干发现阶段。

第一阶段，

是 JS 原生通过浏览器解析机制，它的原理是使用浏览器提供的原生 API 结合 JS 语法，可以直接操作 DOM。如：

<div id="name" style="color:#fff">前端来一套</div>
<div id="age">3</div>

//JavaScript dom1 = document.getElementById('name');var dom2=document.getElementById('age');
dom1.innerHTML = '小前';
dom2.innerHTML = '666';
dom1.style.color = '#000000';//css样式也可以操作

<div id="name" style="color:#fff">小前</div>
<div id="age">666</div>

第二阶段：

我用一个字总结就是懒，就是我们上一篇说的 jQuery 时代，由于原生 API 晦涩难懂，语法很长不好用，最重要的是要考虑各种浏览器兼容性，因为他们的解析标准都不一样，造成了，写一段效果代码要写很多的兼容语法，令人沮丧，所以 jQuery 的出现，迅速占领了世界。

上边的例子用 jQuery 是这样的。

<div id="name" style="color:#fff">前端来一套</div>
<div id="age">3</div>

//jQuery一句话就行
$('#name').text('小前在路上').css('color', '#000000');
$('#age').text('666').css('color', '#fff');

<div id="name" style="color:#fff">小前在路上</div>
<div id="age">666</div>

第三阶段：

MVC 模式，需要服务器端配合，JavaScript 可以再前端修改服务器渲染后的数据。

一句话就是所有通信都是单向的：也就是前期我们最常用的状态，提交一次反馈一次，通信一次相互制约。

比如：提交表单填写内容 > 点击提交 > 业务逻辑处理 > 存入数据库 > 刷新页面 > 服务器取数据库数据 -> 渲染到客户端页面 > 展示上一次你提交的内容。

视图（View）：用户界面
控制器（Controller）：业务逻辑
模型（Model）：数据保存

各部分之间的通信方式如下。

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈。

第四阶段：

MVVM 模式。为什么在 MVC 模式我说这么多废话呢，因为你了解了 MVC 才能更清除的知道 MVVM。

MVVM 最早由微软提出来。它借鉴了桌面应用程序的 MVC 思想，在前端页面中，把 Model 用纯 JavaScript 对象表示，View 负责显示，两者做到了最大限度的分离。也就是我们常说的，前后分离，真正在这里得以实现。

它采用双向绑定（data-binding）：VIew 的变动，自动反映在 ViewModel，反之亦然，Model 数据的变动，也自动展示给页面显示。

把 Model 和 View 关联起来的就是 ViewModel。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 的修改同步回 Model。

自己的话来捋一捋

不走寻常路的倒着来一遍。

现在用的 Vue，React，Angular，都属于 MVVM 架构模式，最早由微软提出来的。MVVM 的核心思想：关注 Model 的变化，让 MVVM 框架利用自己的机制去自动更新 DOM，从而把开发者从操作 DOM 的繁琐中解脱出来！也就是所谓的数据-视图分离，数据驱动视图，视图不影响数据，再也不用管繁琐的 DOM 结构操作了，世界顿时清净，完美！

在往前推一层，是 MVP，MVC 架构模式，比如 EmberJS，KnockoutJS，BackboneJS 等。

再往前推一层，也就是没有架构可言了，就是 JQuery 时代，纯粹是为了操作方便，提高效率。

再往前来一层，那就是直接用原生 JavaScript 去写了。浏览器自己修改页面的也就截止于此了。

在之前就是，ASP、JSP 和 PHP 等动态显示 HTML 内容了。

再往前，就是 CGI 了。

接着再往前推，就是单纯的用 HTML 写好的静态页面了。