javascript 源代码-编写简约 JavaScript 代码的 10 种方法

bendan520 javascript

2023-08-26 0 4,036 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

回复下方公众号【面试宝典】，即可获取为你整理的107页后端笔试题。

Javascript 是最常用的编程语言之一，超过 97% 的网站都使用它。近年来，随着很多框架的推出，包括从前端、Web后端到跨平台联通应用、甚至游戏的各个方面，Javascript的普及度已经达到了非常高的水平。

编写干净且可读的代码是建立业务逻辑之后最重要的事情之一。根据我与多个组织、初创公司和项目合作的经验，我可以保证处理糟糕的代码是一场噩梦。它破坏了开发过程，延迟了发布，并使使用它的开发人员感到沮丧。

为此，我们需要编译一些干净且可读的代码。在明天的内容中，我将与大家分享我编程干净代码的一些基本方法，希望对大家有所帮助。

1. 变量名——保留其含义

您的变量名称应该清楚地解释它们的用途。据报道，它可以防止首字母缩略词和难发音的短语的混淆。我不知道如何指出这一点，让我们看下面的例子：

// Bad 
const yyyymmdstr = moment().format("YYYY/MM/DD");
// Good
const currentDate = moment().format("YYYY/MM/DD");

2. 变量名称 - 让它们可搜索

虽然有些文章会告诉您在可以使用单态方法时不要创建变量，但这不应该扩展到使用常量，这会使代码更难以阅读和搜索。据悉，正确的做法是将它们存储在const变量中，并使用CONSTANT_CASE来命名变量。

例如，看看下面的代码片段：

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

3. 防止变量的心理映射

最好在 array.forEach() 中显式命名变量，而不是使用事后可能没有意义的缩写。

// BAD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});

// GOOD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

4. 防止不必要的上下文

如果类或对象名称已经告诉您它代表什么，请不要再次将该信息添加到变量名称中。在下面的示例中，由于我们已经知道我们正在谈论 Car 或 PaintCar，因此您无需在变量中再次提及上下文 Car。

// BAD
const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

// GOOD
const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car, color) {
  car.color = color;
}

5. 在函数中使用默认参数

防止在函数中使用泄漏或条件，以保持事物的清洁。更重要的是，请记住，您的函数只会为未定义的参数提供值javascript 源代码，默认值不会替换任何其他错误值。

// BAD
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}

// GOOD
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

6. 明智地使用函数参数

根据经验，请尝试将函数参数的数量限制为 2 个或最多 3 个。如果需要那么多参数，则您的函数可能会执行过多操作。而且，如果您仍然需要它，请使用 JavaScript 对象作为参数。为了使函数期望的属性显而易见，可以使用 ES6 解释语法。

// BAD
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true);

// GOOD 
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

7. 一个函数应该做一件事

不要忘记函数的用途 - 为代码添加模块化。每个函数只执行一项任务的较小函数将确保您的代码易于编写、测试和理解。切勿为单个功能设置多个目标。

// BAD
function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

// GOOD 
function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

8. 函数名称——让它们有意义

确保写出函数名称以清楚地解释该函数的作用。不明确的函数名称意味着读者必须查看函数定义和逻辑才能理解它们的作用。

// BAD
function addToDate(date, month) {
  // ...
}

const date = new Date();

// It's hard to tell from the function name what is added
addToDate(date, 1);

// GOOD
function addMonthToDate(month, date) {
  // ...
}

const date = new Date();
addMonthToDate(1, date);

9.防止重复代码——让代码更短、更简洁

最烦人的是多个代码段中出现一堆相同或相似的行。我们都去过那里。这通常是由于在 2 个或更多地方实现的各个逻辑略有不同。另外，想想如果有人发现逻辑错误，现在他们必须四处寻找并改变它，他们会做噩梦。

javascript 源代码-编写简约 JavaScript 代码的 10 种方法

10. 不要使用标志作为函数参数

为什么需要标志作为函数参数？你的函数什么也没做，只是出于一个明显的原因。从第 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}`);
}