文件夹/文件的命名统一用小写
保证项目有良好的可阅读性。
因为文件命名统一小写,所以引用依赖也需要注意大小写问题
命名方式:小驼峰
命名规范:前缀名词
命名建议:语义化 案例
// 友好
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
命名方式:全部大写
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词
命名建议:语义化
案例
const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
命名方式:小驼峰式命名法。
命名规范:前缀应当为动词。
命名建议:语义化
案例
// 是否可阅读
function canRead(): boolean {
return true;
}
// 获取名称
function getName(): string {
return this.name;
}
命名方式:大驼峰式命名法,首字母大写
命名规范:前缀为名称。
命名建议:语义化
案例
class Person {
public name: string;
constructor(name) {
this.name = name;
}
}
const person = new Person('mevyn');
公共属性和方法:跟变量和函数的命名一样。
私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。
案例
class Person {
private _name: string;
constructor() { }
// 公共方法
getName() {
return this._name;
}
// 公共方法
setName(name) {
this._name = name;
}
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn
const person = new Person('mevyn');
3.5 css(class、id)命名规则 BEM 什么是BEM
我们还是使用大团队比较常用的BEM模式
(1)class命名使用BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区块,功能以及样式来给元素命名。这三个部分使用__与--连接(这里用两个而不是一个是为了留下用于块儿的命名)。
命名约定的模式如下:
.block{}
.block__element{}
.block--modifier{}
block 代表了更高级别的抽象或组件
block__element 代表 block 的后代,用于形成一个完整的 block 的整体
block--modifier代表 block 的不同状态或不同版本
通用约定:
- As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性
- As long as necessary(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。
必须独占一行。//
避免使用 /…/ 这样的多行注释。有多行注释内容时,使用多个单行注释。
函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识。 参数和返回值注释必须包含类型信息和说明。 当函数是内部函数,外部不可访问时,可以使用 @inner 标识。
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。
我们通过引入 eslint 来强制开发人员来遵守这些规范
以下是eslint的配置以及相关需要准守的书写规范,可通过实际场景进行调整
-
no-cond-assign 禁止条件表达式中出现赋值操作符
-
no-constant-condition 禁止在条件中使用常量表达式
-
no-control-regex 禁止在正则表达式中使用控制字符
-
no-dupe-args 禁止 function 定义中出现重名参数
-
no-dupe-keys 禁止对象字面量中出现重复的 key
-
no-duplicate-case 禁止出现重复的 case 标签
-
no-empty 禁止出现空语句块
-
no-empty-character-class 禁止在正则表达式中使用空字符集
-
no-extra-boolean-cast 禁止不必要的布尔转换
-
no-extra-semi 禁止不必要的分号
-
no-func-assign 禁止对 function 声明重新赋值
-
no-inner-declarations 禁止在嵌套的块中出现变量声明或 function 声明
-
no-invalid-regexp 禁止 RegExp 构造函数中存在无效的正则表达式字符串
-
no-obj-calls 禁止把全局对象作为函数调用
-
no-regex-spaces 禁止正则表达式字面量中出现多个空格
-
no-sparse-arrays 禁用稀疏数组
-
no-unexpected-multiline 禁止出现令人困惑的多行表达式
-
no-unreachable 禁止在return、throw、continue 和 break 语句之后出现不可达代码
-
no-unsafe-finally 禁止在 finally 语句块中出现控制流语句
-
no-unsafe-negation 禁止对关系运算符的左操作数使用否定操作符
-
valid-typeof 强制 typeof 表达式与有效的字符串进行比较
-
no-case-declarations 不允许在 case 子句中使用词法声明
-
no-empty-pattern 禁止使用空解构模式
-
no-fallthrough 禁止 case 语句落空
-
no-global-assign 禁止对原生对象或只读的全局对象进行赋值
-
no-octal 禁用八进制字面量
-
no-redeclare 禁止多次声明同一变量
-
no-self-assign 禁止自我赋值
-
no-useless-escape 禁用不必要的转义字符
-
no-undef 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
-
no-unused-vars 禁止出现未使用过的变量
-
no-mixed-spaces-and-tabs 禁止空格和 tab 的混合缩进
-
constructor-super 要求在构造函数中有 super() 的调用
-
no-const-assign 禁止修改 const 声明的变量
-
no-dupe-class-members 禁止类成员中出现重复的名称
-
no-this-before-super 禁止在构造函数中,在调用 super() 之前使用 this 或 super
-
require-yield 要求 generator 函数内有 yield