关于前端:代码规范

35次阅读

共计 2094 个字符,预计需要花费 6 分钟才能阅读完成。

Pascal Case - 大驼峰 规定:首字母大写
Camel Case - 小驼峰 规定:首字母小写

一. 文件命名

  1. 不含空格;
  2. 只小写,不大写;(README 除外)
  3. 多个单词应用 – 连贯;
  4. 。。。

二. 函数命名
函数名应该说它做了什么(这样使得更易读)
规定:动词 + 名词 前缀为动词 如:can, has, is, get, set

三. 变量命名

  1. 应用有意义的变量名(可读性)
  2. 雷同类型的变量应用雷同的单词(对立)
  3. 应用可搜寻的变量名:例如我须要定义一天多少毫秒 并不是间接写 86400000 而是定义一个可读的变量进行赋值。
    const MILLISECONDS_PER_DAY = 60 60 24 * 1000; //86400000;
    这样做的益处是 1. 晓得此处数字的具体含意 2. 可全局搜这个变量
  4. 应用可解释的变量 例如 const [_, city, zipCode] = address
  5. 防止应用不明确变量名 如 item 缩写为 i,location 缩写为 l
  6. 防止新增不必要的变量名 如 const car = {name: ”, color: ”} 而不是 const car = {carName: ”, carColor: ”}
  7. 应用默认参数 例如 const breweryName = name || “Hipster Brew Co.”; 这里的 breweryName 就会比拟多余和必要了
    function createMicrobrewery(name = “Hipster Brew Co.”) {
    // …
    }

详见:https://github.com/ryanmcderm…

四. 常量命名:全大写,单词用下划线宰割

扩大
函数定义

  1. 函数参数倡议 2 个或更少
    函数参数应该防止应用 2 个以上的参数,如果超过 可应用对象的模式传入
    为了明确函数冀望的属性,你能够应用 ES2015/ES6 解构语法
  2. 函数应该只做一件事
    当函数做不止一件事时,它们就更难组合、测试和推理。当您能够将一个函数隔离为一个操作时,就能够很容易地重构它,并且您的代码读起来也会更加清晰。
  3. 函数名应该说它做了什么

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)) {
// …
}

正文完
 0