前端项目的开发流程

Posted 2023-03-29

参考技术A

 前端开发流程概述

前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段，下面分别进行叙述。

2.1 需求分析

这个环节中，首先是和客户进行交流，了解客户的需求，然后分析项目的可行性，撰写项目需求文档。如果项目可行，则起讨论具体方案，分模块分步骤进行规划，分析项目进度安排、所需成本，进行原型设计（包括页面布局图，页面逻辑流程图，说明文档等。通过原型设计，可以让项目组和客户都可以对项目有一个直观感受，同时可以低成本高效率的复现业务场景和各模块流程）。
可以说需求分析阶段是整个前端项目的基础，基础不牢，地动山摇。可以试想，如果和客户沟通不顺畅，有的方面客户没搞清楚是什么效果，开发完成后就可能与客户发生纠纷；如果可行性有问题，有的模块很难实现或成本超出预算，就很难处理。

2.2 开发阶段

这个环节是前端工程师主要参与的部分，按照需求分析阶段的规划按步骤完成任务。

根据产品需求分析文档和原型图进行UI设计，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

根据UI设计进行规划，提取界面中可以复用的模块方便重复利用，分析界面是否有实现难度比较困难的地方，进行沟通和功能排期，按功能大小以及难度进行功能时间的评估，和后端沟通好排期时间，保证大家能够更有效地开发合作，针对功能复杂的地方要先理清思路。

不要盲目开发前端搭建框架。根据设计图进行前端界面开发，以及遇到的问题及时与产品、UI、后台人员沟通，保持大家信息一致，针对不清楚的地方也要及时沟通，以免做错功能。

根据后端接口进行字段填充，以及部分功能开发。针对缺少的字段或者数据结构进行提出，及时与后端反应，尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发，针对不规范的地方要给与提出、指正，营造出规范的工作模式，以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计，也不必等后端，可以自行开发nodejs服务器配合postman等接口软件进行开发。

前后端功能联调、完成自测。检查功能完成情况，看是否有遗漏，出现问题及时沟通解决。

2.3 测试阶段

发布测试、修改bug、发布上线，自测完成后提交测试，测试根据提交的项目以及需求进行测试，提出bug给相关人员修改，开发人员周期性的配合修改bug，保证今天能够修复昨天的bug。
发布dev环境，配合测试，修复bug以及需求优化
发布test环境，修复bug以及需求优化
发布it环境，修复bug以及需求优化
发布pre环境，修复bug以及需求优化
pre验收之后，发布线上环境，产品进行验收

2.4 维护阶段

如果客户验收通过，项目就进入了维护阶段，程序的维护包括程序上线后后续bug的修复和程序版本的更新。

3 个人经验总结

3.1 文档很重要

前端项目的文档似乎已经作为前端工程化的标准流程之一了，文档写的好，可以便于同事快速了解你的代码功能和需求，便于协作。可以想象，随之项目复杂度增加，体量越来越庞大，开发团队人数也越来越多。这种情况下，如果像变魔术一样隐匿中间流程而直接得出结果，后果可想而知：项目复杂度越增加就越难以管理，开发效率低，合作混乱，结果甚至导致项目死亡。
好的文档看起来就像一个产品说明书，但作用却远远超过了说明书，不仅仅告诉你如何使用，还应该告诉你项目的设计思路，用了哪些组件，哪些部分不完善，将来有什么规划等等。这是一份比较好的说明文档。

3.2 与客户及时沟通很重要

3.3 扎实的基本功很重要

尽管当下框架、函数库、工具包等更新迭代非常快，前端工程师有很多新的知识要学，但原生JS、html和CSS依然是重要的基本功，在学习前沿工具的同时不能放弃基本功的训练。

web前端开发规范项目流程总结

web前端开发规范

web前端开发规范的意义
1、提高团队的协作能力
2、提高代码的复用利用率
3、可以写出质量更高，效率更好的代码
4、为后期维护提供更好的支持

规范

1、命名规则
2、文件存放位置规范
3、css书写规范
4、html代码书写规范
5、JavaScript书写规范
6、图片规范
7、注释规范
8、兼容性规范
9、开发测试约定及实用工具规范
公司统一要求规范

要求
1、熟练使用前端开发工具
2、代码规范
3、目录结构规范
4、切图与原型效果一致
5、命名页面方法命名统一英文规范
6、代码注释
责任
禁止：
1、禁止与客户私聊微信或其他聊天工具沟通项目问题、一切都放到沟通群里面沟通
2、禁止与客户沟通除项目以外公司方面的事情
3、禁止谈论工资情况
4、禁止传播不满情绪，有问题向直属上级反馈
5、除负责人授权外禁止技术与业务沟通报项目价格与工期
…

