脚本宝典收集整理的这篇文章主要介绍了一篇文章教你写出干净的JavaScript代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一段干净的代码，你在阅读、重用和重构的时候都能非常轻松。编写干净的代码非常重要，因为在我们日常的工作中，你不是仅仅是在为自己写代码。实际上，你还需要考虑一群需要理解、编辑和构建你的代码的同事。
变量的名称应该是可描述，有意义的， JavaScript 变量都应该采用驼峰式大小写 ( camelCase) 命名。
// Don't ❌ const foo = "JDoe@example.COM"; const bar = "John"; const age = 23; const qux = true; // Do ✅ const email = "John@example.com"; const FirstName = "John"; const age = 23; const isActive = true
布尔变量通常需要回答特定问题，例如：
isActive
didSubscribe
hasLinkedAccount
当对象或类已经包含了上下文的命名时，不要再向变量名称添加冗余的上下文。
// Don't ❌
const user = {
userId: "296e2589-7b33-400a-b762-007b730c8e6d",
userEmail: "JDoe@example.com",
userFirstName: "John",
userLastName: "Doe",
userAge: 23,
};
user.userId;
// Do ✅
const user = {
id: "296e2589-7b33-400a-b762-007b730c8e6d",
email: "JDoe@example.com",
firstName: "John",
lastName: "Doe",
age: 23,
};
user.id;
确保声明有意义且可搜索的常量，而不是直接插入一个常量值。全局常量可以采用 SCREamiNG_SNAKE_CASE 风格命名。
// Don't ❌ setTimeout(clearSessionData, 900000); // Do ✅ const SESSION_DURATION_MS = 15 * 60 * 1000; setTimeout(clearSessionData, SESSION_DURATION_MS);
函数名称需要描述函数的实际作用，即使很长也没关系。函数名称通常使用动词，但返回布尔值的函数可能是个例外 — 它可以采用 是或否 问题的形式，函数名也应该是驼峰式的。
// Don't ❌
function toggle() {
// ...
}
function agreed(user) {
// ...
}
// Do ✅
function toggleThemeSwITcher() {
// ...
}
function didAgreeToAllTerms(user) {
// ...
}
默认参数比 && || 或在函数体内使用额外的条件语句更干净。
// Don't ❌ function PRintAllFilesInDirectory(dir) { const directory = dir || "./"; // ... } // Do ✅ function printAllFilesInDirectory(dir = "./") { // ... }
尽管这条规则可能有争议，但函数最好是有3个以下参数。如果参数较多可能是以下两种情况之一：
// Don't ❌
function sendPushNotification(title, message, image, isSilent, delayMs) {
// ...
}
sendPushNotification("New Message", "...", "http://...", false, 1000);
// Do ✅
function sendPushNotification({ title, message, image, isSilent, delayMs }) {
// ...
}
const notificationconfig = {
title: "New Message",
message: "...",
image: "http://...",
isSilent: false,
delayMs: 1000,
};
sendPushNotification(notificationConfig);
一个函数应该一次做一件事，这有助于减少函数的大小和复杂性，使测试、调试和重构更容易。
/ Don't ❌
function pingUsers(users) {
users.foreach((user) => {
const userRecord = database.lookup(user);
if (!userRecord.isActive()) {
ping(user);
}
});
}
// Do ✅
function pinginactiveUsers(users) {
users.filter(!iSUSErActive).forEach(ping);
}
function isUserActive(user) {
const userRecord = database.lookup(user);
return userRecord.isActive();
}
函数含有布尔标志的参数意味这个函数是可以被简化的。
// Don't ❌
function createFile(name, isPublic) {
if (isPublic) {
fs.create(`./public/${name}`);
} else {
fs.create(name);
}
}
// Do ✅
function createFile(name) {
fs.create(name);
}
function createPubliCFile(name) {
createFile(`./public/${name}`);
}
如果你写了重复的代码，每次有逻辑改变，你都需要改动多个位置。
// Don't ❌
function renderCarsList(cars) {
cars.forEach((car) => {
const price = car.getPrice();
const make = car.getMake();
const brand = car.getBrand();
const nbOfDoors = car.getNbOfDoors();
render({ price, make, brand, nbOfDoors });
});
}
function renderMotorcyclesList(motorcycles) {
motorcycles.forEach((motorcycle) => {
const price = motorcycle.getPrice();
const make = motorcycle.getMake();
const brand = motorcycle.getBrand();
const seatHeight = motorcycle.getSeatHeight();
render({ price, make, brand, nbOfDoors });
});
}
// Do ✅
function renderVehiclesList(vehicles) {
vehicles.forEach((vehicle) => {
const price = vehicle.getPrice();
const make = vehicle.getMake();
const brand = vehicle.getBrand();
const data = { price, make, brand };
switch (vehicle.tyPE) {
case "car":
data.nbOfDoors = vehicle.getNbOfDoors();
break;
case "motorcycle":
data.seatHeight = vehicle.getSeatHeight();
break;
}
render(data);
});
}
在 JavaScript 中，你应该更喜欢函数式模式而不是命令式模式。换句话说，大多数情况下我们都应该保持函数纯。副作用可能会修改共享状态和资源，从而导致一些奇怪的问题。所有的副作用都应该集中管理，例如你需要更改全局变量或修改文件，可以专门写一个 util 来做这件事。
// Don't ❌
let date = "21-8-2021";
function splitIntoDayMonthYear() {
date = date.split("-");
}
splitIntoDayMonthYear();
// Another function could be expecting date as a string
console.LOG(date); // ['21', '8', '2021'];
// Do ✅
function splitIntoDayMonthYear(date) {
return date.split("-");
}
const date = "21-8-2021";
const newDate = splitIntoDayMonthYear(date);
// Original vlaue is intact
console.log(date); // '21-8-2021';
console.log(newDate); // ['21', '8', '2021'];
另外，如果你将一个可变值传递给函数，你应该直接克隆一个新值返回，而不是直接改变该它。
// Don't ❌
function enrollStudentInCourse(course, student) {
course.push({ student, enrollmentDate: Date.now() });
}
// Do ✅
function enrollStudentInCourse(course, student) {
return [...course, { student, enrollmentDate: Date.now() }];
}
// Don't ❌
function isUserNotVerified(user) {
// ...
}
if (!isUserNotVerified(user)) {
// ...
}
// Do ✅
function isUserVerified(user) {
// ...
}
if (isUserVerified(user)) {
// ...
}
// Don't ❌ if (isActive === true) { // ... } if (firstName !== "" && firstName !== null && firstName !== undefined) { // ... } const isUserEligible = user.isVerified() && user.didSubscribe() ? true : false; // Do ✅ if (isActive) { // ... } if (!!firstName) { // ... } const isUserEligible = user.isVerified() && user.didSubscribe();
尽早 return 会使你的代码线性化、更具可读性且不那么复杂。
// Don't ❌
function addUserService(db, user) {
if (!db) {
if (!db.isConnected()) {
if (!user) {
return db.insert("users", user);
} else {
throw new Error("No user");
}
} else {
throw new Error("No database connection");
}
} else {
throw new Error("No database");
}
}
// Do ✅
function addUserService(db, user) {
if (!db) throw new Error("No database");
if (!db.isConnected()) throw new Error("No database connection");
if (!user) throw new Error("No user");
return db.insert("users", user);
}
既能减少复杂度又能提升性能。
// Don't ❌ const getColorBystatus = (status) => { switch (status) { case "success": return "green"; case "failure": return "red"; case "warning": return "yellow"; case "loading": default: return "blue"; } }; // Do ✅ const statusColors = { success: "green", failure: "red", warning: "yellow", loading: "blue", }; const getColorByStatus = (status) => statusColors[status] || "blue";
使用可选链接
const user = {
email: "JDoe@example.com",
billing: {
iban: "...",
swift: "...",
address: {
street: "Some Street Name",
state: "CA",
},
},
};
// Don't ❌
const email = (user && user.email) || "N/A";
const street =
(user &&
user.billing &&
user.billing.address &&
user.billing.address.street) ||
"N/A";
const state =
(user &&
user.billing &&
user.billing.address &&
user.billing.address.state) ||
"N/A";
// Do ✅
const email = user?.email ?? "N/A";
const street = user?.billing?.address?.street ?? "N/A";
const street = user?.billing?.address?.state ?? "N/A";
回调很混乱，会导致代码嵌套过深，使用 Promise 替代回调。
// Don't ❌
getUser(function (err, user) {
getProfile(user, function (err, profile) {
getAccount(profile, function (err, account) {
getReports(account, function (err, reports) {
sendstatistics(reports, function (err) {
console.error(err);
});
});
});
});
});
// Do ✅
getUser()
.then(getProfile)
.then(getAccount)
.then(getReports)
.then(sendStatistics)
.catch((err) => console.error(err));
// or using Async/Await ✅✅
async function sendUserStatistics() {
try {
const user = await getUser();
const profile = await getProfile(user);
const account = await getAccount(profile);
const reports = await getReports(account);
return sendStatistics(reports);
} catch (e) {
console.error(err);
}
}
处理抛出的错误和 reject 的 promise
/ Don't ❌
try {
// Possible erronous code
} catch (e) {
console.log(e);
}
// Do ✅
try {
// Possible erronous code
} catch (e) {
// Follow the most applicable (or all):
// 1- More suitable than console.log
console.error(e);
// 2- Notify user if applicable
alertUserOfError(e);
// 3- Report to server
reportErrorToServer(e);
// 4- Use a custom error handler
throw new CustomError(e);
}
可读的代码使你免于过度注释，因此，你应该只注释复杂的逻辑。
// Don't ❌
function generateHash(str) {
// Hash VARiable
let hash = 0;
// Get the length of the string
let length = str.length;
// If the string is empty return
if (!length) {
return hash;
}
// Loop through every character in the string
for (let i = 0; i < length; i++) {
// Get character code.
const char = str.charCodeAt(i);
// Make the hash
hash = (hash << 5) - hash + char;
// Convert to 32-bit integer
hash &= hash;
}
}
// Do ✅
function generateHash(str) {
let hash = 0;
let length = str.length;
if (!length) {
return hash;
}
for (let i = 0; i < length; i++) {
const char = str.charCodeAt(i);
hash = (hash << 5) - hash + char;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
}
在代码里不需要保留历史版本的注释，想查的话你直接用 git log 就可以搜到。。
// Don't ❌ /** * 2021-7-21: Fixed corner case * 2021-7-15: Improved performance * 2021-7-10: Handled mutliple user types */ function generatecanonicalLink(user) { // const session = getUserSession(user) const session = user.getSession(); // ... } // Do ✅ function generateCanonicalLink(user) { const session = user.getSession(); // ... }
好了，去写出你漂亮的代码吧！🌈
到此这篇关于如何写出干净的JavaScript代码的文章就介绍到这了,更多相关写干净的JavaScript代码内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的一篇文章教你写出干净的JavaScript代码全部内容，希望文章能够帮你解决一篇文章教你写出干净的JavaScript代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。