前端开发规范文档
基本原则
- 符合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属性显示顺序：
- 显示属性
- 元素位置
- 元素属性
元素内容属性
.header {
/*显示属性*/display || visibilitylist-styleposition top || right || bottom || leftz-indexclearfloat/*自身属性*/width max-width || min-widthheight max-height || min-heightoverflow || clipmarginpaddingoutlineborderbackground/*文本属性*/colorfonttext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorcontent
};
- 兼容多个浏览器时，将标准属性写在底部。
-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规范
命名方法
- 常量名：全部大写并且单词间用下划线分隔:
如：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文件注释需要描述清楚功能；
- 公共组件注释需描述清楚传参、功能、使用场景、使用方法等
比眉伴天荒
Myth丶恋晨
小鱼儿
还没有评论，来说两句吧...