JavaScript 的簡潔之道

wudengzan 發布于2019-08-23 18:03 / 1754人閱讀

摘要：考慮到函數表示某種行為，函數名稱應該是動詞或短語，用以說明其背后的意圖以及參數的意圖。不好的方式好的方式使用條件簡寫。這可能微不足道，但值得一提。

為了保證可讀性，本文采用的音譯而非直意。

簡介

如果你關注代碼本身和代碼的編寫方式，而不是只關心它是否能工作，那么你寫代碼是有一定的水準。專業開發人員將為未來的自己和“其他人”編寫代碼，而不僅僅只編寫當前能工作就行的代碼。

在此基礎上，簡潔代碼可以定義為自解釋的、易于人理解的、易于更改或擴展的代碼。

以下列表一些好編寫方式，僅供參考，當然，如果你有更好的方式，歡迎留言。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

1. 強類型檢查

用===代替 ==

// 如果處理不當，它會極大地影響程序邏輯。這就像，你想向左走，但由于某種原因，你向右走
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false

// 例子
const value = "500";
if (value === 500) {
  console.log(value);
  // 條件不成立，不會進入
}

if (value === "500") {
  console.log(value);
  // 條件成立，會進入
}

2.變量

用知名其意的方式為變量命名，通過這種方式，當一個人看到它們時，易于搜索和理解。

不好的方式：

let daysSLV = 10;
let y = new Date().getFullYear();

let ok;
if (user.age > 30) {
  ok = true;
}

好的方式：

const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();

...

const isUserOlderThanAllowed = user.age > MAX_AGE;

不要在變量名中添加額外的不需要的單詞。

不好的方式：

let nameValue;
let theProduct;

好的方式：

let name;
let product;

不要簡寫變量上下文。

不好的方式：

const users = ["John", "Marco", "Peter"];
users.forEach(u => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  // 當上面代碼很多的時候 ，這 `u` 是什么鬼
  register(u);
});

好的方式：

const users = ["John", "Marco", "Peter"];
users.forEach(user => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  register(user);
});

不要添加不必要的上下文。

不好的方式：

const user = {
  userName: "John",
  userSurname: "Doe",
  userAge: "28"
};

...

user.userName;

好的方式：

const user = {
  name: "John",
  surname: "Doe",
  age: "28"
};

...

user.name;

3. 函數

使用長而具有描述性的名稱。考慮到函數表示某種行為，函數名稱應該是動詞或短??語，用以說明其背后的意圖以及參數的意圖。函數的名字應該說明他們做了什么。

不好的方式：

function notif(user) {
  // implementation
}

好的方式：

function notifyUser(emailAddress) {
  // implementation
}

避免使用大量參數。理想情況下，函數應該指定兩個或更少的參數。參數越少，測試函數就越容易，參數多的情況可以使用對象。

不好的方式：

function getUsers(fields, fromDate, toDate) {
  // implementation
}

好的方式：

function getUsers({ fields, fromDate, toDate }) {
  // implementation
}

getUsers({
  fields: ["name", "surname", "email"],
  fromDate: "2019-01-01",
  toDate: "2019-01-18"
});

使用默認參數替代 || 操作

不好的方式：

function createShape(type) {
  const shapeType = type || "cube";
  // ...
}

好的方式：

function createShape(type = "cube") {
  // ...
}

一個函數應該只做一件事，不要在一個函數中執行多個操作。

不好的方式：

function notifyUsers(users) {
  users.forEach(user => {
    const userRecord = database.lookup(user);
    if (userRecord.isVerified()) {
      notify(user);
    }
  });
}

好的方式：

function notifyVerifiedUsers(users) {
  users.filter(isUserVerified).forEach(notify);
}

function isUserVerified(user) {
  const userRecord = database.lookup(user);
  return userRecord.isVerified();
}

使用Object.assign設置對象默認值。

不好的方式：

const shapeConfig = {
  type: "cube",
  width: 200,
  height: null
};

function createShape(config) {
  config.type = config.type || "cube";
  config.width = config.width || 250;
  config.height = config.height|| 250;
}


createShape(shapeConfig);

好的方式：

const shapeConfig = {
  type: "cube",
  width: 200
  // Exclude the "height" key
};

function createShape(config) {
  config = Object.assign(
    {
      type: "cube",
      width: 250,
      height: 250
    },
    config
  );

  ...
}

createShape(shapeConfig);

不要使用標志作為參數，因為它們告訴函數做的比它應該做的多。

不好的方式：

function createFile(name, isPublic) {
  if (isPublic) {
    fs.create(`./public/${name}`);
  } else {
    fs.create(name);
  }
}

好的方式：

function createFile(name) {
  fs.create(name);
}

function createPublicFile(name) {
  createFile(`./public/${name}`);
}

不要污染全局變量。如果需要擴展現有對象，請使用ES類和繼承，而不是在原生對象的原型鏈上創建函數。

不好的方式：

Array.prototype.myFunc = function myFunc() {
  // implementation
};

好的方式：

class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}

4. 條件

避免使用反面條件。

不好的方式：

function isUserNotBlocked(user) {
  // implementation
}

if (!isUserNotBlocked(user)) {
  // implementation
}

好的方式：

function isUserBlocked(user) {
  // implementation
}

if (isUserBlocked(user)) {
  // implementation
}

使用條件簡寫。這可能微不足道，但值得一提。僅對布爾值使用此方法，并且如果你確信該值不會是undefined 或null的，則使用此方法。

不好的方式：

