摘要：如你所知，這是你在面試好萊塢電影里的一個(gè)角色后可能聽到的答復(fù)。而軟件世界里的好萊塢原則也是一樣的觀念。也稱為抽象編程對(duì)比傳統(tǒng)的面向?qū)ο缶幊虂碚f函數(shù)式編程更優(yōu)越。

這篇文章包含了幾乎所有關(guān)于提高代碼質(zhì)量的內(nèi)容，尤其是在構(gòu)建大型應(yīng)用程序時(shí)。

主要包括四個(gè)部分:

基本原則

保持整潔

保持?jǐn)U展性

抽象化

本主題僅涉及原生js，關(guān)于框架（比如react和vue）的內(nèi)容會(huì)在以后的文章中展現(xiàn)。

我想你們大多數(shù)人之前都聽說過SOLID，也就是面向?qū)ο笤O(shè)計(jì)里的SOLID原則。

這些原則基于面向?qū)ο笤O(shè)計(jì)，所以可能不適合其他編程范式。即便如此，它也涵蓋了大多數(shù)情況。

例如，SOD既可以應(yīng)用于面向?qū)ο缶幊蹋部梢詰?yīng)用于函數(shù)式編程。

變量或許是在開發(fā)過程中最常見的術(shù)語。

使用語義明確的命名

// 不推薦
// 我不知道這個(gè)變量代表什么意義
const flag = true;

// 推薦
const downloaded = true;
const enabled = true;

使用可讀的命名

// 不推薦
// 也是沒有意義
const yyyyMMdd;

// 推薦
const today;

使用語義一致的詞匯

// 不推薦

// file1
function getUserData()
// file2
function fetchUserData()
// file3
function getUserRecord()
// file4
function getUserInfo()

// 推薦

// file1
function getUserInfo()
// file2
function getUserInfo()
// file3
function getUserInfo()
// file4
function getUserInfo()

使用可搜索的命名

// 不推薦
for(let i=0;i<5;i++) {
 // ...
}

// 推薦
const COUNT = 5;
for(let i=0;i
使用自解釋的命名
// 不推薦
if (!group) {
  return pictureCollect.list;
}
return getListByGroup(group, pictureCollect.list);

// 推薦
const getAllList = list => list;
// const getAllList = R.identity(list)
if (!group) {
  return getAllList(pictureCollect.list);
}
return getListByGroup(group, pictureCollect.list);
避免冗余的命名
// 不推薦
const phone = {
 phoneOwner: "lucifer",
 phoneSize: ""
}

// 推薦
const phone = {
 owner: "lucifer",
 size: ""
}

好代碼，不撒謊
程序從不說謊，但注釋（也包括名稱）可能會(huì)。
類型
推薦使用 const
控制流
使用promise方法而不是callback（回調(diào)函數(shù)）
異步/等待也是非常強(qiáng)大的。
分支
使用短路表達(dá)式或默認(rèn)值
// 不推薦
function downloadFile({_filename, _encoding}) {
   let filename = "untitled.txt";
   let encoding = "utf-8"
   if (filename) {
    filename = _filename;
   }
   if (encoding) {
    encoding = _encoding;
   }
   // ....
}

// 推薦
function downloadFile({filename = "untitled.txt", _encoding}) {
   const encoding = _encoding || "utf-8";
   // ....
}


使用策略或多態(tài)性（開放封閉原則）
使用責(zé)任鏈（開放封閉原則）
將其分解成不同的功能（單一責(zé)任原則）
封裝條件

// 不推薦
if (number === 0 && (1 / number) === -Infinity)
// 推薦
function isNegativeZero(number) {
   return number === 0 && (1 / number) === -Infinity
}

if (isNegativeZero(number))
避免不必要的條件
表達(dá)
使用迭代器而不是循環(huán)
在特定環(huán)境下遞歸表現(xiàn)的更好。
函數(shù)
參數(shù)盡量要少
使用純函數(shù)
相比于命令式，函數(shù)式更好
小心在全局作用域中的函數(shù)（包括在他們?cè)蛯?duì)象上的方法）
one level of abstraction
只做一件事情（單一責(zé)任原則）
write less
調(diào)用者和被調(diào)用者位置應(yīng)該盡量接近
報(bào)錯(cuò)
永遠(yuǎn)不要對(duì)報(bào)錯(cuò)不做處理
// 不推薦
const logger = console.log.bind(console)
fetch("http://www.test.com")
 .then(notifyUser)
 .catch(logger)
 
