王伟storm_东方国信学院论文分享：前端技术开发栈

日前，东方国信学院组织了开发系列课程培训，以现场面授+远程直播+课后小测验+结课论文的形式，为学员们讲解了18门课程。学员们根据自己的岗位方向，有选择性地深入学习了相关课程，并以结课论文的形式为本系列培训画上了句号。

今天，国信大数据君就为您分享其中的一篇优秀论文。

前端开发技术栈

作者：王伟

老师评语：本论文形式标准、内容上乘，体现出作者对前端技术的理解。我看好这位全栈工程师。

摘要

近几年，Web技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造，其中前端技术，发展更是突飞猛进。自Netscape 发明了 JavaScript后，随着新一代信息技术的普及，人们对于开发客户端脚本的需求也逐渐增大，JavaScript版本不断更新，JavaScript 1.1 作为草案提交给欧洲计算机制造商协会(ECMA)，Web 浏览器开始努力将 ECMAScript 作为JavaScript 实现的基础。各大浏览器厂商相继开发JavaScript引擎，争抢浏览器市场，随着JavaScript不断发展，开发团队及个人开发了许多优秀的框架和基础库，如Ext JS，YUI，jQuery等。

随着标准通用标记语言(HTML)的发展，一些公司联合起来，成立了一个叫做Web超文本应用技术工作组 -WHATWG。WHATWG 致力于 Web 表单和应用程序，而W3C专注于XHTML2.0。在2006 年，双方决定进行合作，来创建一个新版本的 HTML。直到2012年W3C正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。HTML5将技术发展和推广都向前迈进了一大步，语义明确的标签体系、简洁明了的富媒体支持、本地数据的储存技术、canvas 等等各类技术被广泛应用。这个时候Node.js已经悄然崛起，国内的云应用开始尝试使用 Node.js，Node.js 相关工具也纷纷出来。

2012年起，移动互联网的发展直线上升，而移动端的崛起，带来了许多终端开发难题：多终端适配，多分辨率适配，远程调试等，而Bootstrap出现不仅方便了前端，也方便了后端，它的出现让快速建站更加简单。随后几年，JavaScript开始扩散到 CSS，LESS、SASS 和 Stylus 等 CSS 预处理语言开始走俏，Web 开发变得更加紧凑。很多公司也开始在生产环境使用Node.js，出现了许多Node.js Server 的应用框架。前端也有自己独立的服务，前后端分离架构被许多公司应用，前端逐渐步入工业化生产，对于开发着而言，如今前端的开发不亚于后端开发的难度，有时甚至比后端难度还大。

直到现在JavaScript是名副其实的互联网第一大语言。虽然JavaScript创始人Brendan Eich当初一点也不喜欢自己的这个作品，但也阻挡不了它的不断强大。

我目前的定位是做一位全栈Java开发工程师，要成为一位非常合格的全栈Java 开发者其实并不容易，要掌握的技术点包括很多方面，既要学会如HTML、CSS、JavaScript、Sass、React以及相关的JavaScript框架；更要有坚实的Java、数据库(SQL和NoSQL)，消息传递(JMS/AQMP)和Web服务(SOAP/REST)技能。因此要作为一名合格的全栈JAVA开发者，了解自己的前端开发技术栈是非常有必要的，只有这样，才能越来越接近“全栈”Java开发者这个称号。

关键词：ECMAScript ，JavaScript，全栈，WEB

第一章 前端技术栈介绍

技术是无止尽的，也是学不完的，但每个开发者都有自己的技术栈，从上大学到现在，接触前端技术也差不多6年了，在实际项目中学习了前端的架构思想，也学会使用前端的基础库和框架。目前，我的前端开发技术栈如下图：

在实际开发中，对以上所涉及到的技术都有所应用，对某些框架或技术应用到了好几项目中，当然也有深入的了解。

第二章 前端技术栈浅谈

2.1 DIV+CSS;Dreamweaver CS5;Frontpage

我学的是计算机科学与技术专业，当时就是因为对计算机有浓厚的兴趣才报考的这个专业。上大学之后经常上网查询一些资料，发现有些网站做的非常漂亮，出于好奇就想知道人家的网站是怎么做出来的？于是查资料与同学交流，发现大多网站都以DIV+CSS布局为主，也有少部分网站以Table布局，但我最后再深入查相关资料，其实Table布局很不好，当然这在以后的工作中也得以证明。DIV+CSS布局：

布局简洁明了，使用方便，相对于表格来说更容易搜索的到，优化程度高。不易出现错误或者不可控，样式繁多，易控易修改。Table布局：

表格布局不建议使用，这个算是快要被淘汰的一种布局方式。布局不容易调整和规划。容易失控。大部分都不能使用太多样式。Table主要以储存数据为主。

学习DIV+CSS布局时，很让人恼火就是浏览器的兼容问题，当时一直就想我能不能编写一套模板在不同浏览器上显示效果都一样，经过一段时间的努力，编写出了解决方案，利用脚本语言，根据不同的浏览器版本调用不同的CSS样式进行兼容。

