前端web规范
1、规范目的
为提高团队协作效率 , 让前端人员轻松的开发出高质量且有成就感的产品 , 特制订此文档，本规范文档一经确认 , 前端开发人员必须按本文档规范进行前端开发 ; 本文档如有疑问的地方请及时提出 。
2、基本准则
符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。
3、通用规范
1、TAB键用4个空格代替。
2、文件内容编码均统一为UTF-8。
4、文件规范
1、文件名以英文单词命名，多个单词以驼峰命名法，命名最好以模块或方法或文件含义来命名。
2、css, js, images，icons文件均归档至项目对应的约定的assests目录中，并单独命名(css, js, images，icons)文件夹保存。
3、 css文件命名: 英文命名, 后缀.css，共用reset.css, base.css，common.css(依据项目建立)，其他页面依实际模块需求命名；另：如需重置某个ui库主题样式，请全局建立主题css文件来reset样式，如resetMintUi.css（重置mint-ui库样式）。
4、Js文件命名: 英文命名, 后缀.js. 共用common.js或lib.js或其它公用js, 其他依实际模块需求命名。
5、image图片：分为结构式图片、内容式图片，允许使用jpg、jpeg、png格式，结构式图片第三方图标库icon引入（大小控制在20kb以内），内容式图片皆.jpg格式为准（图片大小需控制在100kb以内，具体可根据项目大小灵活调整）。
6、一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。如：ad、ads、adv、banner、guanggao、gg、guangg等。7. icon图标，非产品自主设计类请使阿里图标库中对应的项目图标icon。
5、代码规范
5.1、html代码规范
1、文档类型声明及编码 : 统一为 html5 声明类型 <!DOCTYPE html>; 编码统一为 <meta charset="UTF-8" />, 书写时利用 IDE 实现层次分明的缩进 。
2、非特殊情况下样式文件必须外链至 <head>:::</head>之间 ;非特殊情况下 JavaScript文件必须外链至页面底部 。
3、所有元素必须小写，不允许出现大写的元素，。
4、所有标签必须成对出现，除特殊元素，如：<br/>,<hr/>,<img/>,<input/>。
5、标签中不允许出现style来定义样式，必须用class来命名。
示例：
<input type=”text” style=”color:#f00;”/>-错误。
<input type=”text” class=”class-name”/>-正确。
6、元素id，元素name命名用驼峰命名法，如：idName。
7、元素class，命名规范：元素简写 +”-”+功能名，如btn-save。
8、元素属性必须使用双引号，不允许使用单引号。
示例：
<input type=‘text’/>-错误
<input type=“text”/>-正确
9、禁止使用在xhtml1.0中已移除的标签，如s，font，b等。
10、充分利用无兼容性标签，如span，strong，em等。需要为 html元素添加自定义属性的时候 , 首先要考虑下有没有默认的已有的合适标签去设置 , 如果没有 , 可以使用须以 "data-" 为前缀来添加自定义属性，避免使用 "data:" 等其他命名方式 。
11、语义化html，列表无图的使用ul/li标签，列表带图的使用dl/dt/dd标签；内敛元素不能嵌套块级元素。
12、书写链接地址的时候，需避免重定向问题，例如：href="http://itaolun:com/", 即需在url后面添加“／”。
13、必须为含有描述性表单元素 (input, textarea) 添加 label。
示例：
<p>
姓名:<input type="text" id="name" name="name" />
</p>
须写成 :
<p>
<label for="name">姓名:</label><input type="text" id="name"/>
</p>
14、以背景呈现的图片，尽量写在css样式里面。
15、图片必须添加alt属性，描述图片内容。
16、div盒子代码功能块必须添加注释，解释其作用或描述。
17、正常情况下css样式表置于head之间，javascript文件置于页面底部（body内）。
18、head meta标签keyword,desc关键字不能为空，需找产品确认文案。
5.2、css代码规范
1、元素尽量使用class选择器匹配。
2、css写完之后必须使用“;”结尾。
3、 ie浏览器hack的方式。
示例：
IE6 = _width:100px;
IE7 = *width:100px;
IE8 = width:100px\9;
IE8/9 = width:100px\0;
IE9 = width:100px\9\0;
4、书写css代码前，请注意样式的重复利用率跟独立性。
5、属性选择器中的值必须用单引号包围，且属性定义后不需要分号。
6、如无必要，不得为 id、class 选择器添加类型选择器进行限定。如：p.danger-错误。
7、使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。
示例：
article {
margin: 5px;
border: 1px solid #999;
}
/* good */
.page {
margin-right: auto;
margin-left: auto;
}
.featured {
border-color: #69c;
}
/* bad */
.page {
margin: 5px auto;
}
.featured {
border: 1px solid #69c;
}
8、当数值为 0 - 1 之间的小数时，省略整数部分的 0。
示例：
/* good */
panel {
opacity: .8;
}
/* bad */
panel {
opacity: 0.8;
}
9、颜色值可以缩写时，必须使用缩写形式。
/* good */.success {
background-color: #aca;
}
/* bad */.success {
background-color: #aaccaa;
}
10、 颜色值不允许使用命名色值。
/* good */.success {
color: #90ee90;
}
/* bad */.success {
color: lightgreen;
}
11、颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
/* good */.success {
background-color: #aca;
color: #90ee90;
}
/* good */.success {
background-color: #ACA;
color: #90EE90;
}
/* bad */.success {
background-color: #ACA;
color: #90ee90;
}
12、由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认，所以需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
13、带私有前缀的属性由长到短排列，按冒号位置对齐。标准属性放在最后。
示例：
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
14、需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。
15、尽量使用简单的 属性 hack。
示例：
.box {
_display: inline; /* fix double margin */
float: left;
margin-left: 20px;
}
.container {
overflow: hidden;
*zoom: 1; /* triggering hasLayout */
}
16、>、+、~ 选择器的两边各保留一个空格。
示例：
/* good */
main > nav {
padding: 10px;
}
label + input {
margin-left: 5px;
}
input:checked ~ button {
background-color: #69C;
}
/* bad */
main>nav {
padding: 10px;
}
label+input {
margin-left: 5px;
}
input:checked~button {
background-color: #69C;
}
5.3、js代码规范
1、使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
2、定义变量、函数、参数、类的方法／属性、命名空间等皆采用驼峰命名方式，如：toJsonArr。
3、常量、枚举的属性全采用大写命名，单词之间采用下划线命名方式。
4、类使用Pascal命名法。即首字母大写，多字母之间驼峰命名方式。
5、import引入js的方式，所调用的方法名称统一首字母大写命名，多字母之间驼峰命名方式。
示例：
function TextNode(options) { }
6、用作代码块起始的左花括号 { 前必须有一个空格。
示例：
// good
if (condition) {
}
while (condition) {
}
function funcName() {
}
// bad
if (condition){
}
while (condition){
}
function funcName(){
}
7、if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。
示例：
// good
if (condition) {
}
// bad
if(condition) { }
8、在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。
示例：
// good
var obj = {
a: 1,
b: 2,
c: 3
};
// bad
var obj = {
a : 1,
b:2,
c :3
};
9、函数定义结束不允许添加分号。
示例：
// good
function funcName() {
}
// bad
function funcName() {
};
// 如果是函数表达式，分号是不允许省略的。
var funcName = function () {
};
10、支持es6语法的项目，必须舍弃var定义的方式，采用let，const的方式去定义，常量使用const定义。
11、单行注释使用//，多行注释使用/**/。
12、为了便于代码阅读和自文档化，以下内容必须包含以 /**...*/ 形式的块注释中。
（文件、类、函数或方法、类属性、事件、全局变量、AMD 模块）
13、函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。
示例：
/**
* 函数描述
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长
* 那就换行了.
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
14、变量、函数在使用前必须先定义。
示例：
// good
var name = 'MyName';
// bad
name = 'MyName';
15、在 if条件判断中使用类型严格的 ===。仅当判断 null 或 undefined 时，允许使用 == null（可以避免等于判断中隐式的类型转换）。
示例：
// good
if (age === 30) {
// ......
}
// bad
if (age == 30) {
// ......
}
16、类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
17、number 去除小数点，使用 Math.floor / Math.round / Math.ceil，不使用 parseInt。
示例：
// good
var num = 3.14;
Math.ceil(num);
// bad
var num = 3.14;
parseInt(num, 10);
18、字符串开头跟结束使用单引号 ' 。
示例：
var str = '我是一个字符串';
var html = '<div class="cls">拼接HTML可以省去双引号转义</div>';
19、使用对象字面量 {} 创建新 Object。
20、对象创建时，如果一个对象的所有 属性 均可以不添加引号，建议所有 属性 不添加引号，如果添加了引号，建议所有的属性添加引号。
21、不允许修改和扩展任何原生对象和宿主对象的原型。
22、for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性（容错机制）。
示例：
var newInfo = {};
for (var key in info) {
if (info.hasOwnProperty(key)) {
newInfo[key] = info[key];
}
}
23、所有的循环遍历数组，需要先判断数组长度是否大于0（容错机制）。
6、兼容性规范
6.1、pc端兼容规范
兼容浏览器：所有的先进浏览器（谷歌、火狐、ie8+、360浏览器、搜狗、苹果浏览器等）。ie8以下，友好提示升级浏览器版本。（注意：请慎重使用ie hack！）
6.2、h5端兼容规范
兼容机型：苹果（5-7 p）、三星、小米、乐视、华为、opop各种常规机型—适配各种机型的屏幕大小。（宽度320px为最小适配宽度）
7、接口规范
7.1、基本规范
1、查询、获取之类的接口，通用get请求。
2、添加、修改、删除的接口，通用post请求。
7.2、接口响应基本格式（json）
//当code == 200时候 是成功 data中是要用的数据,data采用数组格式，如果数据为空，将是一个空数组[]。
//当code != 200时候 msg中是错误的信息，用于前端的错误提示
{
"code": 200,
"data": [],
"msg": "xxxxxxxxxxx",
}
1、通过code判断接口成功与失败与否，失败的话，前端直接展示msg返回的内容，具体内容后端输出。
2、不能通过返回的msg进行判断，msg只是用于直接获取在前端界面展示的文案。
7.3、接口响应字段的key值
1、接口响应字段的数据为空时，不能缺少key值。
默认的key－value
object: {}
array：［］
string：’’
number：0
7.4、语义化
1、接口名称语义化，以动词+名词组合，例如getVideoList、editVideoInfo。
2、不接受list.html格式的接口，会误认为是静态界面。
3、接口字段语义化，符合大众阅读标准。
7.5、关于跨域
1、后端处理：后台设置header参数，Access-Control-Allow-Origin为“*”值。
2、运维处理：nginx反向代理设置。
3、前端处理：jsonp格式处理，需要后台配合返回jsoncallback。
7.6、编码格式
1、请求、返回的编码，均必须为utf-8编码，不允许出现返回乱码，乱码不利于抓包调试。
2、由于ie系的bug，接口请求的时候，需要把请求中的中文字段编码，后台接口请解码控制。
7.7、接口体积
1、接口体积尽量小点，不需要的字段需要删除，最好不要超过100k。
7.8、分页格式
1、每条请求一般10(pageSize)条数据，页码从1(curPage)开始，前端需要作为接口入参传给后台。
后台接口响应格式如下：
{
"code": 200,
"data": {
items:[
{
"id":1,
"name":"xxx"
},
{
"id":2,
"name":"xxx"
}
],
"page": {
"curPage": 1,
"pageSize": 10,
"totalPage": 2,
"totalRow": 20
}
},
"msg": "xxxxxxxxxx",
}
7.9、分享同步策略
1、开发之前，前端同学需要与后台确认接口相关信息，并协商确认接口文档给到的时间。
2、如接口变动，后台需要提前通知到前端同学，并以邮件形式发送。
8、开发协作规范
8.1、需求评审
1、需求评审前：负责该需求产品线的前端同学需要提前对需求稿进行内部评审，总结自己不明白的地方，需求评审时抛出问题，直到理解。
2、需求评审中：评审时，需要对每个需求点了解透彻，觉得不合理或者有疑问的地方需要及时提出来。
3、需求终审（二审）：时间评估时考虑以下原因：
1) 以页面复杂程度，功能点难度等进行开发时间评估（如需采用第三方控件开发，请考虑是否能满足？如不能满足请考虑上控件二次开发时间。）。
2) 请把核心模块开发的逻辑图产出时间考虑进去。
4、产品新版本需求是否有改动之前版本的功能，这点需要谨慎确认，及时提出疑问。
5、需求评审开发评估时间：
1) 除了内部开发时间外，联调时间需根据接口或功能复杂程度评估，联调时间一般最少1天。
2) 前端需要开发前3天内拿到定稿的接口文档，具体请与各自配合的后台协商时间。
3) 开发模块逻辑图制作时间请考虑到开发时间内，一起评估。
8.2、设计阶段
1、前端同学需要针对产品需求稿对比是否有遗漏页面设计？如有及时提出来。
2、UI设计细节地方如有疑问，需要及时提出来。
3、根据一些开发实际情况，UI评审时看下UI设计是否合理。
4、UI设计稿跟之前版本已完成的功能是否有改动？如有也请及时提出来。
8.3、开发阶段
1、开发某个核心模块功能：需要先绘制模块的逻辑思维图，产出后需叫上leader评审（产品经理可视模块重要性决定是否叫上一起评审），产出结果发邮件leader并抄送给产品经理。
2、如遇产品需求变更或新增：请先与产品沟通好需求，评估需求的开发时间，是否会影响之前既定的上线日期。如影响上线日期，请及时提出来让产品知悉，商量结果需要以邮件形式发送给相关同学（由产品经理发送，前端同学可以提出来）。
3、如遇后端接口字段或者接口逻辑变更：请先评估前端这边更改所需要的时间是否影响既定的上线日期，如影响上线日期，请与后端协商解决方案（沟通结果走邮件）。
8.4、联调提测
1、提测应该在开发自己内测过之后的操作。提测阶段开发可提供自己的开发逻辑图供测试做参考。
2、提测阶段测试提供的bug统一在jira里面管理（jira/conflunce/gitlab账号入职就会申请），开发需要自己及时更新bug状态。
3、提测阶段，如测试发现开发需求与产品需求对不上的问题，请对照需求文档确认，并与相关产品经理确认。
4、提测阶段，测试当天提出的bug，开发需要当天下班前修复完毕。
8.5、运维发布
1、测试环境发布：前端同学需要获取到jeakins的dev地址，然后注册一个自己的账号，并给运维同学开通相关发布权限，即可发布。
2、生产环境发布：请联系产品线前端leader合并分支到master，并发布到线上。
8.6、正式上线
1、上线之前：
1) 上线代码必须经过leader codeReview。
2) 上线合并代码到master之前，必须给开发版本打上版本标签tag 。
2、上线时间节点：一般晚上10点左右上线，特殊情况除外，参与开发人员必须全程参与。
3、上线之后：如需要紧急修复bug，但现有新版本在开发，前端需要从master切换一个hotfix-版本 的分支出来，本地切换这个分支修复bug，修复完成merged到dev分支进行测试验证。ok之后合并master分支并发布。
9、自测规范
9.1、功能性测试
1、依据需求文档功能描述，进行功能完整性，连贯性测试。
2、依据前端开发逻辑图，进行开发思路，页面逻辑测试。
3、依据api接口文档，进行功能接口调用测试，需要注意，api接口需要进行多情况下的参数测试（正确数据&错误数据）。
9.2、兼容性测试
1、pc端兼容浏览器：所有的先进浏览器（谷歌、火狐、ie8+、360浏览器、搜狗、苹果浏览器等）。ie8以下，友好提示升级浏览器版本。（注意：请慎重使用ie hack！）
2、h5端兼容机型：苹果（5+）、三星、小米、乐视、华为、opop各种常规机型—适配各种机型的屏幕大小。（宽度320px为最小适配宽度）
9.3、页面完整性测试
1、依据UI设计终稿，进行页面是否遗漏测试。
2、依据UI设计终稿，进行页面元素是否遗漏测试。
3、依据UI设计终稿，进行页面流程连贯性测试。
9.4、交互体验测试
1、前端功能开发完，请依据需求文档，以用户的角度去体验页面交互是否是流畅的，是否友好？如有需求优化的问题，请评估优化的工作量，告知产品是否版本能接受开发时间优化上去？还是纳入下个版本开发？
2、页面所有调取API接口的模块，如果处理调取时间过长的时候，必须添加loading等待的提示。
9.5、性能测试
1、是否做到了页面所有元素加载速度不超过3秒？
2、是否做到了页面js／css文件需要优化至极致，避免冗余代码存在？
3、是否做到了页面图片在jpg/jpeg为主（移动端svg为主）的图片格式？尽量避免了png,gif等其它格式的存在？
4、是否存在很损耗内存的js代码（递归、闭包、事件绑定等），需要做内存释放操作。
10、故障处理规范
1、产品线各前端人员需要及时响应业务部门的反馈问题，相关业务群里面的问题做到业务部门及时反馈，我们及时响应，即使当时立马无法解决，也需要给出“我们已收到问题，正在处理”等类似的回应。
2、线上问题如是开发自己的遗留的功能性bug，请务必尽快处理fixed上去，如是产品本身的需求缺陷，请与产品商量，是否至下个版本上线？或直接群里@相关产品经理处理。
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
