Web前端开发标准规范

时间 2019-11-07

标签 web 前端开发标准规范栏目 HTML 繁體版

原文原文链接

web前端开发规范的意义

提升团队的协做能力
提升代码的复用利用率
能够写出质量更高，效率更好的代码
为后期维护提供更好的支持

1、命名规则

命名使用英文语义化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！
项目、目录、html/css/js等文件命名所有采用小写方式，如下划线分隔。eg：my_project_name
html/css/js文件名一一对应参考微信小程序.eg: login.html、login.css、login.js
class、图片、视频、音频采用小写方式，如下划线或中划线分隔；eg：btn-play或btn_play
id可采用驼峰命名;eg：play或playGame
变量名采用小写方式，如下划线分隔；应为名词,eg： product,product_detail
常量采用全大写方式，如下划线分隔；eg：MAX_COUNT
函数名采用驼峰命名，以动词开始。 getName(), 返回类型是布尔类型，通常以is开头，eg: isEnable();
变量和函数命名，不要担忧长度，必定要语义化合乎逻辑。eg: saveImageToPhotosAlbum()
变量和函数名不能以数字开始，不能使用保留字；jQuery对象以'$'符号开头，私有变量以'_'开头。

2、注释

页面头部须要添加制做时间等信息。

<head>    
    <title>页面名称</title>
     <!-- 月影 2019-02-19  -->
</head>

功能模块，请在模块之间加入注释，中英文不作要求：

... 
 
<!-- 活动规则 开始  -->
<div class="rules-wrapper">
    <div class="rules-title">活动规则</div>
    <div class="rules-list">
        <div class="rules-item" v-for='item,index in rules_list'>
            <div class="rules-num">{{index+1}}</div>
            <div class="rules-text">{{item}}</div>
        </div>
    </div>
</div>
<!-- 活动规则 结束  -->
 ...

/* rules start*/
.rules-wrapper{...}
.rules-title{...}
.rules-list{...}
.rules-item{...}
.rules-num{...}
.rules-text{...}
/* rules end*/

自定义函数。请注明函数的调用方式，包括函数的用途、参数类型等。

/**
* JQ公告滚动 封装函数
* 参数说明
* @obj : 动画的节点，本例中是ul
* @top : 动画的高度，本例中是-35px;注意向上滚动是负数
* @time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
* 
*/
function noticeUp(obj,top,time) {
    $(obj).animate({
        marginTop: top
    }, time, function () {
        $(this).css({marginTop: "0"}).find(":first").appendTo(this);
    })
}
$(function () {
    // 调用 公告滚动函数
    setInterval("noticeUp('.notice ul','-35px',500)", 2000);

});

3、HTML规范

一、页面头部

文档类型统一使用html5的doctype：
lang属性统一使用en，特殊场景特殊处理
字符编码统一指定为'UTF-8'
页面标题(Title)：页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字之内
页面关键字(Keywords)： Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开
页面描述(Description) ：不超过150个字符，描述内容要和页面内容相关。
IE兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
移动端禁止缩放

PC端头部示范：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 月影 2019-02-19  -->
    <title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="keywords"
          content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事"/>
    <meta name="description"
          content="英雄联盟官方网站，海量风格各异的英雄，丰富、便捷的物品合成系统，游戏内置的匹配、排行和竞技系统，首创的“召唤师”系统及技能、符文、天赋等系统组合，必将带你进入一个崭新而又丰富多彩的游戏世界。"/>
</head>
<body>
</body>
</html>

移动端头部示范：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 月影 2019-02-19  -->
    <title>页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan</title>
    <!-- 禁止缩放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 为了防止页面数字被识别为电话号码，可根据实际须要添加： -->
    <meta name="format-detection" content="telephone=no">
    <!-- 让添加到主屏幕的网页再次打开时全屏展现，可添加： 删除默认的苹果工具栏和菜单栏  -->
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="Description" content="页面的描述内容"/>
    <meta name="Keywords" content="页面关键字"/>
    <!-- External CSS -->
    <link rel="stylesheet" href="demo.css">
    <!-- In-document CSS -->
    <style>

    </style>
</head>
<body>

<!-- External JS -->
<script src="demo.js"></script>

<!-- In-document JS -->
<script>

</script>
</body>
</html>

二、HTML标签

标签必须合法且闭合、嵌套正确，标签名需小写，不要使用HTML5已经废弃的标签。eg：b、 em
自定义标签须要符合语义化，必须小写
标签的自定义属性以data-开头，后面跟小写单词，多单词使用下划线链接如：<a data-goods_num='18' href="javascript:;" ></a>
缩进使用Tab键不要使用空格键，webstorm中使用快捷键command+option+L（Ctrl+Alt+L）对齐
引入CSS 和 JavaScript 文件时通常不须要指定 type 属性，由于 text/css 和 text/javascript 分别是它们的默认值。css放在上面head中，JavaScript放在body下面紧临</body>
标签中属性必须添加双引号（非单引号)，应该按照特定的顺序出现以保证易读性；属性顺序html

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是为高可复用组件设计的，因此应处在第一位；
id更加具体且应该尽可能少使用，因此将它放在第二位。
boolean属性指不须要声明取值的属性，XHTML须要每一个属性声明取值，可是HTML5并不须要；boolean属性的存在表示取值为true，不存在则表示取值为false。
在编写HTML代码时，须要尽可能避免多余的父节点；不少时候，须要经过迭代和重构来使HTML变得更少。删除无心义的空标签，不要用标签名来设置样式

3、CSS规范

一、CSS引入方式

