应届毕业生在找工作的时候，经常会看到一个招聘要求：要求有实习经验。或者有实习经验者优先。为什么大部分公司在招聘的时候都要求你有实习经验？商业项目不同于个人项目。通过实习经历，可以熟悉公司成熟规范的开发流程。在大学里，当你写一个网站时，你很可能会写一个低复杂度的网站，几乎一个人做所有的工作。设计、开发、测试、上线等，一人包办。然而在实际工作中，商业产品的高度复杂性意味着一个人几乎不可能完成从立项、开发测试、上线的全过程。因此，对于应届毕业生来说，实习经历是一个无可比拟的加分项。由此也可以看出前端标准化工作流程的重要性。仅就前端而言，工作流程一般包括以下几个部分：产品对接。将产品提交给PRD（ProductRequirementsDocument），通过PRD了解自主开发的基本需求。设计对接。设计提交和设计稿。通过设计稿进行一对一的像素级还原。开发（前端主要工作流程）。主要是编码开发部分。后台对接。后台与API通信，与后台进行数据联调，为页面注入真实数据。测试对接。在线的。前端开发在所有的前端开发工作流程中，最耗时也是最重要的一个环节就是开发环节，也就是编码环节。开发前的设计和与各种人员的对接也是开发的准备工作。对于前端开发，也可以根据工作内容大致分为几个层次或者职责。了解前端开发工作的各个层级，对于作为前端人的自我定义和个人职业规划具有重要意义。前端运维基础设施：搭建前端服务的npm私有仓库，同时服务于后端服务的Gitlab私有仓库，搭建Docker镜像仓库，搭建CIPipeline工具等。这会决定你是否可以迭代，测试并轻松启动前端项目。如果这一步不完善，你很可能会经常在公司加班，甚至熬夜。前端基础设施建设，但不一定由前端开发人员完成。前端基础设施：组件库、脚手架、管理系统、异常系统（管理系统和异常系统也可以看作是专门的业务开发），以及一系列npm私有仓库。基本上技术占比较大的比重，所以受到很多程序员的青睐。前端引擎：自研渲染引擎和Javascript引擎，一般用于跨端。比如基于electron的桌面引擎开发，基于RN的移动引擎开发，还有一些公司自研浏览器的开发，比如很多手机自带的各个厂商的浏览器。一般需要了解C++层，占的比重很小。业务开发：在产品和设计上，在后端和运维上。约占所有前端工作的90%。与广义的业务开发相比，在开发中，除了真正的业务逻辑功能实现的开发外，还包括为保证项目质量的测试开发。而这种开发测试模式又可以分为两大类：BDD：BehaviorDrivenDevelopment，行为驱动开发，先开发再测试。TDD：TestDrivenDevelopment，测试驱动开发，先测试再开发。前端开发工作流程中的测试环节在前端开发中，乃至各类开发中的每一个小模块，都需要后续的测试环节来检测代码质量。举个简单的笑话，通俗易懂的看一下测试是干什么的。下面的每一个句子都可以看作是酒吧喝酒功能的一系列测试用例。一位边测工程师走进一家酒吧，要了一杯啤酒；一位测试工程师走进一家酒吧，要了一杯咖啡；一位边测工程师走进一家酒吧，要了0.7杯啤酒；边测工程师走进一家酒吧A酒吧，要了-1杯啤酒；一位测试工程师走进一家酒吧，要了232杯啤酒；一位测试工程师走进一家酒吧，要了一杯洗脚水；一位测试工程师走进一家酒吧，要了一杯XiScorpion啤酒；一位测试工程师走进一家酒吧，索要一份asdfas0fas8fasdf；一位测试工程师走进一家酒吧，什么也没问；在前端开发工作流程中，可以简单分为以下几个测试阶段。下面一一分析。单元测试组件测试端到端测试API接口测试API压力测试经过我们项目的测试，每一次业务迭代，每一次依赖版本升级都可以无风险无压力的进行。当业务迭代完成并经过测试后，可以确认新上线的代码不会影响之前的业务逻辑。项目依赖升级时，可以通过测试发现隐藏的BreakingChanges。单元测试在前端开发中，单元测试是必不可少的。在了解单元测试之前，我们先了解一个名词：断言。断言是判断一个结果真假的逻辑，目的是表明程序的实际计算结果与预期结果是否一致。在测试中，断言是最重要的概念。让我们举一个简单的例子来理解什么是断言。在JavaScript语言中，我们可以使用专业的断言库chai。下面是测试sum函数的断言。//assertsum(10,11)===21expect(sum(10,11)).to.equal(21)//assertsum(-10,11)===1expect(sum(-10,12)).to.equal(1)并且我们的测试是基于每一个断言来完成的，我们将收集测试相同功能的断言，并使用测试框架来维护所有用于测试的断言。单元测试是用于测试单个模块的最小可测量单元。有关解释，请参阅维基百科。在计算机程序设计中，单元测试（UnitTesting）也称模块测试，是对程序模块（软件设计的最小单元）正确性的测试。程序单元是应用程序的最小可测试组件。在过程式编程中，一个单元是单个程序、函数、进程等；对于面向对象编程来说，最小的单位是方法，包括基类（超类）、抽象类或派生类（子类）中的方法。我们可以使用mocha这样的测试框架来维护项目的所有单元测试。以下是来自mocha的官方测试套件，用于测试Array.prototype.indexOf()函数。//一系列测试用例来测试Arraydescribe('Array',function(){//一系列测试用例来测试Array.prototype.indexOfdescribe('#indexOf()',function(){//A某些测试用例it('当值不存在时应该返回-1',function(){assert.equal([1,2,3].indexOf(4),-1);});});});执行测试脚本，我们可以得到项目所有单元测试的测试结果，并给出测试用例的统计报告。$./node_modules/mocha/bin/mochaArray#indexOf()?shouldreturn-1whenthevalueisnotpresent1passing(9ms)end-to-endtest(endtoend)前端测试通过后-端组件，我们仍然不能保证整个页面都没有问题。此时可以点击确保页面跳转没有问题。但是，人工测试的效率太低了。这时可以采用自动化测试来简化测试，称为UI自动化测试，也称为端到端测试，其工作原理是模拟人工测试。对于一个商城项目，模拟用户登录、搜索、购买、下单的全过程。此时可以推荐playwright进行自动化测试，支持Chromium、Firefox等浏览器或浏览器底层。组件测试是基于组件化的前端系统开发，像搭积木一样搭建页面。如果要测试一个页面是否正常运行，可以查看构建该页面的积木块，即单个组件是否正常运行。以React为例，在React中，可以使用ReactTestingLibrary来测试ReactComponent。import{render,screen}from'@testing-library/react'importuserEventfrom'@testing-library/user-event'import'@testing-library/jest-dom'importFetchfrom'./fetch'test('加载并显示问候语',async()=>{//ARRANGErender(
