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

前言：作者任职某互联网公司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的方法，反之也不行。
开发中所有的容器尽量不要把高度限定死，而是采用子级元素去撑开。如果使用了浮动，那么就需要清除浮动才可以撑开父级的高度。

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

前端开发的流程与规范
先仍2篇网上找的: 在团队不断成长的过程中,需要处理的需求也在逐渐增长,团队中成员如何分工配合决定了开发的效率.产品的质量,在这个时候我们就需要一个流程来规范.指导我们,下面就将咱们前端组的一些经验跟 ...
web前端开发规范项目流程总结
web前端开发规范 web前端开发规范的意义 1.提高团队的协作能力 2.提高代码的复用利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持规范 1.命名规则 2.文件存放位置 ...
【Web前端开发】面试经验分享（应届生）
序言: 一直在前端学习路上摸爬滚打,从实习到校招,经历了很多场面试,通过该篇文章,总结自己在面试过程中的一些心得体会,希望与大家共勉,一起加油! 学习迷茫?看鸡汤既然走进了前端大门,就不要退缩,你想 ...
前端开发免费学习资源分享
知乎上很多同学在问什么前端培训,怎么入行啥的我这里给大家先总结一下,老师会给大家分享一些基础的学习资料如果你入不了门,就不要去搞啥前端了, 没有用的,一点基础没有去培训你也听不懂黑马程序员pink ...
公众号前端开发配置流程
公众号: 为企业和组织提供更强大的业务服务与用户管理能力,主要偏向服务类交互(功能类似12315,114,银行,提供绑定信息,服务交互的) 申请账号认证公众号公众平台接口调用仅支持80接口设置业 ...
前端开发群技术文章分享汇总
2019独角兽企业重金招聘Python工程师标准>>> 今天推荐一个非常好的关于前端的资源,包含了前端的css,html,js,ui,面试,算法等等一系列你感兴趣的内容,小编认为真的 ...
前端开发【短信分享】——H5调起短信，发送指定内容到指定号码
目录一.终端调试本地localhost页面 1.网络环境设置 2.查看电脑本地 3.手机访问地址 4.防火墙问题二.项目说明 1.sns短信调起 2.终端发送说明 3.终端判断说明 4.项目源码 ...
React 是如何成为跨越前端开发鸿沟的桥梁？
有人说,前端设计是一位美工,也有人说,前端设计就是搞 Web 页面开发的:还有人说,前端设计是上游的交互设计师和下游服务器端工程师沟通的桥梁......那么从技术角度来看,到底何为前端设计?作为如今主 ...
前端开发需要学习什么？需要掌握哪些技能？
随着不断变化的技术和框架,在前端开发领域开始变得非常困难,那想要成为一名前端开发工程师,前端开发需要学习什么呢? 在这篇文章中,为你总结了如何成为前端开发人员的10个技巧!以及前端学习路线,欢迎参考! ...

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

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

最新文章

热门文章