js规范

变量

对所有变量都使用 const，不要使用 var

const a = 1; const b = 2; 如果引用是可变动的，则使用 let

let count = 1; if (count < 10) { count += 1; }

对象

请使用字面量值创建对象

const a = {}; 请使用对象属性值的简写方式

const language = 'js'; const item = { language, }; 对象属性值的简写方式要和声明式的方式分组

const language = 'js'; const item = { language, age: 25, sex: 'male' };

数组

请使用字面量值创建数组

const items = []; 使用拓展运算符 … 复制数组

const arr = []; const arrCopy = [ ...arr ]; 解构赋值当需要使用对象的多个属性时，请使用解构赋值

const { firstName, lastName } = user; 当需要使用数组的多个值时，请同样使用解构赋值

const arr = [1, 2, 3, 4]; const [ first, second ] = arr; 函数需要回传多个值时，请使用对象的解构，而不是数组的解构

function doSomething () { return { top, right, bottom, left } } const { top, left } = doSomething(); 字符串字符串统一使用单引号的形式 ‘’

const department = 'XSSC' 字符串太长的时候，请不要使用字符串连接符换行 \，而是使用 +

const str = '线上商城线上商城线上商城' + '线上商城线上商城线上商城' + '线上商城手机管车'; 程序化生成字符串时，请使用模板字符串

const test = 'test'; const str = abc${test};

函数

请使用函数声明，而不是函数表达式

function dog() {

} 不要在非函数代码块中声明函数

// 推荐 let test; if (true) { test = () => { // do something } } // 不推荐 if (true) { function test () { // do something } } 不要使用 arguments，可以选择使用 …

（arguments 只是一个类数组，而 … 是一个真正的数组）

// 推荐 function test (...args) { return args.join(''); } // 不推荐 function test () { const args = Array.prototype.slice.call(arguments); return args.join(''); } 不要更改函数参数的值

// 推荐 function test (opts = {}) { // ... } // 不推荐 function test (opts) { opts = opts || {} }

原型

使用 class，避免直接操作 prototype

class Queue { constructor (contents = []) { this.queue = [...contents]; }

pop () { const value = this._queue[0] this.queue.splice(0, 1); return value; } }

对象属性

使用 . 来访问对象属性

const dog = { name: 'hashiqi', } const name = dog.name;

变量声明

声明变量时，请使用 const、let 关键字，如果没有写关键字，变量就会暴露在全局上下文中，这样很可能会和现有变量冲突，另外，也很难明确该变量的作用域是什么。这里推荐使用 const 来声明变量，我们需要避免全局命名空间的污染。 2.将所有的 const 和 let 分组变量命名统一使用驼峰式命名构造函数首字母大写禁止链式赋值链式调用一行一个 css/less规范

代码格式化

样式书写一般有两种：一种是紧凑格式 (Compact)

.test{ display: block;width: 50px;}

一种是展开格式（Expanded

.test{
    display: block;
    width: 50px;
}

推荐：统一使用展开格式书写样式

代码大小写样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */ .test{ display:block; }

/* 不推荐 */ .TEST{ DISPLAY:BLOCK; }

选择器

尽量少用通用选择器 * 不使用 ID 选择器不使用无具体语义定义的标签选择器 /* 推荐 */ .gc {} .gc li {} .gc li p{}

/* 不推荐 */ *{} gc {} .gc div{} 分号每个属性声明末尾都要加分号；

.gc{ height: 100%; width: 100%; }

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

/* 推荐 / .gc { width: 100%; } / 不推荐 */ .gc{ width:100%; }

为单个css选择器或新声明开启新行

/推荐/ .gc { height: 100%; width: 100%; } .nav { height: 100%; width: 100%; } /不推荐/ .gc { height: 100%; width: 100%; }.nav { height: 100%; width: 100%; }

不要为 0 指明单位

/推荐/ .gc { margin: 0 10px; } /不推荐/ .gc { margin: 0px 10px; }

多个单词取名用-隔开

/推荐/ .gc-card { margin: 0 10px; } /不推荐/ .gcCard { margin: 0px 10px; }

可复用属性尽量抽离为页面变量，易于统一维护

@red: red; .gc { color: @red; border-color: @red; }

less函数采用首字母小写的驼峰形式

/* 推荐*/ .setArrow(@borderColor, @borderWidth) { display: inline-block; border-width: @borderWidth @borderWidth 0 0; border-color: @borderColor; border-style: solid; } /* 不推荐*/ ._setArrow() {

} .SetArrow() {

}

后代选择器在less中嵌套书写时，尽量避免使用&书写类名

/* 推荐*/
.menu{
    .menu-item {

    }
}
/*不推荐*/
.menu {
    &__item {

    }
}

运算规范

运算符之间空出一个空格

.gc { width: 100px - 50px; height: 30px / 5; } 注意运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意

// 正确的运算格式 .gc { width: 100px - 50px; width: 100px + 50px; width: 100px * 2; width: 100px / 2; }

属性书写顺序

布局定位属性：display / position / float / clear / visibility / overflow; 自身属性：width / height / margin / padding / border / background; 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … .gc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); }

注释规范

1. 普通注释

文件开头都附上作者及文档简短介绍信息的多行注释例如： /** * @author xxx * @description xxxxxx * xxxxx */ 行内注释采用//，//与注释之间加空格 // 用来显示一个解释的评论 // -> 用来显示表达式的结果， // >用来显示 console 的输出结果， function test() { // 测试函数 console.log('Hello World!'); // >Hello World! return 3 + 2; // ->5 }

2. 函数注释

1.函数都需要写注释 /** * 函数说明 xxxx * @param 描述参数的信息 * @return 描述返回值的信息 * @author 作者信息 */

VUE编写规范

component规范公用组件采用文件夹命名方式，以index导出例：

-- component

-- HeadBar

-- index.vue

component文件夹内部组件，首字母大写，多词采用驼峰形式；

例：

FootBar.vue

前端编码规范

变量

对象

数组

函数

原型