前端项目常用的一些规范

前端项目规范

摸爬打滚这些年，总结一下前端合作开发中的一些规范，涵盖了js、css、HTML。不管是独立开发还是团队一起协作，都最好是有一套比较严格的代码规范，这样代码看起来更清晰可维护性也好。

js

• 缩进：4个空格2个空格都可以，看自己团队的喜好，如果确定了，则配置tab也为相应的空格数。

• 字符串使用单引号：

let a = '123456'

• 运算符左右两边空格：建议有空格：

let c = a + b

行尾建议无空格

• 分号：个人习惯无分号结尾

• 变量声明：建议全部使用es6中let、const，别使用var

• 条件语句都带上{}

if (true) {
    // ...
}

• 变量命名：使用驼峰命名 appValue

• 常量名：使用大写 APP_VALUE

• 函数名： 驼峰

• js文件名： 驼峰

• 函数注释：写明参数信息和返回值信息

/**
 * 函数功能描述
 *
 * @param {string} argument1 参数1的说明
 * @param {string} argument2 参数2的说明
 * @param {number=} argument3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */

• 判断条件：建议使用全等

a === b

• 使用操作符+ 代替Number，转换字符串为number类型值

+'12'

• 使用 + ‘’，代替String、toString，转换为字符串类型

123 + ''

• 函数功能模块拆分，例如一个大的函数体，里面小的功能代码部分可抽出来作为单独的函数

function a() {
    // xxxx
    b()
}

function b() {
    // xxx
}

• 换行操作符建议在行首

info.isGoodGoodStudy
    && info.isDayDayUp
    && info.success

HTML、Vue

• 文件夹名：驼峰

• 页面文件名： 首字母大写

• vue每个组件都写好name，建议首字母大写，对应路由中，path驼峰、name、component名首字母大写

name: 'Component'

• 长代码超出一定字数换行

<date-picker
    v-model="time"
    value-format="yyyy-MM-dd HH:mm"
    type="datetime"
    placeholder="请选择结束时间"
>
</date-picker>

• 模块与模块直接空格注释

css

• class属性值命名用中杆隔开：app-page-xx

• : 与属性值直接空格

color: #333;

• 尽量少用或者不用伪类选择器。比如nth-child(n)这样的，这种选择器是与元素位置相关的，直接选取了第几个位置的元素。一旦元素所在的节点位置发生改变，该样式就会失效。

• 若组件设为全局样式，则应在最外层dom上设置独一无二class名，例如：user-info-page

• 全局样式写好注释