前端通用代码规范


在大型协作项目中多人搭配已经常见,每个人的代码风格规范及ESlint配置各不同,这样会对后期维护代码造成一个很怪的现象,无缘无故多很多警告信息,可读性也不好。
为此初期开发项目的时候,团队会进行代码规范制定,仅对于常用的配置如下

文本缩进

使用空格代替tab缩进,一次缩进4个空格。 sublime text中设置:

"tab_size": 4,
"translate_tabs_to_spaces": true

引入文件

不要指定引入资源所带的具体协议
不推荐

<script src="http://cdn.com/foundation.min.js"></script>

推荐

<script src="//cdn.com/foundation.min.js"></script>

编码格式

JS、CSS、HTML等文件统一使用UTF-8编码 协作开发原则
图标能用web fonts的尽量要求设计师提供svg字体; 不要随意增加全局样式文件,到处引用,容易造成失控;

能封装成组件的尽量封装,不要写太多重复代码,并及时分享给其他同事使用;
已存在的组件若功能欠缺,不要另起炉灶,协调其他同事完善该组件。

HTML 规范 文档类型

使用 HTML5 的文档类型申明: <!DOCTYPE html> IE 兼容模式
IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需 求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

引号

属性值必须带引号,而且是双引号(“”),而不是单引号(“) 。
不推荐

<div class=news-article></div> 
<div class='news-article'></div>

推荐

<div class="news-article"></div>

自定义属性

自定义属性以data-为前缀

<li data-index="0"></li>

书写风格

html结构适当增加空行和注释,提高可读性

<body> 
<header></header>
<main>
<!--内容 -->
<div class="content">
</div>
<!--内容 -->
</main>
<footer></footer>
</body>

基本结构

页面的基本结构

<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--页面内容-->
<script src="main.js"></script>
</body>
</html>

JavaScript规范

全局命名空间污染与 IIFE(立即执行的函数表达式)
总是将代码包裹成一个 IIFE,用以创建独立隔绝的定义域。这一举措可防止全局命名空间被 污染。
IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改。
不推荐

var x=10,
y=100;
console.log(window.x+''+window.y);

推荐

(function(log, w, undefined){ 
'usestrict';
var x=10, y=100;
log((w.x === undefined)+''+(w.y === undefined));
}(window.console.log,window));

严格模式

你应该在你的脚本中启用严格模式,最好是在独立的 IIFE 中应用它。避免在你的脚本第一 行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题
不推荐

 'usestrict';
(function(){ //代码
}());

推荐

(function(){ 
'usestrict';
//代码
}());

变量声明

所有变量声明都放在函数的头部
所有函数都在使用之前定义
不推荐

