必博（中国）Bibo·官方网站 - 做高端体育品牌

　　软件设计开发数码世界 P.74浅谈前端开发赵商 重庆工程学院移动互联工程研究中心Web 前端开发从曾经的美工到现在的独立热门行业，短短的几年时间，随着JS 或者叫 ES 的热门而兴起，作为一个高校在职老师，很多同学都问过我类似的问题，前端是什么，前端比后端如何，前端好学么，前端就业如何，如今我就用我对 web 前端开发的理解和体会，浅浅谈谈。首先我们来看看整个 Web 前端的开发状况，Web 前端应用发展的历史大概经历了四个阶段：第一个阶段使用的是简单的静态页面；第二个阶段使用得是 JSP、ASP、PHP 等动态脚本语言；第三个阶段是Web2.0 阶段，其核心技术是AJAX 和 JQUERY；第...

　　软件设计开发数码世界 P.74浅谈前端开发赵商 重庆工程学院移动互联工程研究中心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，这些新特性一方面解决了回调地狱问题，另外一方面也让代码更加符合人类的串行思维方式。如果觉得 Promis必博官方网站e 这种异步处理方式满足不了复杂的应用场景，可以采用 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 等同样具备自动化构建功能的打包工具的兴起，其他自动化构建工具现在的作用不如以前了。6. 包管理曾经，NPM 是 Node 模块的管理器，而 Bower 是前端模块管理器，前后端包管理分工明确。但是经过几年的发展，NPM 逐渐有一统 JavaScript 包管理的趋势，大多数前端模块都能在 NPM上找到。7. 测试工具（用于单元测试和 E2E 测试）根据功能和作用进行分类：提供测试环境（Mocha，Jasmine，Jest，Karma）提供测试结构（Mocha，Jasmine，Jest，Cucumber）提供断言功能（Chai，Jasmine，Jest，Unexpected）生成和比较组件和数据结构的快照，以确保以前运行的更改（Jest，Ava）提 供 mocks，spies 和 stubs（Sinon，Jasmine，enzyme，Jest，testdouble）生成代码覆盖率报告（Istanbul，Jest）提供一个浏览器或类似浏览器的环境，控制他们的场景执行（Protractor，Nightwatch，Phantom，Casper）最后通过从以上这些点，我个人做下对于前端开发的特性总结：1.杂而难，难度甚至超过了一般的后台开发，更新变化快。2.web 前端开发正在向响应式和移动端方向大步迈进。3.做前端开发其实就是做编程，不光要有后端开发的特性，同时还要有设计师的特性。所以对于励志于从事前端开发的朋友或者同学来讲，如果打定决心想在这条线上走的更远，那么就要抱着啃透它的决心，砥砺前行。重庆市“三特行动计划”特色专业建设项目和重庆工程学院移动互联网应用开发工程研究中心联合资助。万方数据