如何寫出優雅的 JS 代碼，變量和函數的正確寫法

時間  2020-05-12
標籤 如何 寫出 優雅 代碼 變量 函數 正確 寫法 欄目 JavaScript 简体版
原文   原文鏈接
做者：ryanmcdermott
譯者：前端小智
來源：github
點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。javascript

在開發中，變量名，函數名通常要作到清晰明瞭，儘可能作到看名字就能讓人知道你的意圖，因此變量和函數命名是挺重要，今天來看看若是較優雅的方式給變量和函數命名。前端

變量

使用有意義和可發音的變量名

// 很差的寫法
const yyyymmdstr = moment().format("YYYY/MM/DD");

// 好的寫法
const currentDate = moment().format("YYYY/MM/DD");

對同一類型的變量使用相同的詞彙

// 很差的寫法
getUserInfo();
getClientData();
getCustomerRecord();

// 好的寫法
getUser();

使用可搜索的名字

咱們讀的會比咱們寫的多得多，因此若是命名太過隨意不只會給後續的維護帶來困難，也會傷害了讀咱們代碼的開發者。讓你的變量名可被讀取，像 buddy.js 和 ESLint 這樣的工具能夠幫助識別未命名的常量。java

// 很差的寫法
// 86400000 的用途是什麼？
setTimeout(blastOff, 86400000);

// 好的寫法
const MILLISECONDS_IN_A_DAY = 86_400_000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

使用解釋性變量

// 很差的寫法
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);


// 好的寫法
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

避免費腦的猜想

顯式用於隱式node

// 很差的寫法
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // 等等，「l」又是什麼？
  dispatch(l);

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

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。git

無需添加沒必要要的上下文

若是類名/對象名已經說明了，就無需在變量名中重複。github

// 很差的寫法
const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car) {
  car.carColor = "Red";
}
// 好的寫法
const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car) {
  car.color = "Red";
}

使用默認參數代替邏輯或(與)運算

// 很差的寫法
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}
// 好的寫法
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

函數

函數參數（理想狀況下爲2個或更少）

限制函數參數的數量是很是重要的，由於它使測試函數變得更容易。若是有三個以上的參數，就會致使組合爆炸，必須用每一個單獨的參數測試大量不一樣的狀況。面試

一個或兩個參數是理想的狀況，若是可能，應避免三個參數。 除此以外，還應該合併。大多數狀況下，大於三個參數能夠用對象來代替。編程

// 很差的寫法
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

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

// 好的寫法
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

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

函數應該只作一件事

這是目前爲止軟件工程中最重要的規則。當函數作不止一件事時，它們就更難組合、測試和推理。能夠將一個函數隔離爲一個操做時，就能夠很容易地重構它，代碼也會讀起來更清晰。設計模式

// 很差的寫法
function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

// 好的寫法

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

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

函數名稱應說明其做用

// 很差的寫法
function addToDate(date, month) {
  // ...
}

const date = new Date();

// 從函數名稱很難知道添加什麼
addToDate(date, 1);

// 好的寫法
function addMonthToDate(month, date) {
  // ...
}

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

函數應該只有一個抽象層次

當有一個以上的抽象層次函數，意味該函數作得太多了，須要將函數拆分能夠實現可重用性和更簡單的測試。數組

// 很差的寫法
function parseBetterJSAlternative(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      // ...
    });
  });

  const ast = [];
  tokens.forEach(token => {
    // lex...
  });

  ast.forEach(node => {
    // parse...
  });
}

// 好的寫法
function parseBetterJSAlternative(code) {
  const tokens = tokenize(code);
  const syntaxTree = parse(tokens);
  syntaxTree.forEach(node => {
    // parse...
  });
}

function tokenize(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      tokens.push(/* ... */);
    });
  });

  return tokens;
}

function parse(tokens) {
  const syntaxTree = [];
  tokens.forEach(token => {
    syntaxTree.push(/* ... */);
  });

  return syntaxTree;
}

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

刪除重複的代碼

儘可能避免重複的代碼，重複的代碼是很差的，它意味着若是咱們須要更改某些邏輯，要改不少地方。

一般，有重複的代碼，是由於有兩個或多個稍有不一樣的事物，它們有不少共同點，可是它們之間的差別迫使咱們編寫兩個或多個獨立的函數來完成許多相同的事情。 刪除重複的代碼意味着建立一個僅用一個函數/模塊/類就能夠處理這組不一樣事物的抽象。

得到正確的抽象是相當重要的，這就是爲何咱們應該遵循類部分中列出的 SOLID原則。糟糕的抽象可能比重複的代碼更糟糕，因此要當心!說了這麼多，若是你能作一個好的抽象，那就去作吧!不要重複你本身，不然你會發現本身在任什麼時候候想要改變一件事的時候都要更新多個地方。