项目流程制度
UI效果图确认之后准备开发工作
第一步：
项目负责人与开发人员找产品经理了解项目需求（需彻底熟悉利用2天时间确定相关需求）

第二步：
项目负责人分配后台与前台开发工作并制定工期计划

第三步：
技术对照产品提供的原型与客户索要第三方账户并协助申请用作开发使用（提前申请账号）

第四步：
技术开发完之后填充正规数据后自己内测三遍以上没问题再交由负责人把关，负责人把关没问题交由产品与业务内测

第五步：
内部测试没有发现问题交由客户测试，测试反馈细节或bug问题当天解决

第六步：
功能全部开发完APP上架应用市场

技巧
1、客户提的问题、体验效果超出技术难度范围可以给客户绕个弯讲利弊关系做简单的功能，最终目的是要的是简单实用效率高；
2、要让客户知道我们对您的项目非常重视，想办法沟通最终目的是功能做得完美，开发效率高
3、遇到蛮不讲理客户，胡言乱语客户不用与之吵闹，直接反馈上面来处理；

APP内测发包规范
1、发内测包之前需是经过自己内测三遍后；
2、发内测包到项目内部群用二维码形式带LOGO图标；
3、发内测包需有（LOGO图标、起始页、轮播图、正规内测数据）；
4、每个内测包都要带自动更新功能；
5、发内测包需提供测试账号密码信息；
6、每个新项目都要单独新建一个文件夹用来整理所有关于本项目的文件。

1、html 的命名规则

1、文件名称命名规则
统一用小写英文字母、数字、和下划线组合，不得包含汉字（转义问题）空格和特殊字符。
方便理解 方便查找
2、索引文件命名原则 和 各子页面命名原则
要么用翻译的英文名称，要么用拼音命名 但注意不要用英语拼音混用

2、图片的命名规则

常规命名：
放置在页面顶部的广告、装饰图案等长方形的图片取名：banner
标志性的图片取名为：logo
在页面上位置不固定并且带有连接的小图片一般取名为button
在页面上一个位置连续出现，性质相同的连接栏目的图片一般取名为：menu
装饰用的照片一般取名;pic
不带连接表示标题的图片一般取名：title

3、脚本文件的命名规则

一般使用脚本功能的英文小写缩写命名：
实际模块：
例如：
广告条的JavaScript文件名为ad.js
弹出窗口的JavaScript文件名为pop.js
共用模块：
js文件名;英文命名，后缀js，共用common,js
外部资源：
jQuery.min.js jquery.date.js

4、文件存放位置规范

文件夹说明：
images存放图片文件‘
media存放多媒体文件
script存放JavaScript脚本
css存放css文件

5、css的3种基本类型

css
css指层叠样式表
样式通常存储在样式表中
把样式添加到html中，是为了解决内容表现分离的问题
外部样式表可以极大的提高工作效率
外部样式表通常存储在css文件中
多个样式定义可层叠为一
6、class与ID的使用规范

