本文最后更新于 1403 天前，其中的信息可能已经有所发展或是发生改变。
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-开头
