GitChat · 前端 | 从软件工程角度看大前端技术栈

我们都知道，大学几乎是没有 Web 前端课的。以我所在的大学为例，唯一引导我们了解 JavaScript 的也只是‘人机界面’和‘Web应用开发’选修课。

再者，由于这些选修课的课时短、面向的主要群体是大部分大学生等原因，其最终所涉及的内容层次也很难赶上近年来 Web 前端领域的快速变化。

在上述动图中，当我们在搭建好的持续集成(CI)环境下使用 git push 提交代码后，CI 服务器将根据相关配置自动化执行代码规范和代码质量检查过程(这里是自动运行的是测试代码)，并输出相应的检查结果。

通俗易懂的代码注释其意义在程序员界想必“路人皆知”，前端可以使用
JSDoc 来规范注释代码。除了简单的注释之外，JSDoc 还能做很多其他的事情，在 JSDoc 中文文档中，这么介绍到。

一个真实的 JSDoc 示例如下，不难看出有良好注释的代码通俗易懂。

1.4 理解主流编程范式及其思想(必修)

在编程范式上，我们需要理解编程语言的两个分类——命令式编程和声明式编程——的设计思想。其中，非命令式的编程都可归为声明式编程，命令式、函数式和逻辑式是最核心的三种范式。可以用下图来表示。

延伸阅读：
1. 《鸟哥的Linux私房菜:基础学习篇(第3版)》
2. 《现代操作系统(原书第3版) 》
3. 《操作系统:精髓与设计原理(原书第6版)》
4. 《深入理解计算机系统(原书第3版)》

1.8 拥有良好的代码审查、代码重构能力(选修)

适当的和团队成员举办一场 Code Review(代码审查)，有助于保证软件质量、促进团队成长和避免团队成员因缺席而导致软件进度的“单点故障”。尤其在团队没有测试开发人员的情况下，我们很难达到令人满意的测试覆盖率。来一场“说走就走”的代码审查将对软件质量做出巨大贡献。

引用《代码审查与重构的5个层次》的观点，我们可以通过如下五个层次完成代码审查与重构：

第一个层次：“业务架构”的代码审查与代码重构。
第二个层次：“代码架构”的代码审查与代码重构。
第三个层次：“设计模式”的代码审查与代码重构。
第四个层次：“最优算法”的代码审查与代码重构。
第五个层次：“语言与代码规范”的代码审查与代码重构。

1.9 拥有良好的版本控制、项目管理意识(选修)

著名代码托管平台 Github 中点赞量较高的常常是前端项目，JavaScript 编程语言也在 Github 中随处可见。身为前端工程师，我们需要拥有良好的版本控制意识，使项目代码、配置文件的改动历史随时可被人工追踪、被自动化追踪，以便进行 Bug 追溯、代码审查、自动化测试。Github 正如其名，采用的是分布式版本控制系统——Git。

1.10 掌握软件测试相关能力(选修)

白盒测试、黑盒测试、单元测试、集成测试、测试驱动开发

在“拥有良好的代码规范、代码质量、代码注释能力”一节的动图中我们看到了编写测试代码并自动化执行测试的一个应用场景。软件测试一般分为白箱测试和黑箱测试。通俗来讲，黑箱测试测试应用程序的功能，而不是其内部结构或运作，适合集成测试以及系统测试等；白箱测试测试应用程序的内部结构或运作，而不是应用程序的功能，可应用于单元测试、集成测试中。单元测试的目的是检验基本组成单位（函数）的正确性。

以前端开发中常接触到的单元测试框架 Jasmine 为例，为开发上述代码中验证手机格式的函数 checkLoginPhone(phone)，我们可以先编写相应的单元测试代码，每个 describe 用来测试一个函数，其中的多个 it 分别测试该函数在不同条件下的不同结果是否为期待的结果。如下。

软件测试常由专业测试工程师完成，但我们在开发中小型软件时完全可以自己胜任这份工作。愈发偏向业务逻辑的前端对测试的需求愈发凸显。这同时需要我们了解测试驱动开发、敏捷开发、极限编程的知识点。

1.11 熟练绘制概念图、思维导图、流程图、络拓扑图等(选修)

我的另一篇博客《概念图图解 Web Cookie》中曾介绍过概念图与思维导图这两大概念绘制工具。概念图的广泛应用发扬了其发明者约瑟夫·D·诺瓦克(Novak)的那句总结——“有意义的学习涉及到新概念和命题纳入现有的认知结构的同化”。以我在学习过程中绘制的“HTTP”概念图为例，如下所示。