if (isValid === true) {
  // do something...
}

if (isValid === false) {
  // do something...
}

好的方式：

if (isValid) {
  // do something...
}

if (!isValid) {
  // do something...
}

盡可能避免條件句，而是使用多態性和繼承。

不好的方式：

class Car {
  // ...
  getMaximumSpeed() {
    switch (this.type) {
      case "Ford":
        return this.someFactor() + this.anotherFactor();
      case "Mazda":
        return this.someFactor();
      case "McLaren":
        return this.someFactor() - this.anotherFactor();
    }
  }
}

好的方式：

class Car {
  // ...
}

class Ford extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() + this.anotherFactor();
  }
}

class Mazda extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor();
  }
}

class McLaren extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() - this.anotherFactor();
  }
}

5. 類

class 是JavaScript中新的語法糖。一切工作就像以前的原型，只是它現在看起來不同，你應該更喜歡他們比ES5普通功能。

不好的方式：

const Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error("Instantiate Person with `new` keyword");
  }

  this.name = name;
};

Person.prototype.sayHello = function sayHello() { /**/ };

const Student = function(name, school) {
  if (!(this instanceof Student)) {
    throw new Error("Instantiate Student with `new` keyword");
  }

  Person.call(this, name);
  this.school = school;
};

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };

好的方式：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    /* ... */
  }
}

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }

  printSchoolName() {
    /* ... */
  }
}

使用鏈接。許多庫(如jQuery和Lodash)都使用這種模式。在類中，只需在每個函數的末尾返回this就可以將更多的該類方法鏈接到它上。

不好的方式：

class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
  }

  setAge(age) {
    this.age = age;
  }

  save() {
    console.log(this.name, this.surname, this.age);
  }
}

const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();

好的方式：

class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
    // Return this for chaining
    return this;
  }

  setAge(age) {
    this.age = age;
    // Return this for chaining
    return this;
  }

  save() {
    console.log(this.name, this.surname, this.age);
    // Return this for chaining
    return this;
  }
}

const person = new Person("John")
    .setSurname("Doe")
    .setAge(29)
    .save();

總結

這只是改進代碼的一小部分。一般生活入，這里所說的原則是人們通常不遵守的原則。他們嘗試著去做，但出于各種原因，就沒有堅持下去。也許在項目開始時，代碼是簡潔的，但是當要在截止日期前完成時，這些原則常常被忽略，并被轉移到“TODO”或“REFACTOR”部分。在這一點上，你的客戶更希望您在最后期限之前完成任務，而不是編寫簡潔的代碼。

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎加群互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

GPU云服務器云服務器 php 簡潔之道簡潔的javascript 最簡潔的編程語言最小二乘法的簡潔算法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104589.html

PHP代碼簡潔之道——變量部分

摘要：將代碼寫的簡潔并且易讀易懂是每一位優秀的所應該具備的基本功。前幾天在上看到這個項目，感覺很有收獲，于是在這里記錄一下。將代碼寫的簡潔并且易讀易懂是每一位優秀的coder所應該具備的基本功。前幾天在github上看到clean-code-php這個項目，感覺很有收獲，于是在這里記錄一下。使用有意義并且可讀的變量名稱 Bad: $ymdstr = $moment->format(y-...

mgckid 2019-06-28 13:53 評論0 收藏0
PHP 代碼規范簡潔之道

摘要：統一的編碼規范編碼規范往簡單說其實就是三個方面換行空格變量命名放在里面，還有一些附加的地方，比如關鍵字大小寫，語法糖的使用與等的問題。這些都是規范代碼的重要手段。推廣給你的隊友團隊項目中，隊友的配合對整個代碼的規范起著決定性的作用。 1. 統一的編碼規范編碼規范往簡單說其實就是三個方面：換行空格變量命名放在 PHP 里面，還有一些附加的地方，比如關鍵字大小寫，語法糖的使用...

BearyChat 2019-06-27 12:02 評論0 收藏0
PHP代碼簡潔之道——類和對象部分

摘要：使用和在中，通過為屬性或方法設置和關鍵字可以實現對屬性或方法的可見性控制。你的繼承表達了一個對等比如人類是動物的關系，不是包含的關系比如用戶具有用戶詳情你能從基類中復用代碼你想通過修改全局類來對所有派生類進行修改。使用getter和setter 在 PHP 中，通過為屬性或方法設置 public, protected 和 private 關鍵字可以實現對屬性或方法的可見性控制。不過，...

cyixlq 2019-06-28 13:54 評論0 收藏0
編碼之道（一）：程序員的“圣經“

摘要：與此類似，理所當然的，我們程序員也會有自己的圣經。這便是程序員的圣經三個原則我認為做為一個程序員，最神圣的就是三個原則，它幾乎能完整無誤的定義做為一個程序員應該如何去編碼。 ...

Elle 2021-09-04 16:40 評論0 收藏0
PHP代碼簡潔之道——函數部分

摘要：超過三個參數會導致參數之間的組合過多，你必須對每個單獨的參數測試大量不同的情況。拆分這些函數，可以讓代碼可重用性更高且更易測試。函數參數不要超過兩個限制函數的參數數量是非常重要的，因為它使你的函數更容易測試。超過三個參數會導致參數之間的組合過多，你必須對每個單獨的參數測試大量不同的情況。沒有參數是最理想的情況，一個或兩個參數是可以接受的，三個以上則是應該避免的。這很重要的。如果你...

crossoverJie 2019-06-28 13:54 評論0 收藏0