設計模式的六大原則有：

  • Single Responsibility Principle：單一職責原則
  • Open Closed Principle：開閉原則
  • Liskov Substitution Principle：里氏替換原則
  • Law of Demeter：迪米特法則
  • Interface Segregation Principle：接口隔離原則
  • Dependence Inversion Principle：依賴倒置原則

把這六個原則的首字母聯合起來（兩個 L 算作一個）就是 SOLID （solid，穩定的），其表明的含義就是這六個原則結合使用的好處：創建穩定、靈活、健壯的設計。下面咱們來分別看一下這六大設計原則。

很差的寫法

function showDeveloperList(developers) {
  developers.forEach(developer => {
    const expectedSalary = developer.calculateExpectedSalary();
    const experience = developer.getExperience();
    const githubLink = developer.getGithubLink();
    const data = {
      expectedSalary,
      experience,
      githubLink
    };

    render(data);
  });
}

function showManagerList(managers) {
  managers.forEach(manager => {
    const expectedSalary = manager.calculateExpectedSalary();
    const experience = manager.getExperience();
    const portfolio = manager.getMBAProjects();
    const data = {
      expectedSalary,
      experience,
      portfolio
    };

    render(data);
  });
}

好的寫法

function showEmployeeList(employees) {
  employees.forEach(employee => {
    const expectedSalary = employee.calculateExpectedSalary();
    const experience = employee.getExperience();

    const data = {
      expectedSalary,
      experience
    };

    switch (employee.type) {
      case "manager":
        data.portfolio = employee.getMBAProjects();
        break;
      case "developer":
        data.githubLink = employee.getGithubLink();
        break;
    }

    render(data);
  });
}

使用Object.assign設置默認對象

很差的寫法

const menuConfig = {
  title: null,
  body: "Bar",
  buttonText: null,
  cancellable: true
};

function createMenu(config) {
  config.title = config.title || "Foo";
  config.body = config.body || "Bar";
  config.buttonText = config.buttonText || "Baz";
  config.cancellable =
    config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

好的寫法

const menuConfig = {
  title: "Order",
  // User did not include 'body' key
  buttonText: "Send",
  cancellable: true
};

function createMenu(config) {
  config = Object.assign(
    {
      title: "Foo",
      body: "Bar",
      buttonText: "Baz",
      cancellable: true
    },
    config
  );

  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig);

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

不要使用標誌做爲函數參數

標誌告訴使用者，此函數能夠完成多項任務，函數應該作一件事。 若是函數遵循基於布爾的不一樣代碼路徑，請拆分它們。

// 很差的寫法
function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}

// 好的寫法
function createFile(name) {
  fs.create(name);
}

function createTempFile(name) {
  createFile(`./temp/${name}`);
}

避免反作用(第一部分)

若是函數除了接受一個值並返回另外一個值或多個值之外，不執行任何其餘操做，都會產生反作用。 反作用多是寫入文件，修改某些全局變量，或者不當心將你的全部資金都匯給了陌生人。

很差的寫法

let name = "Ryan McDermott";

function splitIntoFirstAndLastName() {
  name = name.split(" ");
}

splitIntoFirstAndLastName();

console.log(name); // ['Ryan', 'McDermott'];

好的寫法

function splitIntoFirstAndLastName(name) {
  return name.split(" ");
}

const name = "Ryan McDermott";
const newName = splitIntoFirstAndLastName(name);

console.log(name); // 'Ryan McDermott';
console.log(newName); // ['Ryan', 'McDermott'];

避免反作用(第二部分)

在JavaScript中，原始類型值是按值傳遞，而對象/數組按引用傳遞。 對於對象和數組，若是有函數在購物車數組中進行了更改（例如，經過添加要購買的商品），則使用該購物車數組的任何其餘函數都將受到此添加的影響。 那可能很棒，可是也可能很差。 來想象一個糟糕的狀況：

用戶單擊「購買」按鈕，該按鈕調用一個purchase 函數，接着，該函數發出一個網絡請求並將cart數組發送到服務器。因爲網絡鏈接很差，purchase函數必須不斷重試請求。如今，若是在網絡請求開始以前，用戶不當心點擊了他們實際上不須要的項目上的「添加到購物車」按鈕，該怎麼辦?若是發生這種狀況，而且網絡請求開始，那麼購買函數將發送意外添加的商品，由於它有一個對購物車數組的引用，addItemToCart函數經過添加修改了這個購物車數組。