区别：
ID在页面中有且只能有一个。所以使用ID表示的css样式只能表示一个元素的样式
class在一个页面中可以有多个，也就是说定义一个css样式后，可以有多个元素引用这个class
书写方式：
id的书写样式：#title{font-size:18px;color:#333;}
class的书写方式：.title{font-size:18px;color:#333;}

命名注意：
1、大的框架比如说header/footer/wrapper/left/right之类的由设计框架之人统一命名。
其他样式名称由小写英文&数字&_来命名，避免使用中文拼音，尽量使用简易的单词组合；
总之，命名要语义化，简明化。
7、css的命名规范
意义：
规范的命名有助于提升团队开发效率
规范的命名有助于后期产品的维护
规范的命名有助于后期的二次开发

8、head区域代码规范
必须加入的标签：
搜索时候使用的关键字：

  <meta name="keywords"（关键字必须这么写） content="xxxx,xxxx,xxxx,xxxx"（里面填写搜索关键字）>

css

 <link href=".../css/style.css" rel="stylesheet" type="text/css"></link>

网页显示字符集：

简体中文： 
<meta http-equiv="content" content="text/html;charset=gb2312"/> 
繁体中文： 
<meta http-equiv="content" content="text/html;charset=utf-8"> 
英语： 
<meta http-equiv="content" content="text/html;charset=utf-8"> 

网页标题：

<title> 我是一个标题</title> 
用来防止别人在框架里调用你的页面
<meta http-equiv="window-target" content="_top">
自动跳转 //例如注册后跳转
<meta http-equiv="Refresh" content="5" url=http://www.baidu.com">
所有的JavaScript的调用尽量采取外部调用

9、字体规范

在设定字体样式时对于文字字号样式和行间距应必须使用css样式表。
禁止在页面中出现<font size=?>标记
字体大小：
在网页中应首选使用宋体。英文和数字首选使用verdana和Arial两种字体。
一般使用中文宋体的9pt和11pt或者12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，
一般选用11pt和14.7的字号比较合适。
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用来人工干预分段
注：不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 请不要在网页中国连续出现多余一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应尽量使用text-indent，pandding,margin，hspace,vspace以及透明的GIF图片来实现。
行间距：
行距建议用百分比来定义，常用的两个行距值时line-height：120%/150%
首行缩进：
排版中经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上一个<p> 标记，注意，一般情况下，请不要省略</p>结束标记。

10、连接和表格使用规范

链接：
1、网站中链接路径全部采用相对路径
2、一般链接到某一目录下的缺省文件的连接路径不必写全名
例如：<a href="aboutus/index.html">而应该这样：<a href="aboutus/">
3、在浏览器里，当我们点击空连接时，他会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码
“JavaScript：void(null)”代替原来的“#”标记
表格：
1、尽量避免表格嵌套过多
后果会对浏览器加载延长时间，带来不友好的用户体验
2、在写<table>互相嵌套时，严格按照的规范，对于单独的一个<table>来说，

<table><tr>对齐，<td>缩进两个半角空格， 
<td>中如果还有嵌套的表格,<table>也缩进两个半角空格。

如果结束标记应该与处于同一行，不要换行。

11、嵌套Alt和Title

相同点：
提示性语言标签
不同点：

alt：一般是对图片进行提示描述
title：一般对文字标签进行描述

实例：

 <p title="给链接文字提示"> 文字</p>
<a href="#" title="给链接文字提示">文字</a>
<img src="图片.gif" alt="给图片提示">

12、JavaScript规范

书写：
书写过程中,每行代码结束必须有分号;
变量命名格式
变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为’_’, 其他与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.
函数命名:
首字母小写驼峰式命名. 如iTaoLun();
JavaScript文件
JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，因为存在与HTML中的JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。
filename.js或JavaScript的代码应尽量放到body的后面。 这样可以减少因为载入脚本而造成其他页面内容载入也被延迟的问题。

缩进
缩进的单位为四个空格。避免使用Tab键来缩进。 因为始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小， 但在局域网中几乎可以忽略，且在最小化过程中也可被消除掉。

函数声明
所有的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样可以帮助判断哪些变量是在函数范围内的。

变量声明
所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做， 但这么做可以让程序易于阅读，且也容易发现那些没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行，并加上注释说明。
尽量减少全局变量的使用。不要让局部变量覆盖全局变量。
{} 和[]
使用{}代替new　Object()。使用[]代替new　Array()。这样便于书写且能提高一点执行效率。
当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

1.event.srcElement问题 //找到触发事件的源对象
问题说明：I.E.下，even对象有srcElement属性，但是没有target属性； Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用 var obj=event.target||window.event.srcElement;

2.parentElement（父元素）问题
firefox与I.E.的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.

13、图片的使用规范

存放位置
所有页面元素类图片均放入images文件夹, 测试用图片放于img/demoimg文件夹
格式
图片格式仅限于gif || png || jpg;
命名
命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

性能
运用css sprite技术集中小的背景图或图标, 减小页面http请求,但注意,请务必在对应的spritepsd源图中划参考线, 并保存至img/images目录下.
CSSSprites
在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

这当中用到了CSS Sprites切图技术。
CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：减少网页http请求，提高页面性能，降低服务器负载；文件命名减少麻烦。
缺点：定位繁琐，布局固定，降低网页弹性。

Css Sprite使用方法：
1、将用到的背景图片压缩为zip格式的压缩包
2、用Css图片拼合生成器将其拼合成一张图片，然后下载该图片
3、拼合完成后会生成相应的Css规则，该文件定位了每个图片的位置及图片的宽度和高度
4、在Css样式中定位背景图片，例如：
例子：

ul.share li{float:left;}  
ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}  
a.renren{background:url(../images/share.gif) 0 0 no-repeat;}  
a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}  
a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}  
a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}  
a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}  
<ul class="share">  
<li>分享到：</li>  
<li><a class="renren" href="/cuiying_2007/blog/ " title="">人人网</a></li>  
<li><a class="kaixin" href="/cuiying_2007/blog/ " title="">开心网</a></li>  
<li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>  
<li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>  
<li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌书签</a></li>  
</ul>  

14、注释规范
html注释:
注释格式 , ‘–’只能在注释的始末位置,不可置入注释文字区域;
Css注释:
注释格式 /这是注释/;
javascript注释:
单行：单行注释使用//这是单行注释 ,
多行：多行注释使用 /* 这有多行注释 */;