谁不想写出干净的代码？7 个技巧，让你的同事爱上你的代码

前言

原文地址： https://medium.com/javascript... 做者：Amy J. Andrews

你的同事："这个代码的做者是谁？"

指望："是我！" 你会自豪地回答，由于该代码像公主同样美丽。

现实："不，不是我！" 你说谎是由于该代码像野兽同样丑陋。

如今，若是你想让指望成为现实，请继续阅读。

1 使用有意义的变量命名

使用有意义的名称，这会让你一眼就知道是什么意思。

// 不推荐
let xyz = validate(‘amyjandrews’);
// 推荐
let isUsernameValid = validate(‘amyjandrews’);

将集合类型命名为复数是有意义的。所以，不要忘记 s：

// 不推荐
let number = [3, 5, 2, 1, 6];
// 推荐
let numbers = [3, 5, 2, 1, 6];

描述函数作的事。因此，一个函数的命名应该是个动词。

// 不推荐
function usernameValidation(username) {}
// 推荐
function validateUsername(username) {}

对于 boolean 类型的命名须要以 is 做为开始。

let isValidName = validateName(‘amyjandrews’);

不要直接使用常量，由于随着时间的推移，你可能会这样："这 TM 是什么？"。最好的是在使用以前命名好须要的常量。

// 不推荐
let area = 5 * 5 * 3.14;
// 推荐
const PI = 3.14;
let radius = 5;
let area = PI * radius * radius;

对于回调函数，不要偷懒，只是命名变量为一个字母，例如 h、j、d（可能即使是你，这些命名的主人，都不知道它们是什么意思）。长话短说，若是变量是我的 person，传个 person；若是是本书 book，传个 book：

// 不推荐
let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’];
books.forEach(function(b) {
  // …
});
// 推荐
let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’];
books.filter(function(book) {
  // …
});

2 抛出信息丰富的异常

"An error occurs."

或者只是：Error.

每当我在某些 app 或网站中看到这样的错误，若是我做为用户，我会讨厌它。我作的什么是错误的？是我致使的这个错误？那么错误是什么？你并无告诉我，接下来我应该怎么作？

你的用户可能会和我有一样的感觉，有时他们将会卸载你的 app，并不会再安装。

其实，写一个清楚的错误消息不是很难的事。

若是此时没有链接网络，则：

showMessage(‘No internet connection! Please check your connection and try again!’);

若是用户忘记输入信息，则：

showMessage(‘Please enter your username’);

更重要的是，一个清楚的错误能够帮助你快速定位 bug，而且节省你不少开发的时间。

if (error) {
  throw new Error(‘validation.js:checkUser: special characters are now allowed’);
}

以上这些就是你能够参考的错误消息格式。

3 尽量早地 return

请看下面这段代码：

function login(username, password) {
  if (isValid(username)) {
    // Log in
  } else {
    showMessage(‘Username is not valid’);
  }
}

其实，这里 else 的部分是不须要的。咱们应该经过尽早返回一个信息来移除它：

function login(username, password) {
  if (!isValid(username)) {
    showMessage(‘Username is not valid’);
    return;
  }
  // Log in
}

这会让你的代码变得更加清晰。边缘条件应该放在较早的位置，而后再放置较长的部分，它要处理更多的逻辑。

4 不要一个函数太多的权利

每一个函数应该只承担一项责任。不要出现一个强大的函数作太多事状况。

function validateAndLogin() {
  // Do a lot of things here
}

and 这个单词不该该是函数名的一部分。Add 会致使添加更多的责任到函数中，这从长远看来弊大于利。

下面这种写法是最好的：

function validate() {
  // Only validate
}
function login() {
  // Only login
}

5 避免反作用

在函数外的任何东西都不是它的业务。因此，函数不该该接触到它们中的任何一个。

例如：

var number = 3;
function changeNumber(add) {
  number = 2 + add;
  return number;
}
changeNumber();

当你调用一个改变 number 的函数，number 变量的值将会被改成 6。这是个真实存在的问题，由于有时你对改变了全局变量一无感知。因此，你应该在你的项目避免产生反作用。

那要怎么作？经过使用纯函数。

上面这个例子能够改为这样：

function addThree(summand) {
  const constant = 3;
  const sum = summand + constant;
  return sum;
}

6 建立模块

当你建立一些函数。它们彷佛在作相似的动做。例如，验证用户名和验证密码。那么，你会感受到它们能够分到一个模块中。这里咱们称之为验证模块。

const validateUsername = function (username) {
  // Validate username
};
const validatePassword = function (password) {
  // Validate password
};
Module.exports = {
  validateUsername,
  validatePassword
};
const { 
  validateUsername,
  validatePassword
} = require(‘./validation’);
let isUsernameValid = validateUsername(‘amyjandrews’);

7 使用代码格式化插件

我大多数的项目都是用 VSCode 开发的，若是你也在使用 VSCode，请确认安装了 Prettier 来保持漂亮的代码。

这个插件将会节省你花在格式化代码上的时间。得益于它，你能够利用这部分时间将更多的精力放在代码质量上。

❤️ 爱心三连击

经过阅读，若是你以为有收获的话，能够爱心三连击！！！