随着学习的深入，也发现网上有好多优秀的DIV+CSS学习网站，其中我浏览最多就是CSSZengarden (CSS禅意花园)，该网站致力于兴趣推广、创意激发和鼓励 CSS 的使用和参与，最让我叹为观止的是网站创始人提供网站的文字内容一直不变，成千上万的参与设计人员，提交自己设计的网站，每个风格都不一样，但文字内容都一样，并且每个设计者发布的网站都非常漂亮，值得学习。

正所谓，工欲善其事，必先利其器，我在学习DIV+CSS也用到了开发工具Dreamweaver CS5，该工具软件的功能非常强大，是前台开发必不可少的工具软件。之后我也用了功能相对较弱的Frontpage，使用了不长的时间发现没有Dreamweaver好用，于是再就没有用过，我相信经常进行前台开发的人员，也没有人用Frontpage。

2.2 JavaScript;jQuery; jQuery Plugin

初次使用JavaScript时，感觉HTML中用这种语言，让网页会很炫。但随着学习的不断深入，其实要将这门语言学精通，是相当的有难度。

在使用DIV+CSS布局时，已经对JavaScript多多少少使用了一些，主要使用了它的常用选择器，对DOM的操作等，同时也在网上下载了好多JavaScript的例子，然后使用到自己的网页中，有些代码当时也看不懂，只是在浏览器上看到效果就行了，也没有深入研究。但之后也学习了JavaScript的函数，数据类型，判断语句，循环，验证、节点，对象等技术。

对JavaScript深入学习，必然会接触到非常好用的JavaScript基础库jQuery，在使用jQuery过程中，第一感觉非常好用，用很少的代码可以完成很多复杂的任务。

首先，我们知道jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。也很容易学习。既然它是JavaScript的一个函数库，我们就学会怎样使用它即可，使用jQuery也可以在一定程度上避免浏览器兼容的问题，因为jQuery库已经将浏览器兼容问题考虑了。

使用jQuery期间，我主要学会了jQuery的选择器，事件，效果，DOM操作，遍历，AJAX等技术，当然这些也是经常在项目中使用。在项目中使用jQuery，不得不提jQuery丰富的插件，我经常用的有jQuery Validate，jQuery Accordion，jQuery Autocomplete，jQuery Growl，jQuery Password Validation，jQuery Prettydate，jQuery Tooltip，jQuery Treeview等插件，正是有这么多插件，再加上jQuery自身的优点，才使每个前端开发人员都非常喜爱它。

2.3 Ext JS;Sass;jQuery UI;EasyUI

参加工作后，做的第一个项目，前端使用的就是富客户端Ext JS框架，当时使用的是Ext JS 4,但不知为什么项目中没有使用Ext JS 4的MVC模式，还是使用的Ext JS 3的开发模式。项目开发初期，觉得Ext JS很不好用，随着项目开发到中期，觉得Ext JS这个框架，太强大了，几乎集成了所有web开发的前端组件，也可以自定义组件，完全是组件化开发，组件复用性很好，代码很好维护。CSS也是预编译处理，可以利用它自定义Ext的主题。

之后在另外一个项目中也使用的是Ext JS 4，但这次使用了Ext MVC模式进行前台开发，这样开发就像在编写后端代码，应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护。JavaScript的引用也能按需引用，降低了浏览器的加载负担。

在此项目中使用前后端混合架构，前台大部分使用的是AJAX请求，如下图：

由于Ext JS使用需要授权的，个人学习研究免费，用于商业用途是需要交费的。随后的项目中就没有使用过Ext JS，但自己学习了Ext Js的MVVM(Model-View-ViewModel)架构，MVVM架构的一大重要特性就是利用模型层和视图层的双向数据绑定，从而更好的实现应用程序代码的分层和解耦。

另外在做过的一个项目中使用了EasyUI，它是一种基于jQuery的用户界面插件集合，完美支持HTML5网页的完整框架，使用简单但功能强大。如果熟悉Ext的开发人员，再使用EasyUI，上手很轻松。EasyUI 也提供易于使用的组件，使 Web 开发人员能快速地在流行的jQuery和 HTML5 上建立程序页面。

2.4 Highcharts; ECharts

参加工作第一年，一直使用Highcharts插件作为前端统计分析展现图表。它是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，也能够支持所有主流浏览器和移动平台等特性，最主要的是开源免费。

之后就使用百度的ECharts，觉得这个非常适合国人使用，尤其是ECharts地图，功能很强大，ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系(catesian，同 grid)、极坐标系(polar)、地理坐标系(geo)。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。功能非常强大，还在持续更新。

在实际项目中使用过的数据可视化插件，除过Highcharts，ECharts，还使用过Fusioncharts，D3等。

2.5 Node.js;npm;Bower

众所周知，Node.js是运行在服务端的 JavaScript。现在我们也可以在服务器上运行 JavaScript ，从前端跨越到后端，这样巨大的反差让人难以想象，因为仅仅在几年前 Javascript 还如同 Flash 或者 Java applet 那样嵌入网页在沙箱环境中运行。最重要的是，Node.js 在实时的 Web应用上采用了基于 WebSocket 的推送技术。这意味着什么样的革命性，在经过了20多年的基于无状态的请求-返机制的无状态交互之后，我们终于有了实时的，双向连接的web应用，客户端和服务器端都可以发起通信，能够自由地交换数据。

