前端培训二：前端代码规范

[TOC]

html规范

实用为王,减少标签的数量

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

<!--bad-->
<aty-row>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
</aty-row>
<aty-row>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
</aty-row>

<!--better-->
<aty-row>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
    <aty-col span=8></aty-col>
</aty-row>


避免javascript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免，除非必须用

禁忌


【强制】“结构层，行为层，表现层”分离这是基本的原则，页面中不允许出现css内容(包括行内样式和style)
【强制】Js必须放到body结束标签前，禁止放在head标签里面
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用
来人工干预分段，特殊情况除外
原则上，我们【禁止】用  来人为干预图片显示的尺寸，而且建议  标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；


css规范

语法


为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
小图片（必须）sprite 合并
每个样式属性后加 ";"
为了获得更准确的错误报告，每条声明都应该独占一行，禁止将样式写为单行,这个应该是压缩工具做的事
禁止使用行内样式


/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}



声明顺序

同相关的属性声明应当归为一组，并按照下面的顺序排列：


Show or  hide  （显示属性）
Positioning    （定位）
Box model     （盒模型）
Typographic    （排版）
Visual         （视觉）



  由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
  其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。


.declaration-order {
display || visibility
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  float:left; 
  clear:both;
 /* Box-model */
  margin:   10px;
  padding: 10px;
  max-width || min-width
  max-height || min-height
  width: 100px;
  height: 100px;
  /* Typography */
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-overflow:ellipsis;
  text-indent:-9999em;
  white-space:nowrap;
  vertical-align:top;
  cursor:pointer; 
  font: normal 13px "Helvetica Neue", sans-serif;
 /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}



class命名规则


只能包含破折号和小写字母，尽可能短，意义明确
避免过度任意的简写（.btn代表 button，但是 .s 不能表达任何意思）
基于最近的父 class 或基本 class 作为新 class 的前缀
使用.fd-*来标识样式
语义化如 fd-tab、fd-nav，内容优先，表现为辅
表示状态的class，不准单独使用，可以嵌套或者堆叠使用

/* 可以嵌套用 */
.fd-nav .active {
color: red;
}
/* 可以堆叠用 */
.fd-btn.active {
color: red;
}
/* 绝不要单独用！！！ */
.active {
color: red;
}



优化css选择器


避免使用通配规则

class和id选择器都不要限定（div#header）
避免使用后代选择符；通常处理后代选择符开销最高，使用子选择符更高效


自己写的z-index的值不能超过100；页面中的元素内容的z-index不能超过10



JAVASCRIPT 规范

一、语言规范


语句的结尾总是使用分号



【强制】语句的结尾总是使用分号


var foo = bar; // semicolon here.
var foo = function() {
    return true;
};  
function foo() {
    return true;
}  // no semicolon here.



变量使用前必须声明

不要在 ARRAY 上使用 FOR-IN 循环

for in循环会遍历到数组中的原型链中的属性

let arr=[1,2,3]
Array.prototype.xxx=1231235
for(let i in arr){
    console.log(arr[i])
}
// 1
// 2
// 3
// 1231235

用 ARRAY 和 OBJECT 字面量代替 ARRAY 和 OBJECT 构造函数



/* Recommend */
var arr = [x1, x2, x3],
    obj = {
        a: 0,
        b: 1,
        c: 2
    };
/* Not Recommend */
var arr = new Array(x1, x2),
    obj = new Object();



不要给 SETINTERVAL / SETTIMEOUT 传递字符串


/* recommended */
setTimout(function () {
    alter(5)
    //do something 
},2000);
/* Not recommended */
setTimout("alter(5)",2000);



拼接字符串

一般情况使用 + 操作符拼接字符串。如果存在大量的字符串拼接，推荐采用数组 join() 拼接字    符串。
不要使用多行字符串字面量。


/* Recommended */
var myString = 'A rather long string of English text, an error message ' +
    'actually that just keeps going and going -- an error ' +
    'message to make the Energizer bunny blush (right through ' +
    'those Schwarzenegger shades)! Where was I? Oh yes, ' +
    'you\'ve got an error and all the extraneous whitespace is ' +
    'just gravy.  Have a nice day.';

/* Not recommended */
var myString = 'A rather long string of English text, an error\ message \
      actually that just keeps going and going -- an error'


二、编码风格


命名方式


【强制】 命名仅限于数字和字母字符，也可以用下划线，最好不用用$
【强制】常量



使用全大写字母，并用下划线分隔单词，形如：

var  MAX_CONNT=10;
var  URL="http://www.wuweigang.com";


因浏览器支持问题，不要使用关键字和保留字。


【强制】变量


