JavaScript 的簡(jiǎn)潔之道

wudengzan 發(fā)布于2019-08-23 18:03 / 1831人閱讀

摘要：考慮到函數(shù)表示某種行為，函數(shù)名稱應(yīng)該是動(dòng)詞或短語(yǔ)，用以說(shuō)明其背后的意圖以及參數(shù)的意圖。不好的方式好的方式使用條件簡(jiǎn)寫。這可能微不足道，但值得一提。

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

簡(jiǎn)介

如果你關(guān)注代碼本身和代碼的編寫方式，而不是只關(guān)心它是否能工作，那么你寫代碼是有一定的水準(zhǔn)。專業(yè)開(kāi)發(fā)人員將為未來(lái)的自己和“其他人”編寫代碼，而不僅僅只編寫當(dāng)前能工作就行的代碼。

在此基礎(chǔ)上，簡(jiǎn)潔代碼可以定義為自解釋的、易于人理解的、易于更改或擴(kuò)展的代碼。

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

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

1. 強(qiáng)類型檢查

用===代替 ==

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

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

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

2.變量

用知名其意的方式為變量命名，通過(guò)這種方式，當(dāng)一個(gè)人看到它們時(shí)，易于搜索和理解。

不好的方式：

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;

不要簡(jiǎn)寫變量上下文。

不好的方式：

const users = ["John", "Marco", "Peter"];
users.forEach(u => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  // 當(dāng)上面代碼很多的時(shí)候 ，這 `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. 函數(shù)

使用長(zhǎng)而具有描述性的名稱。考慮到函數(shù)表示某種行為，函數(shù)名稱應(yīng)該是動(dòng)詞或短??語(yǔ)，用以說(shuō)明其背后的意圖以及參數(shù)的意圖。函數(shù)的名字應(yīng)該說(shuō)明他們做了什么。

不好的方式：

function notif(user) {
  // implementation
}

好的方式：

function notifyUser(emailAddress) {
  // implementation
}

避免使用大量參數(shù)。理想情況下，函數(shù)應(yīng)該指定兩個(gè)或更少的參數(shù)。參數(shù)越少，測(cè)試函數(shù)就越容易，參數(shù)多的情況可以使用對(duì)象。

不好的方式：

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"
});

使用默認(rèn)參數(shù)替代 || 操作

不好的方式：

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

好的方式：

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

一個(gè)函數(shù)應(yīng)該只做一件事，不要在一個(gè)函數(shù)中執(zhí)行多個(gè)操作。

不好的方式：

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設(shè)置對(duì)象默認(rèn)值。

不好的方式：

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);

不要使用標(biāo)志作為參數(shù)，因?yàn)樗鼈兏嬖V函數(shù)做的比它應(yīng)該做的多。

不好的方式：

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}`);
}

不要污染全局變量。如果需要擴(kuò)展現(xiàn)有對(duì)象，請(qǐng)使用ES類和繼承，而不是在原生對(duì)象的原型鏈上創(chuàng)建函數(shù)。

不好的方式：

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
}

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

不好的方式：

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

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

好的方式：

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

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

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

不好的方式：

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中新的語(yǔ)法糖。一切工作就像以前的原型，只是它現(xiàn)在看起來(lái)不同，你應(yīng)該更喜歡他們比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() {
    /* ... */
  }
}

使用鏈接。許多庫(kù)(如jQuery和Lodash)都使用這種模式。在類中，只需在每個(gè)函數(shù)的末尾返回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();

總結(jié)

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

交流

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎加群互相學(xué)習(xí)。

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

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。

云服務(wù)器 GPU云服務(wù)器 php 簡(jiǎn)潔之道簡(jiǎn)潔的javascript 最簡(jiǎn)潔的編程語(yǔ)言最小二乘法的簡(jiǎn)潔算法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104589.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wudengzan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

離大廠近一點(diǎn)《阿里巴巴集團(tuán)Web安全測(cè)試規(guī)范》獨(dú)家版

閱讀 3806·2021-10-13 09:39
一個(gè)程序員的正版清單

閱讀 3835·2021-09-24 09:48
如何解決兼容問(wèn)題?Win11僅支持1個(gè)Intel 7代CPU 不支持AMD Zen 1 CPU

閱讀 1221·2021-09-01 10:30
2018.12月問(wèn)題整理雜記

閱讀 2554·2019-08-30 15:55
CSS選擇器引起的一些思考

閱讀 1804·2019-08-29 16:39
我們不背誦 API，只實(shí)現(xiàn) API

閱讀 2326·2019-08-26 13:55
【每日一包0008】arr-diff

閱讀 3082·2019-08-26 12:23
使用Object.prototype.toString判斷數(shù)據(jù)類型

閱讀 1665·2019-08-26 11:59

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript 的簡(jiǎn)潔之道

相關(guān)文章

**PHP代碼簡(jiǎn)潔之道——變量部分**

**PHP 代碼規(guī)范簡(jiǎn)潔之道**

**PHP代碼簡(jiǎn)潔之道——類和對(duì)象部分**

編碼之道（一）：程序員的“圣經(jīng)“

**PHP代碼簡(jiǎn)潔之道——函數(shù)部分**

發(fā)表評(píng)論

0條評(píng)論

wudengzan

男|高級(jí)講師

TA的文章

離大廠近一點(diǎn)《阿里巴巴集團(tuán)Web安全測(cè)試規(guī)范》獨(dú)家版

一個(gè)程序員的正版清單

如何解決兼容問(wèn)題?Win11僅支持1個(gè)Intel 7代CPU 不支持AMD Zen 1 CPU

2018.12月問(wèn)題整理雜記

CSS選擇器引起的一些思考

我們不背誦 API，只實(shí)現(xiàn) API

【每日一包0008】arr-diff

使用Object.prototype.toString判斷數(shù)據(jù)類型

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript 的簡(jiǎn)潔之道

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！