我们都知道，大学几乎是没有Web前端课的。以我所在的大学为例，唯一引导我们了解JavaScript的也只是‘人机界面’和‘Web应用开发’选修课。再者，由于这些选修课的课时短、面向的主要群体是大部分大学生等原因，其最终所涉及的内容层次也很难赶上近年来Web前端领域的快速变化。自学，看起来是广大前端学习者的普遍成长道路。本文尝试结合软件工程专业背景并贯穿软件工程思想，开启一个常常“不为人所知”的大前端技术栈之旅。
P.S:为了对这场Chat有一个背景了解，这里小提一句：笔者现为准大三学生，前俩年的Web开发学习经历辅之以参与/组织线上线下开发者社区的技术分享活动，对整个Web开发有了一定程度上的宏观认知。希望本文能通过一定程度的抛砖引玉填补不足~。
目录技术基本功
前端设计能力
前端开发能力
计算机网络知识储量
服务端应用开发能力
数据库与搜索引擎开发能力
编程软技能
一、技术基本功标准搜索引擎搜到的，只是4%的互联网数据。引以为例，希望当我们谈到“大前端”时，前端初学者不再总被“HTML、CSS、JavaScript基础”俘困于学习Web开发的瓶颈之中，反之可以通过掌握以下技术基本功来拓展自己的编程视野、提高自己的编程能力，为成为合格的大前端工程师做出扎实的铺垫。所有章节通过“必修”、“选修”来简单标识其重要性。
1.1打字速度至少达到40WPM+(必修)我曾用整整一篇博客(
强化你的打字速度)来说明训练出一个打字坐姿良好、打字速度标准的习惯其重要性。打字速度可以用WPM-WordPerMinute-每分钟敲出的单词个数(5个字符被视为一个单词)来进行衡量。初级、中级和高级的打字水平评判准分别是20WPM、40WPM和60WPM。刚刚在注意打字手势与打字坐姿的条件下，评测出我的最新打字速度是51WPM，不算太高，但还可以。在这里我们以打字速度达到40WPM为一个奇点，合格的程序开发者都应该能达到这一水准的。
延伸阅读：
常用的键盘布局为QWERT布局，可以选用更高效的DVORAK布局。
1.2熟练掌握至少一种主流代码编辑器或IDE(必修)“工欲善其事，必先利其器。”对于主流代码开发工具的掌握将会是我们高效开发的一个加分项。就代码编辑器和IDE的区别来说：
前者专注源代码的开发，常常会根据具体编程语言有语法高亮、代码折叠等功能，支持大多数编程语言的开发。通过一定的定制化，我们可以给简易的编辑器加入风格迥异的插件，组成一整套得心应手的开发流程。一个典型的例子如跨平台的Sublime编辑器，其支持Python语言编写的插件，可通过包管理器扩充本身功能，大多数的包使用自由软件授权发布，并由社区建置维护。
后者的中文全称是“集成开发环境”，通俗来讲可以当做一种编辑器的全家桶，主要针对特定的编程语言而量身打造。IDE在内部除了可以直接写源代码文本，还常常默认拥有打包并编译为可用程序的功能，有些IDE还可以设计图形界面。IDE通常包括代码编辑器、自动构建工具、调试器和版本控制系统。一个典型的例子如WebStorm，其支持图片预览，拥有内置命令行和版本控制系统，对于错误的前端JavaScript代码还有相应的智能提醒和改正能力。WebStorm良好的集成了编辑、文件、管理、编译、调试、运行等功能，大大的提高了开发者生产力。
身为大前端工程师，根据开发需要选择自己偏爱的编辑器或IDE并刻意练习其使用方法，在开发代码时能达到工具熟练度与思维速度相匹配的境地，也就足够胜任这项技术基本功。
延伸阅读：
Web开发推荐掌握的代码编辑器或IDE有：VIM、Sublime、WebStorm、IDEA、VSCode以及一些在线IDE等。
1.3拥有良好的代码规范、代码质量、代码注释能力(必修)程序开发的真实情况是，代码是给人看的，偶尔在机器上跑一跑。如何制定一个可执行的代码规范并使项目最终拥有较高代码质量，对于占据软件开发成本比例很高的软件维护工作起到了一个决定性的作用。代码规范、代码质量、代码注释能力三者相辅相成。
代码规范是一种持续的行为，良好的代码规范可以依靠代码规范文档或成熟的规范工具进行统一——前者不应复杂，但应具有一些强制性；后者例如在前端开发的环境下，可以使用ESLint来进行可定制化的代码风格检查，或使用持续集成(CI)理念并通过相匹配的CI服务器进行软件交付，以确保高水平的代码质量。下图是CI的实际应用过程示例。
在上述动图中，当我们在搭建好的持续集成(CI)环境下使用gitpush提交代码后，CI服务器将根据相关配置自动化执行代码规范和代码质量检查过程(这里是自动运行的是测试代码)，并输出相应的检查结果。
其次，统一编码规范、统一语言版本、统一编辑器配置（tab和空格之类）、统一文件编码，统一数据库等等行为，都是提高代码质量、尽力避免因为环境不同而导致Bug众多的种种步骤。
通俗易懂的代码注释其意义在程序员界想必“路人皆知”，前端可以使用JSDoc来规范注释代码。除了简单的注释之外，JSDoc还能做很多其他的事情，在JSDoc中文文档中，这么介绍到。
JSDoc是一个根据JavaScript文件中注释信息，生成JavaScript应用程序或库、模块API文档的工具。你可以使用他记录如：命名空间，类，方法，方法参数等。类似JavaDoc和PHPDoc。现在很多编辑器或IDE中还可以通过JSDoc直接或使用插件生成智能提示。从而使开发者很容易了解整个类和其中的属性和方法，并且快速知道如何使用，从而提高开发效率，降低维护成本。
一个真实的JSDoc示例如下，不难看出有良好注释的代码通俗易懂。
/***Book类，代表一个书本.*
constructor*param{string}title-书本的标题.*param{string}author-书本的作者.*/functionBook(title,author){this.title=title;this.author=author;}1.4理解主流编程范式及其思想(必修)在编程范式上，我们需要理解编程语言的两个分类——命令式编程和声明式编程——的设计思想。其中，非命令式的编程都可归为声明式编程，命令式、函数式和逻辑式是最核心的三种范式。可以用下图来表示。
命令式编程和声明式编程起源的不同决定了这两大类范式代表着迥然不同的编程理念和风格：命令式编程是行动导向（Action-Oriented）的，因而算法是显性而目标是隐性的；声明式编程是目标驱动（Goal-Driven）的，因而目标是显性而算法是隐性的。以阶乘函数来示例，命令式、函数式和逻辑式的不同表现如下。
C++(命令式)
intfactorial(intn){intf=1;for(;n0;--n)f*=n;returnf;}
Lisp(函数式)
(defunfactorial(n)(if(=n0)1//若n等于0，则n!等于1(*n(factorial(-n1)))))//否则n!等于n*(n-1)
Prolog(逻辑式)
//0!等于1factorial(0,1).//若M等于N-1且M!等于Fm且F等于N*Fm，则N!等于Ffactorial(N,F):-MisN-1,factorial(M,Fm),FisN*Fm.
纵然声明式编程有诸多便捷之处，但其在着重交互和业务逻辑的前端开发下就不那么得心应手。声明式编程更擅长于数理逻辑的应用。因此我们能从编程范式角度理解前端开发将会大大提高我们的编程水平。
延伸阅读：
《JavaScript函数式编程》
1.5拥有撰写良好软件工程文档的能力(必修)一般符合软件工程要求的软件项目要求我们拥有概要设计说明书、需求规格说明书和测试设计说明书。其中。
概要设计说明书包括程序系统的基本处理流程、程序系统的组织结构、模块划分、功能分配、接口设计、运行设计、安全设计、数据结构设计和出错处理设计等，为程序的详细设计提供基础。
软件需求说明是软件系统需求的规格化说明，是对将要开发系统的行为的说明。它包括功能性需求及非功能性需求，非功能性需求对设计和实现提出了限制，比如性能要求，质量标准，或者设计限制。
测试说明书包括测试目标、测试范围、性能要求、测试资源、测试环境、测试策略。
延伸阅读：
《软件工程》
1.6熟知常见的数据结构、算法思想、设计模式(必修)数据结构的良好选择可以提高算法效率。从数据结构角度来说，需要我们熟知数组、堆栈、队列、链表、树、图、堆和散列表的相关知识点，并能够根据具体问题通过高级编程语言具体实现；从算法角度来说，还需要我们熟知时间复杂度、空间复杂度、深度优先、广度优先、图论和动态规划等算法思想。前端开发因为JavaScript语言封装了很多操作数据的具体过程且更编程目标是开发应用逻辑，在算法层面要求并不是很高，但熟知算法思想可以提升每个前端开发者的计算机科学素养。在看重基础的开发者面试中也能提高自己的竞争力。
算法用来解决计算上的问题，设计模式用来解决“设计层次”的问题。在软件工程中，设计模式是对软件设计中普遍存在（反复出现）的各种问题，所提出的解决方案。JavaScript就有很多的设计模式值得学习并掌握，如下所例，这里就不一一介绍。通过使用设计模式，可以使我们的代码更加的可复用，可扩展以及可测试。
单例模式、简单工厂模式、观察者模式、适配器模式、代理模式、桥接模式、外观模式、访问者模式、策略模式、模板方法模式、中介者模式、迭代器模式、组合模式、备忘录模式、职责链模式、享元模式、状态模式。——参考《常用的Javascript设计模式》
延伸阅读：
《数据结构与算法JavaScript描述》
《算法导论(原书第3版)》
《HeadFirst设计模式》
《JavaScript设计模式》
《设计模式可复用面向对象软件的基础》
1.7熟练使用三大操作系统之一及其开发者环境(必修)软件的开发活动离不开Windows、Linux和Mac三大操作系统所各自形成的生态链。我们至少需要能够在其中一个操作系统下进行高效开发，并了解该环境下的应用软件使用技巧和常用配置管理。
如在Windows下，我们需要知道环境变量该在哪里修改；在Linux下，我们需要知道apt-get、yum等包管理器的使用方式；在MacOS下，我们需要知道Mac常用的开发工具等等。无论哪种，都应该多理解Linux操作系统及其使用方式。前端使用的Bower管理器、Node环境以及自动化测试、版本控制等都离不开Linux命令行的设计思想。
深入操作系统的内核，我们可以了解计算机如何进行进程管理、内存管理、文件管理以及网络管理，从而在开发中遇到电脑卡顿、网络不通畅等情景时能及时找到问题所在，对症下药。
延伸阅读：
《鸟哥的Linux私房菜:基础学习篇(第3版)》
《现代操作系统(原书第3版)》
《操作系统:精髓与设计原理(原书第6版)》
《深入理解计算机系统(原书第3版)》
1.8拥有良好的代码审查、代码重构能力(选修)适当的和团队成员举办一场CodeReview(代码审查)，有助于保证软件质量、促进团队成长和避免团队成员因缺席而导致软件进度的“单点故障”。尤其在团队没有测试开发人员的情况下，我们很难达到令人满意的测试覆盖率。来一场“说走就走”的代码审查将对软件质量做出巨大贡献。
引用《代码审查与重构的5个层次》的观点，我们可以通过如下五个层次完成代码审查与重构：
第一个层次：“业务架构”的代码审查与代码重构。
第二个层次：“代码架构”的代码审查与代码重构。
第三个层次：“设计模式”的代码审查与代码重构。
第四个层次：“最优算法”的代码审查与代码重构。
第五个层次：“语言与代码规范”的代码审查与代码重构。
1.9拥有良好的版本控制、项目管理意识(选修)著名代码托管平台Github中点赞量较高的常常是前端项目，JavaScript编程语言也在Github中随处可见。身为前端工程师，我们需要拥有良好的版本控制意识，使项目代码、配置文件的改动历史随时可被人工追踪、被自动化追踪，以便进行Bug追溯、代码审查、自动化测试。Github正如其名，采用的是分布式版本控制系统——Git。
软件工程诞生的重要因素就是为了解决日益复杂的软件开发活动而产生的“软件危机”，拥有良好的项目管理意识可以方便我们对日趋庞大的软件项目进行效率化管理，以应对未来需求的变更。Trello、Teambition都是不错的选择，我们可以通过任务版的用户故事将附件、文档、工作进度有机的组合起来，让用户和开发者团队合作更加密切。
1.10掌握软件测试相关能力(选修)白盒测试、黑盒测试、单元测试、集成测试、测试驱动开发
在“拥有良好的代码规范、代码质量、代码注释能力”一节的动图中我们看到了编写测试代码并自动化执行测试的一个应用场景。软件测试一般分为白箱测试和黑箱测试。通俗来讲，黑箱测试测试应用程序的功能，而不是其内部结构或运作，适合集成测试以及系统测试等；白箱测试测试应用程序的内部结构或运作，而不是应用程序的功能，可应用于单元测试、集成测试中。单元测试的目的是检验基本组成单位（函数）的正确性。
functioncheckLoginPhone(phone){if(phone==="")returnfalse;if(phone.length!==11)returnfalse;if(phone.match(/[^\d]/g))returnfalse;returntrue;}
以前端开发中常接触到的单元测试框架Jasmine为例，为开发上述代码中验证手机号格式的函数checkLoginPhone(phone)，我们可以先编写相应的单元测试代码，每个describe用来测试一个函数，其中的多个it分别测试该函数在不同条件下的不同结果是否为期待的结果。如下。
describe("验证手机号格式",function(){it("手机号不能为空",function(){varphone="";varoutput=checkLoginPhone(phone);varresult=false;expect(output).toEqual(result);});it("手机号不能为非数字",function(){varphone="";varoutput=checkLoginPhone(phone);varresult=false;expect(output).toEqual(result);}););
软件测试常由专业测试工程师完成，但我们在开发中小型软件时完全可以自己胜任这份工作。愈发偏向业务逻辑的前端对测试的需求愈发凸显。这同时需要我们了解测试驱动开发、敏捷开发、极限编程的知识点。
1.11熟练绘制概念图、思维导图、流程图、网络拓扑图等(选修)我的另一篇博客《概念图图解WebCookie》中曾介绍过概念图与思维导图这两大概念绘制工具。概念图的广泛应用发扬了其发明者约瑟夫·D·诺瓦克(Novak)的那句总结——“有意义的学习涉及到新概念和命题纳入现有的认知结构的同化”。以我在学习过程中绘制的“HTTP”概念图为例，如下所示。
前端工程师常在视觉上有更高的敏锐度，也需要绘制较多的图来辅助开发，在写博客、写文档时熟练掌握概念图、思维导图、流程图、网络拓扑图、UML图等的绘制将是表达思想的一大利器。
1.12掌握持续集成、持续交付、持续部署相关编程能力(选修)在“拥有良好的代码规范、代码质量、代码注释能力”一节我们介绍过通过持续集成可以保证良好的代码规范程度。持续交付可以看作持续集成的下一步，指的是频繁地将软件的新版本，交付给质量团队或者用户，以供评审；持续部署是持续交付的下一步，指的是代码通过评审以后，自动部署到生产环境。如下图所示，最终通过DevOps将软件工程、技术运营和质量保障（QA）三者做交集，使整个软件项目在开发过程中的变更范围更少，发布协调更强，自动化过程更稳健。
同时相比服务端开发，前端开发因需求的变更其改动量更大，因此在前端开发的过程中使用“精益思想”完成对持续集成、持续交付、持续部署的实战工作意义非凡。
二、前端设计能力前端分为前端设计和前端开发。前者曾在WebPages时代占据了前端的主流，那时JavaScript默认被浏览器禁用，网页间多依靠超链接形式相互链接。那时的前端工程师常常要求拥有一定的制图、切图能力。纵然现在JavaScript在Web领域已从前端拓展到后端Node.js，一个合格的大前端工程师还是应该多多注重拓展前端设计方面的知识点，以备不时之需。
2.1掌握一定的用户界面设计、人机交互知识(必修)无论是懂前端的设计还是懂设计的前端在任何互联网公司都是很受欢迎的。良好的用户界面及其交互氛围能让用户产生舒适的体验，在一些功能性较弱的软件项目中，当因用户界面及其氛围不足导致用户体验的下降常会对软件产生致命一击的效果。交互设计要求我们能够进行用户调研、概念设计以及创建用户模型、界面流程并能开发项目原型。
拓展阅读：
《简约至上》
《用户体验的要素》
《人人都是产品经理》
2.2熟练至少一个主流平面设计工具(选修)拥有了足够的用户界面设计与人际交互知识，我们可以选择一个主流平面设计工具来强化我们的设计能力。常见的平面设计软件有PS、CDR、AI、InDesign等。
前端开发中的一些绘图技术也常与平面设计工具设计出的图片有共性。举例来说：HTML5中的Canvas是像素级别的，可以对应PS处理出的图片；SVG又是矢量级的，无论如何放大也不会看到像素块，可以对应AI处理出的图片。熟练一个主流平面设计工具将是前端开发者和设计工程师之间重要的沟通桥梁。
2.3熟练至少一个主流原型设计工具(选修)主流原型设计工具常常可以分别制作Web端、PC端和APP端的原型，也有很多原型设计工具专为一个平台打造。原型设计工具往往不像平面设计工具一样面面俱到，但能清晰的展现出各页面内的主体组件和各页面间的逻辑关系。
我们在开发中小型前端项目时往往不需要专业的原型设计师(常被产品经理一职所包揽)，熟练使用至少一个主流原型设计工具能使我们在正式编写前端代码前快速开发出一个直观的原型参考系。
下图展现了我在最近一次编程竞赛-中国软件杯中快速开发出的原型预览。我们团队只有3个人，其他两人分别负责PHP鍖椾含鐪嬬櫧鐧滈鍝渶濂?鍖椾含涓ラ噸鐧界櫆椋庢�庝箞鍔?