变量名采用小驼峰式命名，首字母小写，每个单词首字母大写，不要在变量中用下划线，名词不要用动词开头, 如： myName。


【强制】文件名


全部使用小写字母并以 .js 结尾,多个单词用分隔符 ‘-’分隔


变量延迟初始化



原始值


1.允许延迟变量初始化，不必在声明变量时初始化。
2.【强制】字符串应该始终使用单引号,避免使用双引号。
3.数字应该用十进制整数或者浮点，或者科学计数法，十六进制整数。
4.避免使用null值，特殊情况除外。
5.避免使用undefined 值，除非要判断一个变量是否定义,typeof操作符




代码格式



【强制】缩进

4个空格，避免使用tab进行缩进

行的长度


​       每行的长度不该超过80个字符，超长的不可分割的代码允许例外，比如复杂的正则表达式。长字符串不在例外之列。


运算符间距


二元运算符前后必有使用一个空格保持表达式的整洁，操作符包括赋值运算符和逻辑运算符

var  found = (values[i] === item);
if (found && (count > 8)){
    //  do  something 
}；
   for( var i = 0; i < values.length; i++){

    }；



括号间距


当使用括号时，紧接左括号之后不应该有空格，紧接右括号之后应该有空格，else前后都应该有个空格。

if(found && (count > 10)) {
    //  do something 
} else {

}



对象的直接量


起始左花括号应当和表达式保持一行


每个属性的名值对应当保持一个缩进，第一个属性应当在左括号后的另起一行


每个属性的名值对应当适应不含引号的属性名，其后紧跟一个冒号（之前不含空格），而后是值


倘若属性值是一个函数类型，函数体应当在属性名之下另起一行，而且其前后均应保留一个空行


一组相关的属性前后可以插入空行，以提升代码的可读性


结束的右括号应当独自占一行



var  object={
    key1:"value1"，
       key2:function(){
             // do something         
         }，    
       key3:"value3"
}



数组和对象的初始化



如果初始值不是很长，就保持写在单行上：

var arr = [1, 2, 3];  // No space after [ or before ].
var obj = {a: 1, b: 2, c: 3};  // No space after { or before }

初始值占用多行时，缩进 4 个空格。



var inset = {
    top: 10,
    right: 20,
    bottom: 15,
    left: 12
};



比较长的标识符或者数值，不要为了让代码好看些而手工对齐。 如:


/* Recommended */
CORRECT_Object.prototype = {
    a: 0,
    b: 1,
    lengthyName: 2
};

/* Not recommended */
WRONG_Object.prototype = {
    a          : 0,
    b          : 1,
    lengthyName: 2
};



逗号位置


/* Recommended  right */

var a = 1,
    b = 3,
    c;

/* Not Recommended  error*/

var a = 1
    ,b
    ,c;



字符串



【强制】 字符串使用单引号，只有 JSON 中的字符串属性值使用双引号。
字符串中的 HTML 属性使用双引号。


/* Recommended */
var string = 'this is a string',
    object = {
        str: "this is a JSON string"
    };
/* Not recommended */
var string = "this is a string",
    object = {
        str: 'this is a JSON string'
    };



对象

对象的最后一个属性值后面不要写逗号（某些浏览器会报错）。


/* Recommended */
var obj = {
    a: 1,
    b: 2,
    c: 3
};
/* Not recommended */
var obj = {
    a: 1,
    b: 2,
    c: 3,
};



条件判断的陷阱

在if判断中，使用===作比较,避免掉入==造成的陷阱


在条件判断时，这样的一些值表示false：null，undefined，空字符串''，数字0，NaN

而在==时，则会有一些让人难以理解的陷阱,如：

(function () {
    var undefined;
    undefined == null; // true 
    1 == true; //true 
    2 == true; // false 
    0 == false; // true 
    0 == ''; // true 
    NaN == NaN;// false 
    [] == false; // true 
    [] == ![]; // true 
})();






对于不同类型的 == 判断，有这样一些规则，顺序自上而下：


undefined与null相等
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型




所以，对于0、空字符串的判断，建议使用 === 。===会先判断两边的值类型，类型不匹配时为false。


操作DOM的时候，尽量减少重绘，有js操作的时候不管是class或者id命名都以js-开头


查看原文：http://yuyy.info/%e5%ad%a6%e4%b9%a0%e5%88%86%e4%ba%ab/%e5%89%8d%e7%ab%af%e5%9f%b9%e8%ae%ad%e4%ba%8c%ef%bc%9a%e5%89%8d%e7%ab%af%e4%bb%a3%e7%a0%81%e8%a7%84%e8%8c%83/