(function(log){ 
'use strict';
var a=10;
var b=10;

for(var i = 0;i < 10;i++){
var c = a * b * i;
}
function f() {
var d = 100;
var x = function() {
return d * d;
};

log(x());

}(window.console.log));

推荐

(function(log){ 
'use strict';
var a=10,
b=10,
i,
c,
d,
x;
functionf(){}
for(i = 0;i <10; i++){
c=a*b*i;
}

d=100;

x=function(){
return d*d;
};

log(x());

}(window.console.log));

自增和自减运算符

不要使用自增(++)和自减(–)运算符,用 += -= 代替

++x //等同于 x+=1;

规范定义JSON,补全双引号

不推荐

{name:"Tom"}

推荐

{"name":"Tom"}

三元条件判断

不推荐

if(x===10){
return'valid';
}else{
return'invalid';
}

推荐

return x === 10 ? 'valid' : 'invalid' ;

书写风格

代码块之间空一行

var a=1;

function fn(){
//...
}

大括号的位置

表示区块起首的大括号,不要另起一行
不推荐或者错误

block
{
//...
}

推荐

block{

}

分号

不要省略句末的分号。大多数情况下,如果你省略了句尾的分号,JS会自动添加。
因此,有人提倡省略句尾的分号。但麻烦的是,如果下一行的第一个字元是下面这五个字符 之一,JS将不对上一行句尾添加分号:([/+-

x=y
(function(){
...
})();

//等同于

x=y(function(){...})();

相等和严格相等

尽量使用”严格相等”===运算符 因为”相等”==运算符会自动转换变量类型,造成很多意想不到的情况:

0==''//true
1==true//true
2==true//false
0=='0'//true
false=='false'//false
false=='0'//true
"\t\r\n"==0//true

语句的合并

不要将不同目的的语句,合并成一行

//例如
var a=b=0;

//等同于
b=0;
var a=b;

//而不是
var a=0,b=0;

|| 和 && 操作符 不推荐

if(y){
x=y
}else{
x=''
}
if(fn) fn()

推荐

x=y || '';
fn&&fn()

变量命名

  • 全局变量,以G_为前缀,所有字母大写,例如:G_APP_TOKEN

  • 局部变量,驼峰式命名,例如:myName

  • 类,首字母大写,驼峰式命名,例如:SelectBox

  • 函数,驼峰式命名,例如:getName

  • jQuery获取的dom元素,以$为前缀,例如:var$app_name=$(‘#app_name’)

  • 公共变量,以_为前缀,驼峰式命名,例如:_isEdit

  • 命名语义化,尽可能利用英文单词或其缩写

    //全局变量,以G_为前缀,所有字母大写
    var G_APP_TOKEN = 'apptoken';

    //闭包
    ;(function(){
    //公共变量,以_为前缀,驼峰式命名:公共变量指该变量会被多个方法使用,与局部变量区分开
    var _isEdit = true, _name = '';

    //字符串和正则表达式,所有字母大写
    var BASE = 'base',
    DIRNAME_RE = /[^?#]*\//

    //jQuery获取的dom元素,以$为前缀,与其它变量区分开
    var $user_box = $('#user_box')
    //函数,驼峰式命名

    functiongetName(){
    //局部变量,驼峰式命名
    var editPrefix = 'json_'
    if( _isEdit ) {
    return editPrefix + _name
    }
    return _name;
    }

    function setName(name) {
    _name = name;
    }

    //-------------------------------
    //类,首字母大写,驼峰式命名
    function SelectBox(args) {
    //...
    }

    SelectBox.prototype = {
    constrouctor: SelectBox
    //....
    }

    })()

CSS规范

不要使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
不推荐

#content .title{ 
font-size:2em;
}

推荐

.content .title{ 
font-size:2em;
}

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器,这使得它很奇怪

//这个选择器权重高于下面的选择器
#content.title{
color: red;
}

//比这个选择器权重高
html body div .content .news-content .title .content-title .important{
color: blue;
}
```
## CSS选择器中避免标签名
当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果
你只关心你的class(类)名,而不是你的代码元素,这样会更容易维护。
不推荐
``` css
div.content > header.content-header > h2.title{
font-size: 2em;
}

推荐

.content > .content-header > .title{ 
font-size: 2em;
}

选择器尽可能的精确

很多前端开发人员写选择器链的时候不使用直接子选择器。
有时,这可能会导致蛋疼的设计问题并且有时候可能会很耗性能。
然而,在任何情况下,这是一个非常不好的做法
如果你不写很通用的,需要匹配到DOM末端的选择器,
你应该总是考虑直接子选择器。 考虑下面的html:

<article class="contentnews-content">
<span class="title">Newsevent</span>
<div class="content-body">
<div class="titlecontent-title"> Checkthisout</div>
<p>This is a news article content</p>
<div class="teaser">
<div class="title">Buythis</div>
<div class="teaser-content">Yey!</div>
</div>
</div>
</article>

下面的CSS将应用于有title类的全部三个元素。

然后,要解决content类下的title类 和 teaser类下的title类下不同的样式,这将需要更精确的
选择器再次重写他们的样式。
不推荐

.content .title{ 
font-size: 2rem;
}

推荐

.content > .title{ 
font-size: 2rem;
}
.content > .content-body > .title{
font-size: 1.5rem;
}
.content > .content-body > .teaser > .title{
font-size: 1.2rem;
}

缩写属性

CSS提供了各种缩写属性应该尽可能使用,即使在只设置一个值的情况下。 使用缩写属性对于代码效率和可读性是有很有用的。
不推荐

border-top-style : none;
font-family : palatino,georgia,serif;
font-size : 100%;
line-height : 1.6;
padding-bottom : 2em;
padding-left : 1em;
padding-right : 1em;
padding-top : 0;

推荐

border-top : 0;
font : 100%/1.6 palatino , georgia , serif;
padding : 0 1em 2em;

0 和 单位

省略”0”值后面的单位。不要在0值后面使用单位,除非有值。
不推荐

padding-bottom : 0px;
margin : 0em;

推荐

padding-bottom : 0; 
margin : 0;

Class类名的分隔符

使用中划线(-)分隔Class(类)名中的单词。在选择器中不要使用除了中划线(-)以外的任何字符(包括没有)来连接单词和缩写。
不推荐

.demoimage{} 
.error_status{}

推荐

.demo-image{} 
.error-status{}

属性名结束

属性名的冒号后使用一个空格。出于一致性的原因,属性和值(但属性和冒号之间没有空
格)之间始终使用一个空格。
不推荐

h3{
font-weight:bold;
}

推荐

h3{
font-weight: bold;
}

选择器和声明分离

每个选择器和属性声明总是使用新的一行。
不推荐

a:focus, a:active{
position: relative;
top: 1px;
}

推荐

h1,
h2,
h3{
font-weight: normal;
line-height: 1.2;
}

CSS引号

属性选择器或属性值用双引号(“”),而不是单引号(“)括起来。 url()不要使用引号。
不推荐

@import url('//cdn.com/foundation.css');

html{
font-family: 'opensans',arial,sans-serif;
}
body:after{
content: 'pause';
}

推荐

@import url(//cdn.com/foundation.css);
html{
font-family: "opensans", arial, sans-serif;
}
body:after{
content:"pause";
}

参考
Web前端规范
前端编码规范