同时相比服务端开发，前端开发因需求的变更其改动量更大，因此在前端开发的过程中使用“精益思想”完成对持续集成、持续交付、持续部署的实战工作意义非凡。

二、前端设计能力

前端分为前端设计和前端开发。前者曾在 Web Pages 时代占据了前端的主流，那时 JavaScript 默认被浏览器禁用，页间多依靠超链接形式相互链接。那时的前端工程师常常要求拥有一定的制图、切图能力。纵然现在 JavaScript 在 Web 领域已从前端拓展到后端 Node.js，一个合格的大前端工程师还是应该多多注重拓展前端设计方面的知识点，以备不时之需。

2.1 掌握一定的用户界面设计、人机交互知识(必修)

无论是懂前端的设计还是懂设计的前端在任何互联公司都是很受欢迎的。良好的用户界面及其交互氛围能让用户产生舒适的体验，在一些功能性较弱的软件项目中，当因用户界面及其氛围不足导致用户体验的下降常会对软件产生致命一击的效果。交互设计要求我们能够进行用户调研、概念设计以及创建用户模型、界面流程并能开发项目原型。

2.3 熟练至少一个主流原型设计工具(选修)

主流原型设计工具常常可以分别制作 Web 端、PC 端和 APP 端的原型，也有很多原型设计工具专为一个平台打造。原型设计工具往往不像平面设计工具一样面面俱到，但能清晰的展现出各页面内的主体组件和各页面间的逻辑关系。

我们在开发中小型前端项目时往往不需要专业的原型设计师(常被产品经理一职所包揽)，熟练使用至少一个主流原型设计工具能使我们在正式编写前端代码前快速开发出一个直观的原型参考系。

下图展现了我在最近一次编程竞赛 – 中国软件杯中快速开发出的原型预览。我们团队只有 3 个人，其他两人分别负责 PHP 微信端和 Java 搜索引擎的应用开发，快速迭代出一个产品原型很有助于前端人员拆分重复组件并快速开发，和服务端人员确定自己需要开发的接口。

详见《“消失”的这俩个月里，我的前端项目如何从零开始》

Ajax (异步的 JavaScript 与XML技术) 的出现让用户不用再经历“提交表单等待服务器的漫长响应并通过刷新页面来告诉自己哪里输入错误”的烦躁经历，这样做也节约了许多宽带。为了更好的掌握异步编程，我们需要掌握 JavaScript 的“同步模式”和“异步模式”，并学会使用相应的回调函数来发布、订阅、处理事件。

抛开单页面应用，Web 页面的性能鲜由 JavaScript 引起，常常是因过多的 DOM 操作引起。虚拟 DOM 随着前端主流框架的更迭孕育而生。通过直接操作虚拟 DOM，间接操作真实 DOM，可以优化很多性能。对虚拟 DOM 的深入了解是见证一步步加入抽象层的前端开发的关键。

拓展阅读：
1. 《JavaScript 异步编程:设计快速响应的络应用》
2. 《JavaScript DOM 编程艺术》
3. 《DOM 启蒙》

3.4 掌握至少一门主流前端框架及其生态链、框架设计能力(必修)

前端框架层出不穷，前端开发领域俨然成了热衷于造轮子的一带。我们可以通过如下几步来掌握至少一门主流前端框架及其生态链。

了解各大前端框架的应用场景。
进行前端开发框架的选型。
掌握所选前端框架的思想。
刻意练习所选前端框架的使用方法。
时刻关注所选前端框架的生态链。

React、Vue 适合单页面应用，拥有很多先进的前端开发思想；BootStrap、Ant Design 偏向 UI 开发，更多的提供 CSS 相关类库。JQuery 经久不衰，极大的方便我们操作真实 DOM 及其 CSS 属性；D3.js、EChart 等框架使我们可以快速进行前端数据可视化的编程；RequireJS 在不支持 ES6 标准的 JS 开发环境下给我们提供了一个良好的模块化编程条件。数不胜数的前端框架都有各自的应用场景，我们的前端项目可以选择其中一至多个框架进行快速开发。

同时，合格的前端工程师不能只会用成型的框架，还应该拥有一定自制框架的能力。我们可以先通过阅读成型前端框架的源码来学习框架设计的思想，有朝一日我们便会根据自己的独特需求造出独一无二的框架轮子。

延伸阅读：
1. 《JavaScript 开发框架权威指南》
1. 《深入 React 技术栈》
2. 《Vue.js 权威指南》
3. 《Angular 权威教程》

