##引言

工作大概9年了,就算不算上在学校里的写网页的经历,其实从事与Web前端有关的开发已经8年。这8年我自己也随着Web开发技术的革新,也在不停地更新这方面的知识体系。最近在想,是时候对目前所掌握的Web开发技术进行一个小结了。于是就有了这个系列的开始,这个系列开篇会概览性地说一下Web开发几个重要的工具或技术,后面则会在以demo示例的方式讲一讲在真实项目中是如何实践它们的。

很多年前,那个时候写前端页面真的很简单,基本上抓起一个编辑器就可以开始写html了,当时页面真的很简单,就是一堆html标签,有个别事件处理,动画效果,几行javascript代码就搞定了。但事实上随着现在Web端开发技术的发展,Web前端页面变得越来越复杂了,甚至还有人十分推崇One Page Application,即在一个页面搞定所有的用户界面交互。后端服务则变得越来越简单了,服务端渲染技术用的人越来越少了,后端基本上就成了提供restful api的server了。

编译工具链

面对Web前端越来越复杂的页面逻辑,以前在页面里随意写javascript代码的方式必须更新了,javascript代码必须被更合理地管理,于是产生了不少前端代码模块依赖系统,比较出名的是cmd, amd, umd。javascript代码被合理地拆分后,面临一个问题,文件过多,而用户浏览网页时不可能等待下载如此多的脚本文件下载,所以必须将拆分后的脚本文件进行合并,合并之后最好还能不影响调试,如果是生产环境最好还能对脚本文件去重、压缩等一系统优化。经过几个项目的实践,我最终还是选择了插件众多,功能强大的webpack作为Web前端代码的编译工具。

界面库

很多年前,我做Web开发也谈不上界面库,一度认为html标准的那些标签就是界面库,抓起来就用。后来发现有时候一些html标签及其附带的javascript代码、css代码频繁重复,于是就想起是应该封装部分组件了,当时Web开发社区里也出现了不少jquery插件,基本上很多功能很复杂的组件都可以封装到一个jquery插件里去,同时也出现了像extjs那样很成体系的前端框架。后来又出现了bootstrap这种前端css框架,写样式更简单了。但一直觉得前端的技术不成体系,一个项目做下来,前端无非是jquery+n个jquery插件+bootstrap样式框架+其它杂七杂八的业务js代码。多个项目做下来,最大的收获就是积累了不少jquery插件的用法,还有了解了不少浏览器的避坑方案。直到发现了React,才发现界面库可以如此简单高效,而且不像extjs那样有超高的约束性。

前端分层框架

我是从java Web开发过来的,很早就知道架构分层的概念,后端很早就有了Controller + Service + Model分层的概念,但前端分层却是从“One Page Application”开始流行才开始,渐渐地MVVM成了前端分层的标配。这方面我倒不是特关心,当然目前与React配合最好的还是redux了。

与后端通讯的技术

最常用的当时是直接发GET, POST请求,稍高级一点采用AJAX方式发GET, POST请求,但如果你能用起来websocket的话,我建议还是可以大量地采用websocket,实时双工是很大的优势。