// 推薦

fetch("http://www.test.com")
 .then(notifyUser)
 .catch(err => {
  // 你可以全做，也可以選一個(gè)
  console.error(err)
  notifyUser(err)
  sendErrToServer(err)
 })

打印、存儲(chǔ)、通知用戶或?qū)⑵浒l(fā)送到遠(yuǎn)程服務(wù)器
測(cè)試
一步一測(cè)試
格式

美觀
一致

注釋

注釋讓人難以理解的關(guān)鍵部分
刪除注釋代碼
注釋必要的信息

create, ltime etc

避免繪圖注釋
根據(jù)代碼意義注釋，不要說謊
注釋應(yīng)與相關(guān)代碼位置一致
相比于注釋，一個(gè)語義明確的命名更好

// 不推薦
// means the date of the today
const yyyyMMdd;

// 推薦
const today;
保持?jǐn)U展性
增強(qiáng)
好萊塢原則
我一直很欣賞好萊塢原則這個(gè)名稱的巧妙。這個(gè)原則的本質(zhì)是“不要給我打電話，我會(huì)打給你”。如你所知，這是你在面試好萊塢電影里的一個(gè)角色后可能聽到的答復(fù)。而軟件世界里的好萊塢原則也是一樣的觀念。其目的是注意要聰明的構(gòu)造和實(shí)現(xiàn)你的依賴關(guān)系。
例如:
import a from "../../a.js"
import b from "../../../b.js"
import a from "../c.js"

function app() {
   return {
    start() {
     a.start();
     b.start();
     c.start();
     console.log("app stared~")
    }
   }
}


我們編寫的代碼直接依賴于a、b和c。當(dāng)它們中的任何一個(gè)改變它的api或位置時(shí)，你必須跟著變動(dòng)代碼。
var { decorator } = require("./decorator.public.js");

function app({a, b, c}) {
   return {
    start() {
     console.log("app stared~")
    }
   }
}

// enhance
// = IOC + decorator
decorator(app);

if we use enhance, which implemented by IoC and decorator.
如果我們使用通過Ioc和裝飾器實(shí)現(xiàn)的增強(qiáng)技術(shù)，
可以使得應(yīng)用程序易于測(cè)試和擴(kuò)展。.
裝飾器可能就像這樣：
// 為了簡(jiǎn)單的目的
import a from "../../a.js"
import b from "../../../b.js"
import a from "../c.js"

function decorator(app) {
 return app({a, b, c})
}

這很簡(jiǎn)單，但完全不同。

app的參數(shù)道出了真相
從依賴項(xiàng)中解耦

而且我們可以改變app的行為.
function a() {console.log("a")}
var _a = a;
a = function() {
 _a();
 console.log("hello decorator")
}
a();
// a
// hello decorator

更優(yōu)雅的方式：
function a() {console.log("a")}
function dec() {onsole.log("hello decorator")}

compose(dec, a)

抽象化
軟件開發(fā)的關(guān)鍵是找出變量和變量。
然后對(duì)不變部分進(jìn)行編程，使變量的影響在它的控制之下。
也稱為抽象編程.
對(duì)比傳統(tǒng)的面向?qū)ο缶幊蹋∣OP）來說,函數(shù)式編程（FP）更優(yōu)越。
借助“無數(shù)據(jù)樣式”（即“pointfree”）的幫助，您可以將細(xì)節(jié)與邏輯分離開來。
所以你可以多帶帶留下細(xì)節(jié)，讓邏輯變得純粹。
我想再強(qiáng)調(diào)一點(diǎn)，那就是人們有時(shí)會(huì)說，沒有抽象概念總比錯(cuò)誤的抽象好。這實(shí)際上意味著錯(cuò)誤抽象的代價(jià)非常高，所以要小心。我認(rèn)為這有時(shí)會(huì)被誤解。這并不意味著您應(yīng)該沒有抽象概念。 這只意味著你必須非常小心。     --  Malte Ubl在JSConf澳大利亞演講。
我們必須善于發(fā)現(xiàn)正確的抽象。
只有這樣，您才能編寫可重用的、可管理的和可擴(kuò)展的代碼。