Node.js既然为前端提供了这么好的运行环境，但一个绝对不应该忽略地方就是默认内置的模块管理工具——NPM。虽然Node.js自身提供了基本的模块。但是在这些基本模块上开发实际应用需要较多的工作。所幸的是NPM上已经有了5112个Node.js库或框架，这些库从各个方面可以帮助Node.js的开发者完成较为复杂的应用。

Bower也是个包管理工具，但现在已经不在维护了，前段时间还有过使用，目前我不常用。

目前我只是学习Node.js，还没有在实际项目中使用，我相信以后随着做的项目越来越复杂，越来越庞大，一定会遇到前后端分离架构的项目，会在实际项目中使用Node.js的。

2.6 React;WebStorm；Sublime Text

我为什么要将;WebStorm;Sublime Text和React放到一起谈论，因为在开发React项目时，用这两个开发工具，效率非常高，刚开始我用的是WebStorm，直接可以创建React项目，运行React的环境也可以快速配置，同时还提供SVN功能，能与同事一起开发等等，当然被称为“Web前端开发神器”的WebStorm，这些功能特性肯定只是冰山一角，之后也用过Sublime Text，这款开发工具的插件非常丰富。

React使用虚拟DOM取代物理DOM作为操作对象，组件和基于组件的设计流程，极大地简化前端架构的理解难度及开发难度。React的核心的概念非常超前，作为一个后端兼前端开发者，必须得了解它的设计理念，目前，也在学习使用React，感觉和以前使用的Ext JS，jQuery UI等框架还不太一样，在React里，由于需要用到JSX，使用Webpack或Browserify这类工具编译代码，使用Babel对ES6的转换兼容。刚开始上手稍微有点难度，但熟悉了之后，开发还是很轻松的，会越来越喜欢这种开发模式，因为它的开发很像后台的开发，有服务器，包管理工具，运行环境，第三方Jar包，第三方系统集成等，而现在前端的开发也不是我以前理解的开发模式，现在的开发前端和后端基本一样。

2.7 jQuery Mobile；React Native

使用jQuery Mobile给客户做过系统演示版的DEMO，在使用jQuery Mobile之前，我们应该搞清楚的是：jQuery Mobile 是创建移动 web 应用程序的框架；适用于所有流行的智能手机和平板电脑；是构建于 jQuery 库之上。jQuery Mobile创建的移动端的应用与原生的APP应用还有一定区别，无法对接手机的原生接口，比如相机，陀螺仪，甚至是最新的指纹识别接口等等，要用HTML5做APP还需要一个可以实现JavaScript对接的环境，这个环境将会在打包APP的时候实现转换，所以jQuery Mobile不过是一个框架罢了，并不能实现完整的APP开发，还需要一些容器配合。目前我只是用jQuery Mobile做了演示版的DEMO，使客户了解我们软件系统的功能模块。

使用jQuery Mobile制作的DEMO，如果系统要真正使用，还得重新开发原生APP，我就想，能不能有一种开发模式，开发前期给客户演示只做个UI页面，如果客户需要接着还能开发，最终能交付给客户所需要的系统。React Native满足了我的需求，它能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP，着力于提高多平台开发的开发效率——仅需学习一次，编写任何平台。React Native我正在学习当中，已经有一个半成品的系统。

第三章 总结与展望

最近，通过参加东方国信学院系列课程的培训，对公司的前端发展也有所了解，最近我还在使用公司研发五部开发团队基于 React 实现的封装组件集EPM UI框架。学习和使用EPM UI后，让我对前端框架有更加深入的了解。

通过这几年开发项目实战，也积累了许多前端的开发技能，学会了一些前端的架构思想和前端一些主流的框架和技术。还有别人已经用的熟透的前端技术或框架，我还没有用过的，要抽空学习和实战一下，但我觉得这些还不够，因为技术不断在更新，设计思想也不断提升，这就要求开发人员要与时俱进，不能太过于落后。我觉得开发人员应该随时保持接受新事物的准备，不是说开发每个项目都得用新的技术，有时候新技术也不太稳定，还没有完全成熟，但必须要了解新的东西，这样才能增长见识，也许以后项目中也能用到。

对自己的前端开发技术栈进行梳理后，我希望今后每隔一段时间再更新一下自己的技术栈，无论是前端技术栈、Java开发技术栈，还是数据库开发技术栈，都进行梳理。

目前乃至今后，社会和企业对开发人员的技能要求越来越高，我不能学习单一的开发语言，单一技能的前端/后端开发已经不能满足企业的需求，这样对自己的发展很不利，企业对全栈工程师会有很大的需求，我们就得慢慢练就精通多门技术的本领。

在以后得工作和生活中，继续扩充自己的知识，提高自己的开发技能。

参考文献

[21]肖睿 著 水利水电出版社《HTML5应用开发与实战》

本文转自“BONC一路有你”微信公众号(欢迎小伙伴们关注！)，仅为公司员工内部原创分享用途发布，严禁其他媒体转载。