誰不想寫出乾淨的代碼？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 來保持漂亮的代碼。

這個插件將會節省你花在格式化代碼上的時間。得益於它，你能夠利用這部分時間將更多的精力放在代碼質量上。

❤️ 愛心三連擊

經過閱讀，若是你以爲有收穫的話，能夠愛心三連擊！！！