|
我们都知道，大学几乎是没有 Web 前端课的。以我所在的大学为例，唯一引导我们了解 JavaScript 的也只是‘人机界面’和‘Web应用开发’选修课。再者，由于这些选修课的课时短、面向的主要群体是大部分大学生等原因，其最终所涉及的内容层次也很难赶上近年来 Web 前端领域的快速变化。自学，看起来是广大前端学习者的普遍成长道路。本文尝试结合软件工程专业背景并贯穿软件工程思想，开启一个常常“不为人所知”的大前端技术栈之旅。
目录
一、技术基本功标准搜索引擎搜到的，只是 4% 的互联网数据。引以为例，希望当我们谈到“大前端”时，前端初学者不再总被“HTML、CSS、JavaScript 基础”俘困于学习 Web 开发的瓶颈之中，反之可以通过掌握以下技术基本功来拓展自己的编程视野、提高自己的编程能力，为成为合格的大前端工程师做出扎实的铺垫。所有章节通过“必修”、“选修”来简单标识其重要性。 1. 打字速度至少达到 40WPM+（必修）我曾用整整一篇博客 (@强化你的打字速度) 来说明训练出一个打字坐姿良好、打字速度标准的习惯其重要性。打字速度可以用 WPM - Word Per Minute - 每分钟敲出的单词个数(5 个字符被视为一个单词)来进行衡量。初级、中级和高级的打字水平评判准分别是 20 WPM、40 WPM和 60 WPM。刚刚在注意打字手势与打字坐姿的条件下，评测出我的最新打字速度是 51 WPM，不算太高，但还可以。 在这里我们以打字速度达到 40 WPM 为一个奇点，合格的程序开发者都应该能达到这一水准的。
2. 熟练掌握至少一种主流代码编辑器或 IDE（必修）“工欲善其事，必先利其器。”对于主流代码开发工具的掌握将会是我们高效开发的一个加分项。就代码编辑器和 IDE 的区别来说： 前者专注源代码的开发，常常会根据具体编程语言有语法高亮、代码折叠等功能，支持大多数编程语言的开发。通过一定的定制化，我们可以给简易的编辑器加入风格迥异的插件，组成一整套得心应手的开发流程。一个典型的例子如跨平台的 Sublime 编辑器，其支持 Python 语言编写的插件，可通过包管理器扩充本身功能，大多数的包使用自由软件授权发布，并由社区建置维护。 后者的中文全称是“集成开发环境”，通俗来讲可以当做一种编辑器的全家桶，主要针对特定的编程语言而量身打造。IDE 在内部除了可以直接写源代码文本，还常常默认拥有打包并编译为可用程序的功能，有些 IDE 还可以设计图形界面。IDE 通常包括代码编辑器、自动构建工具、调试器和版本控制系统。一个典型的例子如 WebStorm，其支持图片预览，拥有内置命令行和版本控制系统，对于错误的前端 JavaScript 代码还有相应的智能提醒和改正能力。WebStorm 良好的集成了编辑、文件、管理、编译、调试、运行等功能，大大的提高了开发者生产力。 身为大前端工程师，根据开发需要选择自己偏爱的编辑器或 IDE 并刻意练习其使用方法，在开发代码时能达到工具熟练度与思维速度相匹配的境地，也就足够胜任这项技术基本功。
3. 拥有良好的代码规范、代码质量、代码注释能力（必修）程序开发的真实情况是，代码是给人看的，偶尔在机器上跑一跑。如何制定一个可执行的代码规范并使项目最终拥有较高代码质量，对于占据软件开发成本比例很高的软件维护工作起到了一个决定性的作用。代码规范、代码质量、代码注释能力三者相辅相成。 代码规范是一种持续的行为 ，良好的代码规范可以依靠代码规范文档或成熟的规范工具进行统一——前者不应复杂，但应具有一些强制性；后者例如在前端开发的环境下，可以使用 ESLint 来进行可定制化的代码风格检查，或使用持续集成(CI)理念并通过相匹配的 CI 服务器进行软件交付，以确保高水平的代码质量。下图是 CI 的实际应用过程示例。 在上述动图中，当我们在搭建好的持续集成(CI)环境下使用 git push 提交代码后，CI 服务器将根据相关配置自动化执行代码规范和代码质量检查过程(这里是自动运行的是测试代码)，并输出相应的检查结果。 其次，统一编码规范、统一语言版本、统一编辑器配置（tab和空格之类）、统一文件编码，统一数据库等等行为，都是提高代码质量、尽力避免因为环境不同而导致 Bug 众多的种种步骤。 通俗易懂的代码注释其意义在程序员界想必“路人皆知”，前端可以使用JSDoc 来规范注释代码。除了简单的注释之外，JSDoc 还能做很多其他的事情，在 JSDoc 中文文档中，这么介绍到。
一个真实的 JSDoc 示例如下，不难看出有良好注释的代码通俗易懂。 /** * Book类，代表一个书本. * @constructor * @param {string} title - 书本的标题. * @param {string} author - 书本的作者. */function Book(title, author) { this.title=title; this.author=author;}4. 理解主流编程范式及其思想（必修）在编程范式上，我们需要理解编程语言的两个分类——命令式编程和声明式编程——的设计思想。其中，非命令式的编程都可归为声明式编程，命令式、函数式和逻辑式是最核心的三种范式。可以用下图来表示。 命令式编程和声明式编程起源的不同决定了这两大类范式代表着迥然不同的编程理念和风格：命令式编程是行动导向（ Action-Oriented ）的，因而算法是显性而目标是隐性的；声明式编程是目标驱动（ Goal-Driven ）的，因而目标是显性而算法是隐性的。以阶乘函数来示例，命令式、函数式和逻辑式的不同表现如下。 C++（命令式） int factorial(int n) { int f = 1; for (; n > 0; --n) f *= n; return f;}Lisp（函数式） (defun factorial(n) (if (= n 0) 1 // 若n等于0，则n!等于1 (* n (factorial(- n 1))))) // 否则n!等于n* (n-1)Prolog（逻辑式） // 0! 等于1factorial(0,1).// 若M等于N-1且 M!等于Fm且F等于N*Fm，则N! 等于Ffactorial(N,F) :- M is N-1, factorial(M,Fm), F is N * Fm.纵然声明式编程有诸多便捷之处，但其在着重交互和业务逻辑的前端开发下就不那么得心应手。声明式编程更擅长于数理逻辑的应用。因此我们能从编程范式角度理解前端开发将会大大提高我们的编程水平。
5. 拥有撰写良好软件工程文档的能力（必修）一般符合软件工程要求的软件项目要求我们拥有概要设计说明书、需求规格说明书和测试设计说明书。其中。
6. 熟知常见的数据结构、算法思想、设计模式（必修）数据结构的良好选择可以提高算法效率。从数据结构角度来说，需要我们熟知数组、堆栈、队列、链表、树、图、堆和散列表的相关知识点，并能够根据具体问题通过高级编程语言具体实现；从算法角度来说，还需要我们熟知时间复杂度、空间复杂度、深度优先、广度优先、图论和动态规划等算法思想。前端开发因为 JavaScript 语言封装了很多操作数据的具体过程且更编程目标是开发应用逻辑，在算法层面要求并不是很高，但熟知算法思想可以提升每个前端开发者的计算机科学素养。在看重基础的开发者面试中也能提高自己的竞争力。 算法用来解决计算上的问题，设计模式用来解决“设计层次”的问题。在软件工程中，设计模式是对软件设计中普遍存在（反复出现）的各种问题，所提出的解决方案。JavaScript 就有很多的设计模式值得学习并掌握，如下所例，这里就不一一介绍。通过使用设计模式，可以使我们的代码更加的可复用，可扩展以及可测试。 单例模式、简单工厂模式、观察者模式、适配器模式、代理模式、桥接模式、外观模式、访问者模式、策略模式、模板方法模式、中介者模式、迭代器模式、组合模式、备忘录模式、职责链模式、享元模式、状态模式。——参考《常用的Javascript设计模式》
7. 熟练使用三大操作系统之一及其开发者环境（必修）软件的开发活动离不开 Windows、Linux 和 Mac 三大操作系统所各自形成的生态链。我们至少需要能够在其中一个操作系统下进行高效开发，并了解该环境下的应用软件使用技巧和常用配置管理。 如在 Windows 下，我们需要知道环境变量该在哪里修改；在 Linux 下，我们需要知道 apt-get、yum 等包管理器的使用方式；在 MacOS 下，我们需要知道 Mac 常用的开发工具等等。无论哪种，都应该多理解 Linux 操作系统及其使用方式。前端使用的 Bower 管理器、Node 环境以及自动化测试、版本控制等都离不开 Linux 命令行的设计思想。 深入操作系统的内核，我们可以了解计算机如何进行进程管理、内存管理、文件管理以及网络管理，从而在开发中遇到电脑卡顿、网络不通畅等情景时能及时找到问题所在，对症下药。
8. 拥有良好的代码审查、代码重构能力（选修）适当的和团队成员举办一场 Code Review(代码审查)，有助于保证软件质量、促进团队成长和避免团队成员因缺席而导致软件进度的“单点故障”。尤其在团队没有测试开发人员的情况下，我们很难达到令人满意的测试覆盖率。来一场“说走就走”的代码审查将对软件质量做出巨大贡献。 引用 《代码审查与重构的5个层次》 的观点，我们可以通过如下五个层次完成代码审查与重构：
9. 拥有良好的版本控制、项目管理意识（选修）著名代码托管平台 Github 中点赞量较高的常常是前端项目，JavaScript 编程语言也在 Github 中随处可见。身为前端工程师，我们需要拥有良好的版本控制意识，使项目代码、配置文件的改动历史随时可被人工追踪、被自动化追踪，以便进行 Bug 追溯、代码审查、自动化测试。Github 正如其名，采用的是分布式版本控制系统——Git。 软件工程诞生的重要因素就是为了解决日益复杂的软件开发活动而产生的“软件危机”，拥有良好的项目管理意识可以方便我们对日趋庞大的软件项目进行效率化管理，以应对未来需求的变更。Trello、Teambition 都是不错的选择，我们可以通过任务版的用户故事将附件、文档、工作进度有机的组合起来，让用户和开发者团队合作更加密切。 10. 掌握软件测试相关能力（选修）
在“拥有良好的代码规范、代码质量、代码注释能力”一节的动图中我们看到了编写测试代码并自动化执行测试的一个应用场景。软件测试一般分为白箱测试和黑箱测试。通俗来讲，黑箱测试测试应用程序的功能，而不是其内部结构或运作，适合集成测试以及系统测试等；白箱测试测试应用程序的内部结构或运作，而不是应用程序的功能，可应用于单元测试、集成测试中。单元测试的目的是检验基本组成单位（函数）的正确性。 function checkLoginPhone (phone) { if (phone === '') return false; if (phone.length !== 11) return false; if (phone.match(/[^\d]/g)) return false; return true;}以前端开发中常接触到的单元测试框架 Jasmine 为例，为开发上述代码中验证手机号格式的函数 checkLoginPhone(phone)，我们可以先编写相应的单元测试代码，每个 describe 用来测试一个函数，其中的多个 it 分别测试该函数在不同条件下的不同结果是否为期待的结果。如下。 describe('验证手机号格式', function () { it('手机号不能为空', function () { var phone = ''; var output = checkLoginPhone(phone); var result = false; expect(output).toEqual(result); }); it('手机号不能为非数字', function () { var phone = ''; var output = checkLoginPhone(phone); var result = false; expect(output).toEqual(result); }););软件测试常由专业测试工程师完成，但我们在开发中小型软件时完全可以自己胜任这份工作。愈发偏向业务逻辑的前端对测试的需求愈发凸显。这同时需要我们了解测试驱动开发、敏捷开发、极限编程的知识点。 11. 熟练绘制概念图、思维导图、流程图、网络拓扑图等（选修）我的另一篇博客 《概念图图解 Web Cookie》 中曾介绍过概念图与思维导图这两大概念绘制工具。概念图的广泛应用发扬了其发明者约瑟夫·D·诺瓦克(Novak)的那句总结——“有意义的学习涉及到新概念和命题纳入现有的认知结构的同化”。以我在学习过程中绘制的“HTTP”概念图为例，如下所示。 前端工程师常在视觉上有更高的敏锐度，也需要绘制较多的图来辅助开发，在写博客、写文档时熟练掌握概念图、思维导图、流程图、网络拓扑图、UML 图等的绘制将是表达思想的一大利器。 12. 掌握持续集成、持续交付、持续部署相关编程能力（选修）在“拥有良好的代码规范、代码质量、代码注释能力”一节我们介绍过通过持续集成可以保证良好的代码规范程度。持续交付可以看作持续集成的下一步，指的是频繁地将软件的新版本，交付给质量团队或者用户，以供评审；持续部署是持续交付的下一步，指的是代码通过评审以后，自动部署到生产环境。如下图所示，最终通过 DevOps 将软件工程、技术运营和质量保障（QA）三者做交集，使整个软件项目在开发过程中的变更范围更少，发布协调更强，自动化过程更稳健。 同时相比服务端开发，前端开发因需求的变更其改动量更大，因此在前端开发的过程中使用“精益思想”完成对持续集成、持续交付、持续部署的实战工作意义非凡。 二、前端设计能力前端分为前端设计和前端开发。前者曾在 Web Pages 时代占据了前端的主流，那时 JavaScript 默认被浏览器禁用，网页间多依靠超链接形式相互链接。那时的前端工程师常常要求拥有一定的制图、切图能力。纵然现在 JavaScript 在 Web 领域已从前端拓展到后端 Node.js，一个合格的大前端工程师还是应该多多注重拓展前端设计方面的知识点，以备不时之需。 1. 掌握一定的用户界面设计、人机交互知识（必修）无论是懂前端的设计还是懂设计的前端在任何互联网公司都是很受欢迎的。良好的用户界面及其交互氛围能让用户产生舒适的体验，在一些功能性较弱的软件项目中，当因用户界面及其氛围不足导致用户体验的下降常会对软件产生致命一击的效果。交互设计要求我们能够进行用户调研、概念设计以及创建用户模型、界面流程并能开发项目原型。
2. 熟练至少一个主流平面设计工具（选修）拥有了足够的用户界面设计与人际交互知识，我们可以选择一个主流平面设计工具来强化我们的设计能力。常见的平面设计软件有 PS、CDR、AI、InDesign 等。 前端开发中的一些绘图技术也常与平面设计工具设计出的图片有共性。举例来说：HTML 5 中的 Canvas 是像素级别的，可以对应 PS 处理出的图片； SVG 又是矢量级的，无论如何放大也不会看到像素块，可以对应 AI 处理出的图片。熟练一个主流平面设计工具将是前端开发者和设计工程师之间重要的沟通桥梁。 3. 熟练至少一个主流原型设计工具（选修）主流原型设计工具常常可以分别制作 Web 端、PC 端和 APP 端的原型，也有很多原型设计工具专为一个平台打造。原型设计工具往往不像平面设计工具一样面面俱到，但能清晰的展现出各页面内的主体组件和各页面间的逻辑关系。 我们在开发中小型前端项目时往往不需要专业的原型设计师(常被产品经理一职所包揽)，熟练使用至少一个主流原型设计工具能使我们在正式编写前端代码前快速开发出一个直观的原型参考系。 下图展现了我在最近一次编程竞赛 - 中国软件杯中快速开发出的原型预览。我们团队只有 3 个人，其他两人分别负责 PHP 微信端和 Java 搜索引擎的应用开发，快速迭代出一个产品原型很有助于前端人员拆分重复组件并快速开发，和服务端人员确定自己需要开发的接口。
三、前端开发能力1. 熟练使用 HTML、CSS 和 JavaScript 三大前端语言（必修）HTML 是标签语言，可以构建前端页面的骨架；CSS 是层叠样式控制表，可以构建前端页面的外貌；JavaScript 是前端编程语言，可以规范前端页面的事件行为。掌握 HTML、CSS、JavaScript 是前端开发三大基石，缺一不可。 偏向 HTML 和 CSS 的开发，我们可以走出一条会设计的前端工程师的道路；偏向 CSS 和 JavaScript 的开发，我们可以走出一条会服务端编程的前端工程师的道路。当然，CSS 之所以也可以算作偏向服务端编程的道路之一，在于我们可以使用 SASS、LESS 等 CSS 预处理语言进行 CSS 的动态化开发。
2. 理解前端语言新标准 HTML5、CSS3、ES6 及其特性（必修）熟练使用 HTML、CSS、JavaScript 还需要我们理解其语言最新相关标准：HTML5、CSS3 和 ES6(ECMAScript6)。
在 ES5 标准中，我们需要第三方符合 AMD 标准的库如 RequireJS、CommonJS 来支持 JS 模块的导入，常见的可以用以下代码来实现： var service = require('module.js')console.log(service.port) // 3000在 ES6 标准中，我们可直接使用原生的 import、export 语句来实现模块化编程，如下所示。这样大大方便了使用 Node.js 等技术的前端项目的开发。 export var port = 3000export function getAccounts(url) { ...}
3. 熟练组件化开发、异步编程、虚拟 DOM相关编程能力（必修）借鉴其他编程领域如 Java GUI 的编程思想，前端组件化开发大大提高了开发效率并降低了维护成本。通过组件化开发，我们可以对前端页面中重复的模块进行“模块化编程”，给每个模块赋予一个“类”的概念。最终根据具体页面组装其对应的前端 UI 组件。每个组件间可以通过数据流来交换数据，这也大大方便了单页面应用的开发，相得益彰。下图左侧是一个前端页面的原型图，与之相对的有右侧的组件代码。
Ajax (异步的 JavaScript 与XML技术) 的出现让用户不用再经历“提交表单等待服务器的漫长响应并通过刷新页面来告诉自己哪里输入错误”的烦躁经历，这样做也节约了许多宽带。为了更好的掌握异步编程，我们需要掌握 JavaScript 的“同步模式”和“异步模式”，并学会使用相应的回调函数来发布、订阅、处理事件。 抛开单页面应用，Web 页面的性能鲜由 JavaScript 引起，常常是因过多的 DOM 操作引起。虚拟 DOM 随着前端主流框架的更迭孕育而生。通过直接操作虚拟 DOM，间接操作真实 DOM，可以优化很多性能。对虚拟 DOM 的深入了解是见证一步步加入抽象层的前端开发的关键。
4. 掌握至少一门主流前端框架及其生态链、框架设计能力（必修）前端框架层出不穷，前端开发领域俨然成了热衷于造轮子的一带。我们可以通过如下几步来掌握至少一门主流前端框架及其生态链。
React、Vue 适合单页面应用，拥有很多先进的前端开发思想；BootStrap、Ant Design 偏向 UI 开发，更多的提供 CSS 相关类库。JQuery 经久不衰，极大的方便我们操作真实 DOM 及其 CSS 属性；D3.js、EChart 等框架使我们可以快速进行前端数据可视化的编程；RequireJS 在不支持 ES6 标准的 JS 开发环境下给我们提供了一个良好的模块化编程条件。数不胜数的前端框架都有各自的应用场景，我们的前端项目可以选择其中一至多个框架进行快速开发。 同时，合格的前端工程师不能只会用成型的框架，还应该拥有一定自制框架的能力。我们可以先通过阅读成型前端框架的源码来学习框架设计的思想，有朝一日我们便会根据自己的独特需求造出独一无二的框架轮子。 |
|
|