3.5 掌握浏览器兼容、响应式布局相关解决方案(必修)

早期占据浏览器半壁江山的 IE 浏览器上存在的众多浏览器兼容问题，耗费了当时前端开发者的大量开发时间。纵然现在的前端开发者已经不需要考虑太多的浏览器兼容问题，对其概念的了解有利于了解前端历史包袱或在未来足以应对一些面向特殊群体(早期 IE 浏览器使用者)的前端项目。

响应式布局和单页面应用是当代前端开发者的必备技能。从 Web Pages 到 Web App 时代，我们开发的前端项目有越来越多的可能需要同时在电脑端和手机端进行访问，一个有良好响应式布局的前端项目可以一个代码运行在多种不同分辨率的平台之上。

延伸阅读：
1. 《深入浅出 Node.js》
2. 《Chrome 扩展及应用开发》

3.7 掌握单页面、移动 Web 、混合应用开发相关技术点(选修)

从门户站成群的 Web 1.0 到以用户为中心的平台/ 交站 Web 2.0，再到能进行个性化智能化推荐的 Web 3.0，每次 Web 时代的更迭背后都是 Web 技术发展上的一大飞跃。有了对 Web 1.0 到 3.0 发展史的宏观了解，对掌握单页面应用、移动 Web 开发和混合应用开发、离线 Web 等相关技术点将会有一个质的飞跃。

3.8 熟练前端包管理、构建工具、SEO、Web 性能优化(选修)

当我们使用到的前端库越来越多，需要一个前端包管理器来统一管理：Bower 便能做到这一点，通过给项目中引入 Bower 包管理器，我们仅仅需要修改配置文件就能进行高效化的前端库管理。熟练使用成型的包管理器，我们也可以很方便的解决前端依赖等问题。

前端构建工具可以减少我们很多的编程“机械运动”。通过使用成型的前端构建工具，简单的几行命令就能编译并转换 JavaScript 的不同版本、自动化压缩代码、自动化执行测试文件。

常见的 CSS 预处理有 SASS、LESS、Stylus 等，通过一门新的编程语言来动态化开发静态的 CSS 代码，并将 CSS 作为目标生成文件；可以让我们的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

由于 JavaScript 是一种弱类型（或称动态类型）语言，即 JS 程序在生成变量时不需要指定其数据类型，相应的解决办法就有使用例如 TypeScript 等强类型的、拓展于 JavaScript 的 JS 超集，最终将其编译、转化成合法的 JavaScript 代码。这样我们可以避免很多潜在的程序 BUG。

3.10 拥有浏览器插件、微信小程序、前端数据可视化编程能力(选修)

浏览器插件的开发/使用能力、微信小程序的开发能力以及和前端数据可视化的实战能力身为第三方平台的代表，在不同的学习方向下有不同的侧重点，我们不可能全部都掌握。

但作为选修，我们可以了解到大部分浏览器插件其实就是用前端语言实现的；微信小程序也可看做从在微信提供的前端框架下开发而来；前端数据可视化更多的使用一些主流可视化库实现，能够快速入手未来的新项目。

四、计算机络

4.1 熟知常用计算机络协议(必修)

用户在浏览器所能看到的前端界面其源码常常放在 Web 服务器上，当我们需要将项目部署到线上并向用户提供可访问的服务时，就需要我们对 Web 开发的核心枢纽 —— 计算机络——有所了解。其中包含计算机络的形成与发展、定义与分类、组成与结构。

TCP/IP 协议即传输控制协议/因特互联协议，是计算机络中使用最广泛的体系结构之一。TCP/IP 的四层结构从上到下分别为：应用层、传输层、络层、链接层。
应用层直接与用户打交道，负责传送各种最终形态的数据，常见的有 SMTP (简单邮件传输协议)、NNTP ( 络新闻传输协议)和 HTTP (超文本传输协议)。
传输层负责传送文本数据，主要协议是 TCP 协议 —— 一个面向连接的、保证可靠传输的数据流服务的协议。
络层负责分配地址和传送二进制数据，主要协议是 IP 协议，通过 IP 来找到络中的位移主机。
连接层负责建立电路连接，是整个络的物理基础，典型的协议包括以太、ASDL等。

这里再提一下 WebSocket，一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 允许服务端主动向客户端推送数据，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket 避免了 Ajax 无意义的轮询，在很多应用级 Web 项目中经常有所涉及。

延伸阅读：
1. 《图解 HTTP》
2. 《HTTP 权威指南》
3. 《图解 TCP/IP》
4. 《HTML5 WebSocket 权威指南》