Pascal Case -大驼峰 规则：首字母大写
Camel Case -小驼峰 规则：首字母小写
一.文件命名
- 不含空格；
- 只小写，不大写；（README除外）
- 多个单词使用 - 连接；
- 。。。
二.函数命名
函数名应该说它做了什么（这样使得更易读）
规则：动词+名词 前缀为动词 如：can, has, is, get, set
三.变量命名
- 使用有意义的变量名（可读性）
- 相同类型的变量使用相同的单词（统一）
- 使用可搜索的变量名：例如我需要定义一天多少毫秒 并不是直接写 86400000 而是定义一个可读的变量进行赋值。
const MILLISECONDS_PER_DAY = 60 60 24 * 1000; //86400000;
这样做的好处是 1.知道此处数字的具体含义 2.可全局搜这个变量 - 使用可解释的变量 例如 const [_, city, zipCode] = address
- 避免使用不明确变量名 如 item 缩写为 i，location 缩写为 l
- 避免新增不必要的变量名 如 const car = { name: '', color: ''} 而不是 const car = { carName: '', carColor: ''}
- 使用默认参数 例如 const breweryName = name || "Hipster Brew Co."; 这里的 breweryName 就会比较多余和必要了
function createMicrobrewery(name = "Hipster Brew Co.") {
// ...
}
详见：https://github.com/ryanmcderm...
四. 常量命名：全大写，单词用下划线分割
扩展
函数定义
- 函数参数建议2个或更少
函数参数应该避免使用2个以上的参数，如果超过 可使用对象的形式传入
为了明确函数期望的属性，你可以使用ES2015/ES6解构语法 - 函数应该只做一件事
当函数做不止一件事时，它们就更难组合、测试和推理。当您可以将一个函数隔离为一个操作时，就可以很容易地重构它，并且您的代码读起来也会更加清晰。 - 函数名应该说它做了什么
4.函数应该通过拆分功能来优化结构
大概意思就是说 如果你需要在一个函数内做一件事（注意跟2的区别）而这件事需要复杂的功能、流程实现
这个时候 可以去当前函数内划分一些细的功能点，在函数内进行定义并且使用 这样可以使你的函数内部更清晰 易懂 易维护
5.尽可能的去避免重复代码
学会抽象代码，同一功能考虑可复用性，这样既避免了多余的代码 也使结构更加清晰
6.使用 Object.assign 设置默认对象
7.不要使用标记去作为函数参数
例如 bad
function createFile(name, temp) {
if (temp) {
fs.create(`./temp/${name}`);} else {
fs.create(name);}
}
good
function createFile(name) {
fs.create(name);
}
function createTempFile(name) {
createFile(./temp/${name});
}
8.避免函数造成的副作用
例如 1）在函数内对全局变量进行赋值
2）函数内直接操作传入参数的对象 应考虑使用深、浅拷贝
bad
const addItemToCart = (cart, item) => {
cart.push({ item, date: Date.now() });
};
good
const addItemToCart = (cart, item) => {
return [...cart, { item, date: Date.now() }];
};
8.不要在全局定义函数，这样会污染全局 导致库与库之间的冲突
bad
Array.prototype.diff = function diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
};
good
class SuperArray extends Array {
diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));}
}
9.函数式编程
简单来讲 就是避免造轮子，使用现有的函数、函数库 来实现你的功能
不仅代码更简洁，实现也会非常方便
10.封装条件语句
bad
if (fsm.state === "fetching" && isEmpty(listNode)) {
// ...
}
good
function shouldShowSpinner(fsm, listNode) {
return fsm.state === "fetching" && isEmpty(listNode);
}
if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
// ...
}
11.避免使用双重否定（垃圾代码）
例如
function isDOMNodeNotPresent(node) {
// ...
}
// is not ! 这是非常糟糕的看起来
if (!isDOMNodeNotPresent(node)) {
// ...
}