前端开发规范

一、WXML 规范

1. 属性顺序(不必要的情况下)

1. class ( class 是为高可复用组件设计的,所以应处在第一位)
2. id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
3. >src for type href value
4. placeholder title alt
5. aria-\* role
6. required readonly disabled

2. id / class 命名规则

1. 首先根据内容命名,如 header footer
2. 若根据内容无法找到合适的命名,再结合行为表现进行辅助, e.g. col-main blue-box
3. 名字一律小写,多个单词用 - 连接,不能使用下划线和 camel1 命名法, e.g. main-title 可基于最近的父元素名称作为前缀
4. 在不影响语义的情况下,可适当使用缩写,但是缩写只用来表示结构, e.g. col nav btn etc. , 别给我自编.
5. 避免广告拦截词汇 e.g. ad ads adv banner sponsor gg guangg guanggao etc.

3. WXML 注释规范

二、CSS 规范

1. 属性顺序

1. 位置属性 ( position top right z-index display float etc.)
2. 大小 ( width height padding margin etc.)
3. 文字系列 ( font line-height letter-spacing color text-align ect.)
4. 背景 ( background border etc.)
5. 其他 ( animation transition etc.)

2. 属性使用缩写

1. 尽量使用简写 e.g. padding margin font background border border-radius etc.
2. 颜色代码尽量也简写 e.g. 白色 #fff

3. 去掉小数点前面的 0

0.9 => .9

三、JS规范

1. 语言规范

1. 声明变量必须加上 let 关键字.不要再使用 var
2. 优先使用箭头函数
3. 使用模板字符串取代连接字符串

2. 使用分号

如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG

3. 块内函数声明

1. 不要在块内声明一个函数,e.g.
2. 如果确实需要,使用函数表达式来初始化变量

4. 关于循环

1. forEach 是用来循环数组的
2. forEach 不支持 break continue
3. forEach 过程中 arr.push() arr.pop() arr.shift() arr.unshift() arr.reverse() arr.sort() arr.concat() 都可以使用,但是arr.push() 不会改变输出顺序.
4. map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
5. for-in 循环实际是为循环 enumerable2 对象而设计的
6. for–in 是用来循环带有字符串 key 的对象的方法

5. 命名规范

1. 变量名: 必须使用 camel 命名法
2. 参数名: 必须使用 camel 命名法
3. 函数名: 必须使用 camel 命名法
4. 方法/属性: 必须使用 camel 命名法
5. 私有 ( 保护 ) 成员: 必须以下划线开头
6. 常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
7. 类名: 必须使用 pascal8 命名法
8. 枚举名: 必须使用 pascal 命名法
9. 枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
10. 命名空间: 必须使用 camel 命名法

6. 声明

1.  在函数的开始应先用 var let 关键字声明函数中要使用的局部变量
2. 注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释

7. 回调函数规范

1. 回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err

2. 私有函数以及回调函数统一放置在生命周期函数后,每个函数之间用一个空行分离结构,删除 js 文件中未用到的生命周期函数,保持代码的整洁,精简

8. 数据绑定变量定义规范

所有涉及到数据绑定的变量均需在 data 中初始化.禁止在不定义的情况下直接 setData,或者出现 undefined
涉及到数据绑定的变量写 data 中,页面内传递的写在 page 中

9. 函数默认值

所有的函数参数的默认值要写在参数后面

四、组件规范

1. 组件名命名规范

1. 组件在使用时命名以 " x- " 为开头的组件名,若组件名称为多个单词名拼接而成,采用 " - " 连接.
2. 组件标签在 page 页面使用时推荐使用单闭合标签,包含 slot的组件除外

2. 触发事件规范

组件点击触发事件建议用冒号分隔开

3.externalClasses 命名规范

命名格式采用如下形式: x-class-{name}

4. 组件样式规范

命名必须以 x- 开头

五、标点规范

1. JS中一致使用反引号` 或单引号 ‘’ , 不使用双引号
2. WXML CSS JSON 中均应使用双引号