《如何写出高质量的前端代码》学习笔记
1. 好的命名是成功的一半
见名知意
命名应能自解释，反映代码的意图。好的命名可以让开发者在不查看代码实现的情况下理解变量或函数的用途。
❌ 修改前：
let arr = []; // arr是存储什么的？
✅ 修改后：
let newsList = []; // 新闻列表
去除无意义的词
避免在命名中使用无意义的词，如数据类型后缀，这些词通常不能提供额外的信息。
❌ 修改前：
let newsArr = [];
✅ 修改后：
let newsList = [];
名称要有明显区分
确保命名之间有明显的区别，避免使用相似的命名导致混淆。
❌ 修改前：
let news = {};
let newsData = [];
✅ 修改后：
let newsSummary = {}; // 新闻概要
let newsLabels = []; // 新闻标签
好名字可以念出来
避免使用缩写，确保名称易于沟通。缩写可能导致误解，特别是在团队协作中。
❌ 修改前：
function delProdFun() {}
✅ 修改后：
function deleteProductHandler() {}
拒绝误导
命名应准确反映其功能，避免误导性命名。
❌ 修改前：
function deleteUser(hasPermission) {
if (hasPermission) {
// hasPermission 表达的是无权限
}
}
2. 小而美
拆分函数
将长函数拆分为多个小函数，每个函数只做一件事。这样可以提高代码的可读性和复用性。
❌ 修改前：
function processUserData(userData) {
// 处理用户数据的长函数
}
✅ 修改后：
function getFullName(userData) {
return userData.firstName + ' ' + userData.lastName;
}
function processUserData(userData) {
let processedData = {};
processedData.name = getFullName(userData);
// 其他处理
return processedData;
}
组件化拆分页面
通过组件化开发提升代码可读性，将复杂页面拆分为多个小组件。
示例：
<template>
<div>
<Header/>
<main>
<Banner/>
<AboutUs/>
<Services/>
<ContactUs/>
</main>
<Footer/>
</div>
</template>
3. 清晰的结构
使用卫语句
通过提前return减少嵌套层次，使代码逻辑更清晰。
❌ 修改前：
function getScoreLabel(score) {
if (score > 60) {
if (score > 80) {
return 'A';
} else {
return 'B';
}
} else {
return 'C';
}
}
✅ 修改后：
function getScoreLabel(score) {
if (score <= 60) return 'C';
if (score <= 80) return 'B';
return 'A';
}
switch代替多个if else
使用switch语句简化条件判断，适用于判断条件较多的情况。
❌ 修改前：
function commandHandle(command) {
if (command === 'install') {
install();
} else if (command === 'start') {
start();
}
}
✅ 修改后：
function commandHandle(command) {
switch (command) {
case 'install':
install();
break;
case 'start':
start();
break;
default:
showToast('未知命令');
}
}
4. 简洁有力的表达
简化Bool值返回
直接返回条件表达式，简化代码。
❌ 修改前：
function pass(score) {
if (score >= 60) {
return true;
} else {
return false;
}
}
✅ 修改后：
function pass(score) {
return score >= 60;
}
短路求值
利用短路求值简化代码，减少不必要的条件判断。
示例：
// 改写前
if (condition) {
doSomething();
}
// 改写后
condition && doSomething();
5. 不要玩魔术
数据来源在预期之内
避免不明确的数据来源，确保数据来源清晰。
❌ 修改前：
function hoc(WrappedComponent) {
return class extends React.Component {
render() {
return <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}
✅ 修改后：
function ChildComponent() {
let data = useData();
}
6. 只写必要的注释
注释应解释复杂逻辑或违背直觉的实现，避免写显而易见的注释。
❌ 修改前：
// 用户列表
let list = [];
✅ 修改后：
let userList = [];
7. 良好统一的代码风格
组件选项顺序
在组件开发时，按照逻辑顺序排列组件选项，保持代码一致性。
import顺序
按照系统模块、第三方模块、组件、服务、配置的顺序导入，保持代码整洁。
