2. 程式人生 > 實用技巧 >Js程式碼簡潔之道

Js程式碼簡潔之道

阿新 • • 發佈：2020-11-26

簡介

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

在此基礎上，簡潔程式碼可以定義為自解釋的、易於人理解的、易於更改或擴充套件的程式碼。

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

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
  }
}

廣州VI設計公司https://www.houdianzi.com

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”部分。在這一點上，你的客戶更希望您在最後期限之前完成任務，而不是編寫簡潔的程式碼。

相關推薦

JS程式碼簡潔之道--函式

函式的引數越少越好 有一個準則是：如果你的函式引數超過兩個，就應該改為物件傳入。

Js程式碼簡潔之道

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

JavaScript程式碼簡潔之道第一期《變數》

只使用業內通用的簡寫 有些業務描述會比較長，這時候往往有人會使用簡寫，但是如果簡寫不是業內通用的，而是自己隨性創造的，這將給閱讀帶來很大困難。

程式碼簡潔之道

程式碼簡潔之道 clean code命名規範函式註釋格式錯誤處理類併發程式設計 clean code

Js程式碼整潔之道

一、前言 最近在做一些專案重構的工作，看了不少髒亂差的程式碼，身心疲憊。本文將討論如何編寫整潔的程式碼，不求高效執行，只求可讀性強，便於維護。

程式碼簡潔之道筆記

目錄程式碼簡潔之道1. 程式碼整潔的意義1.1 糟糕程式碼的壞處1.2 何謂整潔程式碼2. 有意義的命名3. 函式 （重點）4. 註釋5. 格式6. 錯誤處理7. 邊界8. 單元測試9. 類10. 簡單設計原則

JS程式碼簡潔方式之函式方法詳解

函式的引數越少越好 有一個準則是：如果你的函式引數超過兩個，就應該改為物件傳入。

PHP 程式碼規範簡潔之道

原文出處： Scholer 1. 統一的編碼規範 編碼規範往簡單說其實就是三個方面： 換行

php程式碼整潔之道

前言 文章出處 github.com/php-cpm/cle… Clean Code PHP 目錄 介紹 變數 使用見字知意的變數名

架構簡潔之道：從阿里開源應用架構 COLA 說起

導讀：COLA 的主要目的是為應用架構提供一套簡單的可以複製、可以理解、可以落地、可以控制複雜性的”指導和約束\"。在實踐中作者發現 COLA 在簡潔性上仍有不足，因此給 COLA 做了一次“升級”，在這

Java程式碼精簡之道(推薦)

前言 古語有云： 道為術之靈，術為道之體；以道統術，以術得道。 其中：“道”指“規律、道理、理論”，“術”指“方法、技巧、技術”。意思是：“道”是“術”的靈魂，“術”是“道”的肉體；可以用“道”來統管“

C++程式碼整潔之道

C++程式碼整潔之道 原文地址 整潔的程式碼在團隊中無疑是很受歡迎的，可以高效的被其它成員理解和維護，本文參考《C++程式碼整潔之道》和《Google C++編碼規範》，結合自己的一些想法整理如下：

程式碼整潔之道讀後感3

第三章 函式 1.函式的第一規則是要短小，第二條規則是還要更短小。 2.函式應該做一件事。做好這件事。只做這一件事。

《程式碼整潔之道》讀書筆記4

第五章 格式 縱向格式： 1. 函式與函式之間留空行。 2.變數宣告：變數宣告應該儘可能靠近其使用位置。因為函式很短，本地變數應該在函式的頂部出現。

程式碼整潔之道

關於如何寫整潔程式碼的一些總結和思考 最近在KM上看了不少關於Code Review的文章，情不自禁的翻出《程式碼整潔之道》又看了一下，於是在這裡順便做個總結。其實能遵守騰訊程式碼規範寫出來的程式碼質量已經不差了，

程式碼整潔之道（Clean Code）讀書筆記

閱讀本書有兩種原因：第一，你是個程式設計師；第二，你想成為更好的程式設計師。很好，我們需要更好的程式設計師。

讀《程式碼整潔之道》第二章隨筆 有意義的命名

讓人引起重視的程式碼，名副其實 有意義的命名 如果你在給變數、函式或類命名的時候非常隨意，如下：

程式碼整潔之道Clean Code筆記

@目錄第 1 章 Clean Code 整潔程式碼（3星）？為什麼要整潔的程式碼？什麼叫做整潔程式碼第 2 章 Meaningful Names 有意義的命名（3星）第 3 章 Functions 函式（3星）第 4 章 Comments 註釋（2星）第 5 章 Formatt

讀書筆記 《程式碼整潔之道》類

類的組織 類是一組變數，出現的順序是 公共靜態常量 私有靜態常量 私有實體變數

讀書筆記《程式碼整潔之道》迭進

迭進 我理解就是迭代。這章主要是講，專案已經很大了。如果在一個已經成熟的專案中 進行開發迭代。 首先給出了簡單設計的四條原則。按照重要性進行降序排序