浅谈前端开发

2018-12-21赵商重庆工程学院移动互联工程研究中心

数码世界 2018年9期

赵商重庆工程学院移动互联工程研究中心

Web前端开发从曾经的美工到现在的独立热门行业，短短的几年时间，随着JS或者叫ES的热门而兴起，作为一个高校在职老师，很多同学都问过我类似的问题，前端是什么，前端比后端如何，前端好学么，前端就业如何，如今我就用我对web前端开发的理解和体会，浅浅谈谈。

首先我们来看看整个Web前端的开发状况，Web前端应用发展的历史大概经历了四个阶段：第一个阶段使用的是简单的静态页面；第二个阶段使用得是JSP、ASP、PHP等动态脚本语言；第三个阶段是Web2.0阶段，其核心技术是AJAX和JQUERY；第四个阶段是基于ES6的各种框架的SPA应用。

整个前端开发技术栈我们可以分为前端语言，前端MVC框架，UI框架，模块化和打包，自动化构建，包管理，测试工具共七个部分。

1. 前端语言

从ES6或者说ES2015开始，JavaScript语言本身的标准化和发展进入划时代的阶段。除了一些新的语法糖，如胖箭头、class关键字等，让JS代码更加清爽外，新的extend继承方式、let，const变量等特性的引入则让JS更加像一门“正常”的语言。

异步操作似乎是JavaScript规范一直在孜孜解决的问题，从最早的回调函数，到Promise，到Generator函数，再到async，这些新特性一方面解决了回调地狱问题，另外一方面也让代码更加符合人类的串行思维方式。如果觉得Promise这种异步处理方式满足不了复杂的应用场景，可以采用RxJS。RxJS是响应式编程的库，基于流式编程使得编写异步代码更加容易。

当然有些浏览器始终落后于时代，如IE，不支持ES5以后的JavaScript新特性，但好在我们有Babel在，尽管放手使用最新的ES特性。将Babel串到你的构建流程中，它会将新的特性转化为浏览器支持更好的ES5代码。

2.前端MVC框架

通常前端技术选型最核心的决策点就是所谓的前端MVC框架，目前热度最高的三大前端框架是Angular（2.0+）、React和Vue。三者都采用了组件化的思想，组件化的将html、js、css组织在一起。

Angular是由Google推出的基于TypeScript的MVVM框架，视图和模型双向绑定，通过指令增强模板的表达能力，同时可以自定义组件化的指令，支持依赖注入、注解。由于策略上的问题，Angular2.0与AngularJS 1.0不同，因此，近两年Angular的活跃度有所下降，但毫无疑问它是一个重量级的企业级框架。

React由Facebook主推，最显著的特点是一切以JS为中心，HTML和CSS都由JS代码生成，因而还出现了一种新的语法：JSX。React实现了Virtual DOM，在DOM变化的场景下，有不错的表现。另外，React本身并不是一个大而全的框架，有自己独有的状态管理方式Redux。

Vue是三者之中最新、最轻量的一个框架，由原google程序员尤雨溪发起，也是主要关注视图部分，既支持双向绑定也可以单向绑定。Vue既有Angular的模板，又有React的Virtual Dom，性能表现在三者中最好。Vue提供了自己的Vuex做状态管理。

值得一提的是，上面三个主流框架都有对应的移动端方案，比如Angular对应的Ionic，React的React Native以及Vue对应的Weex。

3.UI框架

UI框架可以分为CSS框架、CSS预处理工具、UI控件库、数据可视化库等等。

所谓CSS框架其实也就是提前写好的一些CSS，只要在你的HTML中加上对应的类，就能展现出CSS应用的效果。CSS框架虽然也很多，但是影响力比较大的仍旧是老牌的Bootstrap、Semantic-ui等，从CSS发展的趋势看，移动优先，响应式布局，支持网格布局和Flexbox技术，这些是最新CSS框架着力发展的方向。

CSS预处理工具的主要目的是弥补CSS语法不够强大，解决书写啰嗦等问题。目前最主流的三个预处理器是SASS/SCSS、LESS和Stylus，主要特性是提供了变量、函数和mixin、import以及一些逻辑控制语法等。

UI控件库提供诸如 Grid、Calendar、Panel等Web控件，常见的如Ext JS、jQuery UI、EasyUI等。除了基础控件库，还有动画库如Popmotion，图标库如Font Awesome等。

数据可视化库提供各种统计图表，如饼状图，折线图等，比较常用是Highcharts、Echarts和C3。如果现有库还不够用，可以考虑基于D3自己画。

4.模块化和打包

一开始，Web应用还没有这么复杂，JavaScript根本没有模块化的概念，算得上封装的只是function和object，立即执行函数（IIFE）达到了封装私有变量的目的，避免了全局变量受到文件内变量的污染。随着前端应用的发展迫使人们开始考虑模块化的问题。模块系统将互相依赖的多个文件和目录拆分，所有代码都可以按需加载并彼此访问。

最早，伴随着node.js的崛起，CommonJS规范成了JS模块化的规范。但是由于其采用同步加载的方式，所以并不适合Web应用的模块化。后来，AMD（异步模块定义）成为浏览器端模块加载的规范，比较流行的库是RequireJS。ES6出现之后，JavaScript语言本身终于支持模块化了。不需要将所有代码都放在一个IIFE或回调中，只需要在模块中声明需要的内容，所有的声明都被限定在模块的作用域中，对所有脚本和模块全局不可见，然后将需要暴露的模块资源使用export关键字导出，当其它模块依赖此模块时再通过import关键字导入。在不远的将来，ES内置的模块化将取代第三方库。

5. 自动化构建

写完代码，在发布前，还需要进行构建，比如使用了TypeScript等方言，需要用Babel transpile到标准的ES5，如果用到CSS预处理工具如SASS，需要从.scss文件生成.css文件，进一步，为了提高前端加载效率，可能需要将js、css等文件打包压缩，生成雪碧图等等。grunt和gulp都是前端的自动化构建工具，grunt通过配置驱动，gulp是代码流式的处理方式，两者都有大量的插件支持各种任务。比较而言，gulp更加简单易用，上手更快，要优于grunt。然而，由于webpack等同样具备自动化构建功能的打包工具的兴起，其他自动化构建工具现在的作用不如以前了。