通常状况使用外部样式表：统一使用link标签，少用@import（原生import有加载性能问题），sass、less、vue.js等文件使用import命令除外（由于最终前端构建工具会将引入文件编译成一个css文件）。前端
```
<link rel="stylesheet" href="xxx.css">
```
个别状况使用内部样式表：页面很是简单且样式很是少的单独页面，如：纯图片海报页面，纯文字协议页面vue
```
<style>
...
</style>
```
特殊状况才使用行内样式：如：js动态获取滚动高度：html5
```
style="height:{{scroll_height}}px;"
```

二、CSS代码风格

css头部统一加上@charset声明，以下： @charset "utf-8";
禁止使用ID选择器来定义元素样式
禁止使用层级过深的选择器，最多3级。eg: ul.pro_list > li > p

除非是样式reset须要，禁止对纯元素选择器设置特定样式，避免样式污染java

PC端和移动端通用reset示例webpack

body,html{width:100%;min-height:100%;/*移动端*/-webkit-user-select:none;user-select:none/*
禁止选中文本（如无文本选中需求，此为必选项） */}
body{background-color:#fff;color:#333;font-size:16px;font-family:PingFangSC-Regular}
a,body,button,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,table,td,textarea,th,tr,ul{box-sizing:border-box;margin:0;padding:0;border:0}
button,input,select,textarea{outline:0;font-size:100%}
h1,h2,h3,h4,h5,h6{font-size:100%} 
li,ol,ul{list-style:none}
a{cursor:pointer} 
a,a:hover{text-decoration:none}
::-webkit-input-placeholder{color:#B0B0B0}
:-moz-placeholder{color:#B0B0B0}
::-moz-placeholder{color:#B0B0B0}
:-ms-input-placeholder{color:#B0B0B0}

媒体查询顺序由大到小css3

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {} 
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) { }

缩进使用soft tab（4个空格）
分号每一个属性声明末尾都要加分号。
引号最外层统一使用双引号；url的内容要用引号；属性选择器中的属性值须要引号。

空格git

如下几种状况不须要空格：

属性名后
多个规则的分隔符','前
!important '!'后
属性值中'('后和')'前
行末不要有多余的空格

如下几种状况须要空格：

属性值前
选择器'>', '+', '~'先后
'{'前
!important '!'前
@else 先后
属性值中的','后
注释'/*'后和'*/'前

CSS属性的声明顺序与性能无关，可是为了易于阅读统一规范按以下顺序

.declaration-order {
    /* 定位 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    float: right;
    /* 盒模型 */
    display: block;
    width: 100px;
    height: 100px;
    /* 外观 */
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background-color: #f5f5f5;
    /* 排版 */
    color: #333;
    text-align: center;
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    /*透明度*/
    opacity: 1;
}

采用flex布局
项目上线前先添加兼容性前缀 Autoprefixer，而后压缩代码

二、CSS框架

4、Javascript规范

一、Javascript引入方式

通常状况使用外部js：统一使用<script>标签，少用@import（原生import有加载性能问题），使用webpack等打包工具的项目使用import命令除外。js在body底部紧贴</body>引用，先引框架js的再引工具类js而后私有js的最后写内部的js。以下
```
<script src="./plugins/layui/layui.js"></script>
 <script src="./plugins/vue/vue.min.js"></script>
 <script src="./plugins/js/util.js"></script>
 <script src="./js/index.js"></script>
 <script> ... </script>
```
优势：
1.页面代码跟js代码实现有效分离，下降耦合度
2.便于代码的维护和扩展
3.有利于代码的复用
内部js: 在直接在页面的<script></script>标签内写js代码，vue项目多用此方式
```
<script>
    layui.use('console', layui.factory('console'));
</script>
```
优势：内部js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护
缺点：js代码仅限于当前页面的使用，代码没法被多个页面重复使用，致使代码冗余度较高
行内js: 直接嵌套在html的语句
```
<input type="button" onclick="alert('行内引入')" value="button" name="button">
```
开发中不推荐这种方式
1.由于这种方式跟页面结构代码耦合性太强了，后期维护很不方便，
2.并且这种方式在开发过程当中会致使产生不少的冗余代码

二、Javascript代码编写

目前只在使用了webpack等打包工具的时候才能用ES6语法，因此通常项目仍是采用ES5。
一条语句一般以分号做为结束符。
变量必须先声明再使用，即在每一个做用域开始前声明这些变量。

函数声明使用表达式方式

// bad
  const fn= function () {
  };
// good
  function fn() {
  }

除了三目运算，if,else等禁止简写

console.log(name);
 // 不推荐的书写
 if (true)
     alert(name);
 console.log(name);
 // 不推荐的书写
 if (true)
 alert(name);
 console.log(name)

 // 正确的书写
 if (true) {
     alert(name);
 }

使用三元运算符，但不要滥用

(type==1?(agagin==1?'再售':'已售'):'未售')
 // 再多就不要用三元运算符！

三、Javascript框架以及插件

必须掌握jQuery和Vue；
工做中jQuery通常用在维护老项目，新项目通常都采用Vue。其余框架稍做了解，遇到了去查文档。（业余时间能够自学angular和React以及你喜欢的框架）
移动端：Mint UI
PC端官网、商城： Element
PC端后台管理系统：layui或者 iView
轮播图：swiper
滚动插件：iScroll 或 better-scroll
响应式官网：尽可能使用媒体查询自定义样式，不推荐使用bootstrap(由于我不喜欢记那一堆类名^_^)。
将经常使用的功能封装在util.js中，你们共同完善；方便之后使用。

参考
Code Guide by @AlloyTeam
页面前端规范