一個很好的解決方案是addItemToCart老是克隆cart數組，編輯它，而後返回克隆。這能夠確保購物車引用的其餘函數不會受到任何更改的影響。

關於這種方法有兩點須要注意：

1.可能在某些狀況下，咱們確實須要修改輸入對象，可是當咱們採用這種編程實踐時，會發現這種狀況很是少見，大多數東西均可以被改形成沒有反作用。

2.就性能而言，克隆大對象可能會很是昂貴。 幸運的是，在實踐中這並非一個大問題，由於有不少很棒的庫使這種編程方法可以快速進行，而且不像手動克隆對象和數組那樣佔用大量內存。

// 很差的寫法
const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

// 好的寫法
const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};

不要寫全局函數

污染全局變量在 JS 中是一種很差的作法，由於可能會與另外一個庫發生衝突，而且在他們的生產中遇到異常以前，API 的用戶將毫無用處。 讓咱們考慮一個示例：若是想擴展 JS 的原生Array方法以具備能夠顯示兩個數組之間差別的diff方法，該怎麼辦？ 能夠將新函數寫入Array.prototype，但它可能與另外一個嘗試執行相同操做的庫發生衝突。 若是其餘庫僅使用diff來查找數組的第一個元素和最後一個元素之間的區別怎麼辦？ 這就是爲何只使用 ES6 類並簡單地擴展Array全局會更好的緣由。

// 很差的寫法
Array.prototype.diff = function diff(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};

// 好的寫法
class SuperArray extends Array {
  diff(comparisonArray) {
    const hash = new Set(comparisonArray);
    return this.filter(elem => !hash.has(elem));
  }
}

儘可能使用函數式編程而非命令式

JavaScript不像Haskell那樣是一種函數式語言，但它具備函數式的風格。函數式語言能夠更簡潔、更容易測試。若是能夠的話，儘可能喜歡這種編程風格。

很差的寫法

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

好的寫法

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

const totalOutput = programmerOutput.reduce(
  (totalLines, output) => totalLines + output.linesOfCode,
  0
);

封裝條件

// 很差的寫法
if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}

// 好的寫法
function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

避免使用非條件

// 很差的寫法
function isDOMNodeNotPresent(node) {
  // ...
}

if (!isDOMNodeNotPresent(node)) {
  // ...
}

// 好的寫法
function isDOMNodePresent(node) {
  // ...
}

if (isDOMNodePresent(node)) {
  // ...
}

避免使用過多條件

這彷佛是一個不可能完成的任務。一聽到這個，大多數人會說，「沒有if語句，我怎麼能作任何事情呢?」答案是，你能夠在許多狀況下使用多態性來實現相同的任務。

第二個問題一般是，「那很好，可是我爲何要那樣作呢?」答案是上面講過一個概念:一個函數應該只作一件事。當具備if語句的類和函數時，這是在告訴你的使用者該函數執行不止一件事情。

很差的寫法

class Airplane {
  // ...
  getCruisingAltitude() {
    switch (this.type) {
      case "777":
        return this.getMaxAltitude() - this.getPassengerCount();
      case "Air Force One":
        return this.getMaxAltitude();
      case "Cessna":
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

好的寫法

class Airplane {
  // ...
}

class Boeing777 extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getPassengerCount();
  }
}

class AirForceOne extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude();
  }
}

class Cessna extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getFuelExpenditure();
  }
}

避免類型檢查

JavaScript 是無類型的，這意味着函數能夠接受任何類型的參數。 有時q咱們會被這種自由所困擾，而且很想在函數中進行類型檢查。 有不少方法能夠避免這樣作。 首先要考慮的是一致的API。

// 很差的寫法
function travelToTexas(vehicle) {
  if (vehicle instanceof Bicycle) {
    vehicle.pedal(this.currentLocation, new Location("texas"));
  } else if (vehicle instanceof Car) {
    vehicle.drive(this.currentLocation, new Location("texas"));
  }
}

// 好的寫法
function travelToTexas(vehicle) {
  vehicle.move(this.currentLocation, new Location("texas"));
}

不要過分優化

現代瀏覽器在運行時作了大量的優化工做。不少時候，若是你在優化，那麼你只是在浪費時間。有很好的資源能夠查看哪裏缺少優化，咱們只須要針對須要優化的地方就好了。

// 很差的寫法

// 在舊的瀏覽器上，每一次使用無緩存「list.length」的迭代都是很昂貴的
// 會爲「list.length」從新計算。在現代瀏覽器中，這是通過優化的
for (let i = 0, len = list.length; i < len; i++) {
  // ...
}

// 好的寫法
for (let i = 0; i < list.length; i++) {
  // ...
}

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://github.com/ryanmcderm...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程