前端技术的发展与演变

近年来，前端技术的发展迅速，但因为前端知识面庞大，在实际学习当中往往无法理清其中的脉络。下面从各种库、框架、插件的层面上，对前端知识点做一些简单的梳理。从软件工程上，将前端分为四个由浅及深的层面或阶段。

 

一、基础层（浏览器原生支持html/css/js）

• HTML超文本标记语言，用标签构建网页的内容。HTML5扩展了标签及其功能。
• CSS层叠样式表，控制页面内容的表现。CSS3增加了更多的特效，比如文本效果和2D/3D转换，以及动画。
• JavaScript的原生API（包括DOM、BOM、Style样式、Canvas、SVG、WebGL等）

有了这些以后，我们已经可以开发基本的网络应用了，但是会发现它们并不好用，或者说存在一些缺陷，有优化的余地。

• 当前后端分离后，通过API获取到的数据，需要填充到页面中，原生DOM操作非常消耗性能，且传统JS使用字符串拼接的方式不太好用
• CSS不能像其他程序语言一样，通过变量、计算、继承等方式很好的管理。
• JS原生API不好用，还存在浏览器兼容等问题。

　　这些问题，前端开发者通过多年的填坑，花费巨大的精力封装了各种框架层，用来减少开发工作量。

 

二、框架层（各类前端库）

JQuery、YUI、Zepto、以及针对H5中canvas的游戏库Lufylegend等等，主要为了解决浏览器原生API不好用和兼容问题，即对原型API做了二次封装，使其更易于开发和掌握，本质上等于依靠框架层间接操作原生浏览器的基础API。在此基础上，又针对一些常用的页面组件，扩展了为插件，即组件或插件层。

 

三、组件层（或插件）

常用的如：日历选择器、富文本编辑器、图片轮播等等。这些仅仅是对WEB应用中，比较常用或通用的部分进行了再次封装。除此之外，那些平台特有的业务逻辑属于应用层。

 

四、应用层（业务层）

如购物车，权限管理等等，应用层的业务逻辑通常随WEB应用的场景有关。

 

　　如上只是传统的开发模式，随着前后端的分离，前端开发分担了越来越多业务逻辑。通过HTTPrequest与后台交互数据，然后通过拼接字符串的方式，生成浏览器识别的DOM结构与样式。这些都让前端开发越来越重，但js本身不能很好的实现模块化管理，所以出现了require、sea等AMD和CMD的模块加载框架。

 

前端的革命

Node的出现，让前端领域发生了巨大的改变，前端开发者终于可以自己开发工具了（如同猿人学会了制造工具，前端脱离了刀耕火种的年代）。随着自动化工具glup、webpack的火热，多种多样的预编译程序（如HTML模板引擎jade、Ejs等，CSS预处理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue等如雨后春笋般蜂拥出现，前端开发进入一次全面封装的时代，组件化开发模式在一定程度上，利用JS的可编程性管理html和css，最后通过编译，再生成浏览器识别的HTML/CSS/JS。

　　

　　移动端的出现，在一定程度上，也对前端技术提出了更高的要求，基于移动端的网络环境，需要用更少的资源实现最大化的效果。

　　

　　最后小程序的推出，进一步拓展了前端开发的应用领域，将应用程序存储到云端的嵌入式开发，或许是未来应用的新方向。