前端发展历程

概述

最近在学习前端的基础知识，东学一点西学一点的发现不成体系的学习结果就是看过就忘记，特别是一些需要理解的概念性的问题，于是现在从梳理前端发展脉络入手，看看前端发展如何，争取达到能更加深刻理解某些前端技术的目的。

动静态网站时期

最开始的网站建造者大概不会想到现在网站技术能发展到五花八门吧。最初的网站想法很简单，就是将一些东西展示出来。也就是所说的静态页面，静态页面内容是预先确定的，以文件的形式保存在服务器上，网页内容一经发布就不能改变，一般静态网页是.html，同时还会有与之关联的的css以及js文件。

静态页面随着互联网的发展慢慢的遇到了瓶颈，用户逐渐不满足于单纯的查阅信息和简单的人机交互，而是想着能够实现一些更深层次的与机器对话，因此慢慢产生了动态网页。

动态网页是实时创建的，网页内容取决于用户提供的参数，它不会在web服务器上以文件的形式进行保存，而是每次都通过用户的访问来读取数据库中的数据动态生成界面，常见的技术有PHP，ASP以及JSP等，这个时期前端的概念不太明显，一般前后端开发都是一体的，前端写好静态模板，后端写数据交互，然后将模板套入数据中，这个时候就有了MVC开发模式。

前后端交互时期

Ajax是出现是前端发展的里程碑，它为前后端分离创造了必要条件，它基于XHR对象，实现了异步与服务器交换数据，这样的话实现了浏览器进行输入，Ajax进行数据传输，服务器负责处理数据，并把处理结果通过Ajax返回至浏览器，此时浏览器获取结果进行页面内容的更新

Ajax还有个重要的优化点是不必刷新整个页面，只需要对页面进行局部更新，因为它只获取到想要的数据，返回给浏览器结果，浏览器通过javascript对结果进行处理，这样就能减少客户端与服务器端的交互，从而节省带宽，提高加载速度

jQuery时期

这个时期开始，开发者开始注重前后端分离，在此之前，按照后端的开发思维，进行业务需求就应该先开发一个方法，想办法传入一个DOM，再通过这个方法进行DOM的操作，jQuery则是把侧重点放在DOM上，开发者可选择需要操作的DOM，变成jQuery对象进行链式操作，同时它也消除了js在浏览器间的差异性

前端模块化

jQuery时期逐渐清晰了前端工程师这个概念，前端开发人员在开发时也会通过引用插件的形式让自己能最大程度的复用已有的功能，这使得开发变得轻松，但过多的script加载也会影响到页面的解析和呈现，比如白屏时间过长等问题，而且还会产生全局污染的问题。

因此引入了模块机制，它实质上将还是一个个的工具包，但是在最外层会用代码包一层，避免了函数名和变量名的冲突，而且对于浏览器而言也就只识别被包裹的那一层代码，减少了服务端的请求次数，解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。

前端工程化

由于现在web业务越来越复杂，前端开发者们开始往怎么降本提效，提高开发效率的方向去思考，node的诞生推动了前端工程化的进程。前端工程化可以从模块化，组件化，规划化和自动化四个角度去出发考虑。

此时有一部分人致力于工程化，涌现出一大波的前端框架，组件库等等，在node的cli帮助下，打包，代码检测，环境变量注入，静态资源压缩以及单元测试等功能被整合到项目中，开发者通过cli命令可以一步到位进行项目的构建，开发成本就降低了许多，开发者只需要在cli命令生成的框架制定的文件夹内写入业务逻辑代码，其他的就交给框架了。

参考文章：
1.前端技术演进发展简史
2.模块机制
3.前端工程化的理解