前端开发规范文档

基本原则

• 符合web标准，html语义化；
• html，css，JavaScript分离；
• 代码简洁有序，尽可能减少冗余代码，降低服务器的负载；
• 解决pc端各浏览器的兼容性问题，处理移动端各设备适配问题。

通用规范

• CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。
• 文件名统一使用小写英文单词，多个单词用驼峰命名法
• 项目名称建议使用"-“而不是下划线”_"
• 一些浏览器会将以下这些词的作为广告拦截，因此文件命名、ID、CLASS等所有命名避免以下词汇：ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。

HTML规范

• 引入JavaScript库文件，文件名须包含库名称及版本号及是否为压缩版。
• HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。

class
id、name
data-*
src、for、type、href
title、alt
aria-*、role

• 避免使用中文拼音，尽量简易并要求语义化。
• 多用无兼容性问题的HTML内置标签,比如span、em、strong、optgroup、label等，需要自定义HTML标签属性时，首先考虑是否存在已有的合适标签可替换，如果没有，可使用data-为前缀来添加自定义属性，避免使用其他命名方式。
• 标签、属性、属性命名由小写英文、数字和_组成，且所有标签必须闭合;
• 书写链接地址时避免重定向。

href="http://www.kahn1990.com/" //即在URL地址后面加"/"

• HTML中对于属性的定义，确保全部使用双引号，不要使用单引号。

CSS规范

• CSS属性显示顺序：

1. 显示属性
2. 元素位置
3. 元素属性
4. 元素内容属性

 .header {
	/*显示属性*/
	 display || visibility
	 list-style
	 position top || right || bottom || left
	 z-index
	 clear
	 float
	/*自身属性*/
	 width max-width || min-width
	 height max-height || min-height
	 overflow || clip
	 margin
	 padding
	 outline
	 border
	 background
	/*文本属性*/
	 color
	 font
	 text-overflow
	 text-align
	 text-indent
	 line-height
	 white-space
	 vertical-align
	 cursor
	 content
 };

• 兼容多个浏览器时，将标准属性写在底部。

-moz-border-radius:15px;/*Firefox*/
-webkit-border-radius:15px;/*Safari和Chrome*/
border-radius:15px;/*Opera 10.5+，以及使用了IE-CSS3的IE浏览器*//标准属性

• 多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。

button.btn,
input.btn,
input[type="button"]{...};

• 使用z-index属性尽量让z-index的值不要超过150(全站级的除外)，页面中的元素内容的z-index不能超过10(模态框等模块除外，但不能超过150)，不允许直接使用(999~9999)之间的值。

不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用“*”选择符
不要将CSS样式单行书写
避免在CSS中使用！important
避免使用filter
避免使用行内(inline)样式
避免使用“*”设置{margin：0；padding：0；}

• 减少使用影响性能的属性。

//如这些定位或浮动属性，如需使用，优先使用定位
position:absolute;
float:left;

JavaScript规范

1. 命名方法

• 常量名：全部大写并且单词间用下划线分隔:如：CSS_BTN_CLOSE
• 对象的属性或方法名、函数名、变量名使用小驼峰式：小驼峰式 -->如:current、defaultConfig
• 类名(构造器)使用小驼峰式但首字母大写：DefaultConfig

• "()"后面需要跟空格
• "="前后需要跟空格
• ","后面需要跟空格
• JSON对象需格式化对象参数
• 避免额外的逗号。var arr = [1,2,3,];//最后的逗号不要有
• for-in循环中须用hasOwnProperty方法检查成员是否为自身成员，避免来自原型链上的污染。
• 长语句可考虑断行。

TEMP_ONGLIST.replace('{TABLE}', da['results'])
			.replace('{PREV_NUM}', prev)
			.replace('{NEXT_NUM}', next)
			.replace('{CURRENT_NUM}', current)
			.replace('{TOTAL_NUM}', da.page_total);

• 尽量使用严格的条件判断符。用===代替==，用!==代替!=，避免==产生的陷阱。===会先判断两边的值类型，类型不匹配时为false。

//在条件判断时，这样的一些值表示false。
null
undefined与null相等
字符串''
数字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

• 引用对象成员用obj.prop代替obj[“prop”] ，除非属性名是变量。

图片引用

• 命名应用小写英文、数字、_组合，便于团队其他成员理解

注释规范

• 注释 一定要写，并且要写清楚，最好每段代码都有相应注释
• JavaScript、CSS文件注释需要描述清楚功能；
• 公共组件注释需描述清楚传参、功能、使用场景、使用方法等