前端技术的发展与演变

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

 

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

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

有了这些之后，咱们已经能够开发基本的网络应用了，可是会发现它们并很差用，或者说存在一些缺陷，有优化的余地。

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

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

 

2、框架层（各种前端库）

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

 

3、组件层（或插件）

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

 

4、应用层（业务层）

如购物车，权限管理等等，应用层的业务逻辑一般随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。

　　

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

　　

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