本文是关于前端开发基本流程的分享

前言：作者任职某互联网公司web前端工程师一职，博客用于记录职业生涯，进阶的每一步，如有技术上的不严谨，欢迎请大家指出，虚心改正。

正文：

每一个项目从无到有，从拿到需求到最终的发布上线，对于前端工作人员来说需要经过怎么样一个流程？只是编写代码而已吗？真正的工作中完整的开发流程是什么？就我个人而言，做以简单的分享，仅供参考,不喜勿喷。

      从参与项目的启动会议，到了解详细的需求文档，再到真正的进入开发阶段，到最后的测试上线，整个流程看起来非常清晰明了。

一，确认项目的运行环境。

      从接到项目开始，便确定了项目的运行环境，是PC端还是移动端？而移动端又细化为是app内嵌还是WeChat browser又或者是普通的browser page，还是多平台的Responsive。之所以确认运行环境是为了提前确认针对不同运行环境下的开发模式。如果开发pc端，那么就需要提前考虑各种主流浏览器中常见的的兼容性问题，在开发过程中能很好的绕过这些坑，避免开发事故。反之如果说是开发移动端，那么就需要考虑各种适配问题，以及手机端经常遇到的一些坑，比如：

      1.安卓浏览器中背景图片，有些设备会模糊，用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

长时间的跳这个坑。后来才知道其实是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍） 。所以现在我在开发中，会选择问UI设计师要2X的图使用。在此就不贴代码了，不做过多赘述，有想了解的可以问我。除此之外要选用开发框架，提高开发效率，就个人而言，现在比较喜欢用JQuery。后期可能会使用其他框架。虽然此时还没有拿到项目的prototype，但是心中已经规划好了大概的一个开发模式。

二、详细了解需求文档。

      对于一个开发人员来说，我想需求是重中之重，如果说连需求都不知道，那开发将变得毫无意义，可能有一些伙伴觉得开发无需看需求文档，照着psd图做出页面就行了，如果不了解需求，可能会出现，由于效果不符合需求而需要多次修改代码的事情。而且如果发现了并且改掉了还是比较幸运的，如果上线了发现问题了，那就摊上事了。

三、进入开发阶段。

      当了解需求文档的这个过程以及研究PRD确认开发模式的过程这段时间，设计那边基本上已经将原型图制作成PSD设计图了，PSD设计图到手之后，接下来就是开发阶段了，大致分为：总体结构的搭建，模块制作，页面编写，底层JS搭建，JS交互效果，自测，代码优化。 

      1.个人习惯，拿到设计图之后，第一时间并不是开始代码的编写，而是先分析，整体的结构布局，以及模块化相同的部分，以确保在开发中效率更高，CSS代码利用率高。确认出header、container、main、nav、sidebar、footer等

      2.开发工具目前来说我使用的是vue.js框架，webpack代码构建工具，vscode代码编辑器。使用webpack的方便之初在于，编写代码样式的时候是以less的格式进行编写，构建工具会帮助转译成css，最终并对css代码进行代码压缩。

      3. 接下来就是大家都会的写bug了（编写代码），要遵从代码编写规范以及命名规范，公共部分要统一处理样式或者逻辑，JS必要的时候务必加注释，提高代码的可读性，利于后期的代码维护。

      4. 开发过程中难免会遇到一些设计图和需求冲突或者，自己不清晰的地方，及时与产品及UI设计师沟通，以确保开发出符合需求的东西出来。

      5. 我每次开发项目都有一个习惯就是如果遇到一些常用的方法，我会封装起来，以供以后多次使用，当然每次开发我也会使用以前曾经封装过的方法，这样能使开发效率提高不少。

四、对开发的项目进行自测。

      每个团队应该都是配备有测试的，但是这不代表，开发的项目，开发完就可以丢给后面的人，让测试人员去做所有的测试。一个项目的开发之后少不了单元测试这个环节，个人目前采用的是自己进行测试，测试页面兼容性，以及逻辑是否正常等等。我个人有一个网上虚拟的服务器，每次开发完我会习惯性的把项目放到线上的服务器中，然后在多个机型下测试兼容性以及测试自己的流程及逻辑是否符合产品需求。将暴露在表面的bug扼杀在摇篮中。

五、与后台对接，完成开发交给测试，最后产品验收上线

      当前端的工作任务开发完成之后就需要跟后台交流，对接开发剩下的部分，经过多次交流及开发，最终项目开发完成。这个时候并不是没什么事了，要随时准备好，迎接各种奇葩bug的准备，因为经过专业测试，你才知道什么叫测试。这是一个不断修改bug的过程。在此不对开发过程中遇到的各种坑做过多的赘述。等到for循环了N次的修复bug，确认没有问题，产品验收上线。

前端开发中如何绕过多数的坑。

五、作者建议

根据自己积累的经验，有兼容性问题的地方一定要做兼容性处理。
能不使用新的东西,新技术就不使用新的东西，除非你很了解这个东西，确保用了没问题。或者留意这个地方，测试的时候重点测试。比如CSS3的滤镜，在移动端cpu的渲染是跟不上的。如果不是栽到坑里，也不会发现。
少起ID，多用类名，起类名遵从规范的基础之上一定要有一套自己的规范，不要前面用着，后面忘了甚至重名。
JS逻辑，同句代码，不要出现Jq的方法和js的方法同时出现，或者用js获取的对象操作jq的方法，反之也不行。
开发中所有的容器尽量不要把高度限定死，而是采用子级元素去撑开。如果使用了浮动，那么就需要清除浮动才可以撑开父级的高度。