前端开发规范文档

- 日理万妓 2023-02-16 12:19 1阅读 0赞

### 基本原则 ###

*  符合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文件注释需要描述清楚功能；
 *  公共组件注释需描述清楚传参、功能、使用场景、使用方法等