如何優雅地書寫JavaScript

2021-09-13 11:35:46 字數 3780 閱讀 2159

這篇文章包含了幾乎所有關於提高**質量的內容，尤其是在構建大型應用程式時。

主要包括四個部分:

本主題僅涉及原生js，關於框架（比如react和vue）的內容會在以後的文章中展現。
我想你們大多數人之前都聽說過solid，也就是物件導向設計裡的solid原則。

這些原則基於物件導向設計，所以可能不適合其他程式設計正規化。即便如此，它也涵蓋了大多數情況。

例如，sod既可以應用於物件導向程式設計，也可以應用於函式式程式設計。

變數或許是在開發過程中最常見的術語。

命名

// 不推薦


// 我不知道這個變數代表什麼意義


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


// const getalllist = r.identity(list)


if (!group) 


return getlistbygroup(group, picturecollect.list);
// 不推薦


const phone = 


// 推薦


const phone =
程式從不說謊，但注釋（也包括名稱）可能會。
型別

控制流

非同步/等待也是非常強大的。
// 不推薦


function downloadfile() 


if (encoding) 


// ....


}// 推薦


function downloadfile()
// 不推薦


if (number === 0 && (1 / number) === -infinity)


// 推薦


function isnegativezero(number) 


if (isnegativezero(number))
在特定環境下遞迴表現的更好。
引數盡量要少

使用純函式

相比於命令式，函式式更好

小心在全域性作用域中的函式（包括在他們原型物件上的方法）

one level of abstraction

只做一件事情（單一責任原則）

write less

呼叫者和被呼叫者位置應該盡量接近

// 不推薦


const logger = console.log.bind(console)


fetch('')


.then(notifyuser)


.catch(logger)


// 推薦


fetch('')


.then(notifyuser)


.catch(err => )
列印、儲存、通知使用者或將其傳送到遠端伺服器
create, ltime etc
// 不推薦


// means the date of the today


const yyyymmdd;


// 推薦


const today;
好萊塢原則

我一直很欣賞好萊塢原則這個名稱的巧妙。這個原則的本質是「不要給我打**，我會打給你」。如你所知，這是你在面試好萊塢電影裡的乙個角色後可能聽到的答覆。而軟體世界裡的好萊塢原則也是一樣的觀念。其目的是注意要聰明的構造和實現你的依賴關係。

例如:

import a from '../../a.js'


import b from '../../../b.js'


import a from '../c.js'


return 


}}
我們編寫的**直接依賴於a、b和c。當它們中的任何乙個改變它的api或位置時，你必須跟著變動**。

var  = require("./decorator.public.js");


return 


}}// enhance


// = ioc + decorator
if we use enhance, which implemented by ioc and decorator.

如果我們使用通過ioc和裝飾器實現的增強技術，

可以使得應用程式易於測試和擴充套件。.

裝飾器可能就像這樣：

// 為了簡單的目的


import a from '../../a.js'


import b from '../../../b.js'


import a from '../c.js'


}
這很簡單，但完全不同。

從依賴項中解耦

function a() 


var _a = a;


a = function() 


a();


// a


// hello decorator
更優雅的方式：

function a() 


function dec() 


compose(dec, a)
軟體開發的關鍵是找出變數和變數。

然後對不變部分進行程式設計，使變數的影響在它的控制之下。

也稱為抽象程式設計.

對比傳統的物件導向程式設計（oop）來說,函式式程式設計（fp）更優越。

借助「無資料樣式」（即「pointfree」）的幫助，您可以將細節與邏輯分離開來。

所以你可以單獨留下細節，讓邏輯變得純粹。

我想再強調一點，那就是人們有時會說，沒有抽象概念總比錯誤的抽象好。這實際上意味著錯誤抽象的代價非常高，所以要小心。我認為這有時會被誤解。這並不意味著您應該沒有抽象概念。這只意味著你必須非常小心。-- malte ubl在jsconf澳大利亞演講。
我們必須善於發現正確的抽象。

只有這樣，您才能編寫可重用的、可管理的和可擴充套件的**。

如何優雅地寫部落格

如何優雅地寫部落格 現在寫部落格面臨著幾個問題 編寫麻煩，大部分的部落格編輯器都很爛，csdn和等等。維護麻煩，維護多個部落格的資料同步很麻煩。歷史檢視，大部分部落格編寫都不能檢視之前的歷史資料。用github做部落格倉庫，將資料都寫在github上，這樣可以隨時檢視一年前的部落格資料，方便在原文件...

如何優雅地關閉SparkStreaming

how to shutdown a spark streaming job gracefully 17 02 02 01 31 35 info streaming.streamingcontext invoking stop stopgracefully true from shutdown hoo...

前端如何優雅地顯示 JSON

json.cn 是我們開發過程中，經常用來格式化顯示json字串的工具 那麼如何在自己編寫的前端介面顯示同樣風格的 格式化之後json字串呢？網上流傳的版本顯示出來效果並不盡如人意，因此小改了一下。pre csspre string number boolean null key jssyntaxh...