代码格式规范化, 代码风格统一

样式规范

使用scss嵌套写法,scoped为组件作用域, class类名尽量语义化, 方便阅读且缩短类名长度可使用后缀衔接的方式

如:

<stylelang="scss"scoped>
    /* 这是注释 */
    .pvc-test-tree {
        .test-tree-title {
            .title-icon {
                color: '#ccc';
            }
        }
        .test-tree-content {
            .content-table {}
        }
    }
</style>

代码格式化

样式书写分紧凑格式和展开格式, 统一用展开格式书写样式

/* 不推荐 */
.jdc { display: block;width:50px;}
/* 推荐 */
.jdc {
    display: block;
    width: 50px;
}

代码大小写

样式选择器, 属性名, 属性值全部小写, 属性字符串允许使用大小写

/* 推荐 */
.jdb {
    display: block;
}
/* 不推荐 */
.JDC {
    DISPLAY: BLOCK;
}

选择器

• 尽量少用通配符选择器 *

• 不使用 ID 选择器

• 不使用无具体语义定义的标签选择器

/* 不推荐 */
* {}
#jdc {}
.jdcdiv {}
/* 推荐 */
.jdc {}
.jdcli {}
.jdclip {}

分号

每个属性声明末尾都要加分号 ;

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

代码易读性

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

.jdc,
    .jdc_logo,
        .jdc_hd {
            color: '#ffo';
        }
.nav {
    color: '#fff';
}

属性值引号

css属性值需要用引号时, 统一使用单引号

.jdc {
    font-family: 'Hiragino Sans GB';
}

注释规范

注释以字符 /* 开始, 以字符 */ 结束

/* 注释 */
.jdc {
    display: block;
}

js 书写规范

空格

if-else、for、function...... 与 () {} 之间保留空格

箭头函数 () => {} 保留空格

函数参数之间保留空格

< > = + - * % ？&& || 号两边保留空格

// if-else
if (condition) {

} else {

}

// for
for (let index = 0; index < array.length; index++) {

}
// function
function name(params) {

}
// class
class Event {
    constructor() {

    }
}
// 箭头函数
const init = () => {

}
// 三元表达式
const value = num === 0 ? 1 : 2
// 赋值
const name = 18
// 判断大小
if (num >= 20) return
// 计算
const year = (2000 + 23) * 1
// 对象
const info = {name: 'tom', age: 19}

大括号风格

if (foo) {
    bar();
} else {
    baz();
}

链式赋值

// 禁止
const a = b = c = 1;
// 推荐
const a = 1;
const b = 1;
const c = 1;

变量声明

禁止在一个声明中声明多个变量

// 禁止
const a, b, c;
// 推荐
const a;
const b;
const c;

使用const let 关键字进行变量声明并分组, 禁止不写关键字, 直接暴露在全局上下文, 可能导致与现有变量冲突

const b;
const d;
let a;
let c;
let e;

函数声明

不要在(if, while 等) 中声明函数

// 错误
if (isUse) {
    function test () {
        // do something
    }
}
// 正确
let test;
if (isUse) {
    test = () => {
        // do something
    }
}

不要将参数命名为arguments, 会导致该参数的优先级高于每个函数作用域内原先存在的arguments 对象

// 错误
function foo (name,options,arguments) {
    // ...
}
// 正确
function foor (name,options,args) {

}

不要使用 arguments, 只是一个类数组, 要使用展开运算符 ... ,才是一个真正的数组

// 错误
function test () {
    const args = Array.prototype.slice.call(arguments);
    return args.join('')
}
// 正确
function test (...args) {
    return args.join('')
}

使用函数默认参数, 不要修改函数参数值

// 错误
function handleThings (opts) {
    opts = opts || {};
    // ...
}
// 错误
function handleThings (opts) {
    if (opts === void 0) {
        opts = {}
    }
    // ...
}
// 正确
function handleThings (opts = {}) {
    // ...
}

类&构造函数

使用 class, 避免直接操作 prototype

// 不推荐
function Queue (contents = []) {
    this._queue = [...contents];
}
Queue.prototype.pop = function () {
    const value = this._queue[0];
    this._queue.splice(0,1);
    return value
}

// 推荐
class Queue {
    constructor (contents = []) {
        this._queue = [...contents];
    }
    private pop () {
        const value = this._queue[0];
        this._queue.splice(0,1);
        return value
    }
}

使用 extends 来实现继承

原因: 这是一个不会破坏 instanceof 的内建实现原型式继承的方式

// 错误
const inherits = require('inherits');
function PeekableQueue(contents) {
    Queue.apply(this,contents);
}
inherits(PeekableQueue,Queue);
PeekableQueue.prototype.peek = function () {
    return this.queue[0]
}
// 正确
class PeekableQueue extends Queue {
    public peek () {
        return this.queue[0]
    }
}

构造函数首字母大写

const footItem = new Foo();

类和函数的命名

函数采用小驼峰命名, 类采用大驼峰命名, 类的含义尽可能为名词, 函数为动词

const replayer = new Replayer();
function transTo() {}

类的函数成员和变量成员

• 明确成员的作用域, 必须在成员前标识成员的作用域, private, protect和public

• 变量成员命名采用 '_' 开头

class MyClass {
    private _test;
    public getText() {

    }
}

函数参数个数限制

函数参数个数限定在4个以内, 包含4, 函数参数过长容易漏, 也无法很好扩展

// 不推荐
function trans(num1, num2, isChange, isRevert, isCount) {

}
//推荐
function trans(num1, num2, options: {isChange, isRevert, isCount}) {

}

注释规范

单行注释:

独占一行, // 后跟一个空格, 缩进与下一行被注释说明的代码一致

// 将文本转换成base64
let base64 = trans2Base64(text);

多行注释:

非类和函数避免使用 /**/ 这样的多行注释, 有多行注释内容时, 使用多个单行注释

// 将文本转换成base64
// 目的是为了转base64
let base64 = trans2Base64(text);

类注释:

类必须添加注释, 并符合 jsdoc 导出规范

必须包含类的说明

/**
 *@class
 *@calssdesc 这是对MyClass类的描述
 */
class MyClass {

}

函数/方法注释:

函数/方法必须添加注释, 并符合 jsdoc 导出规范

必须包含类的说明; 有参数和返回值时, 必须有注释标志; 参数和返回值必须包含类型信息和说明; 当函数是内部函数, 外部不可以访问时,可以使用 @inner 来标识; 示范:

/**
 * 求和方法
 * @param {number} p1 
 * @param {number} p2
 * @param {number=} p3(可选)
 * @return {number}
 */
function sum(p1,p2,p3) {
    const p3 = p3 || 10;
    return p1 + p2 + p3;
}

文件注释:

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录; 示范

/**
 * 文件描述
 * @Author: nobady
 * @Date: 2022-04-24 17:14
 * @Last Modified by: somebody
 * @Last Modified time: 2022-04-24 17:14
 */