為什麼我使用JavaScript樣式指南以及為什麼也應該使用

關鍵要點

• 採用 JavaScript 風格指南（例如 JavaScript Standard Style）有助於減少團隊摩擦，提高程序員的幸福感，並確保代碼一致性。
• 使用語言（如 JavaScript）的主流風格進行編碼，可以更容易地為開源項目做出貢獻，並讓其他人為您的項目做出貢獻。
• 風格指南並不一定能使程序更正確，但它可以在錯誤發布之前捕獲錯誤，使代碼更易於閱讀和理解，並防止團隊成員之間發生分歧。
• 實現 JavaScript Standard Style 可以無需任何工具，但也有 npm 包可用於 lint JavaScript 代碼和文本編輯器插件來幫助強制執行樣式。

讓我們來看看 @feross 的 JavaScript Standard Style，這是一種越來越流行的 JavaScript 風格指南。它可以幫助您減少團隊摩擦並提高程序員的幸福感。

它是一套規則，使 JavaScript 代碼更 一致，並且可以防止關於製表符與空格優缺點的無聊討論。它是您可以採用的眾多樣式之一，與其他 JavaScript linter（如 JSLint、JSHint 和 ESLint）屬於同一類別。

如果您不確定什麼是 linter，或者為什麼需要 linter，請查看我們對 JavaScript linting 工具的比較。

樣式的重要性

如果您已經編寫代碼一段時間了，您無疑會養成自己喜歡的樣式。當您編寫數百或數千次特定模式時，就會發生這種情況，您開始發現自己的編碼方式在美學上令人愉悅。突然，其他人來了，開始在奇怪的地方放置括號，並在行尾留下空格。可能需要一些文字。深呼吸，您放置括號或選擇空格的方式不會使您的程序更正確，這是 個人 偏好。

每種編程語言都有 主流 樣式，有時像 Python 那樣，官方樣式指南被呈現為編寫程序的 正確 方法。等等，您說縮進是 4 個空格？

使用語言的主流風格進行編碼將有助於您的程序適應語言的生態系統。如果您一開始就熟悉並達成一致，您還會發現更容易為開源項目做出貢獻，並讓其他人為您的項目做出貢獻。

JavaScript 沒有官方樣式指南，也許 Douglas Crockford 的《優秀部分》中出現了一個事實上的標準。他的書提出了一種編寫可靠 JavaScript 程序的方法，他強調了我們應該積極避免的功能。他發布了 JSLint 來支持這些觀點，其他 linter 也紛紛效仿。大多數 linter 都是高度可配置的，您可以選擇最適合您的樣式，更好的是，將其強制執行給他人！ JavaScript Standard Style 則有所不同。您最喜歡的樣式是 無關緊要的，重要的是選擇任何人都可以理解和使用的樣式。

採用標準樣式意味著將代碼清晰度和社區規範的重要性置於個人風格之上。這可能對 100% 的項目和開發文化都沒有意義，但是開源對於新手來說可能是一個充滿敵意的場所。建立清晰的、自動化的貢獻者期望值會使項目更健康。

如果您正在為自己編寫一個沒有人需要參與貢獻的程序，請使用讓您最快樂的工具和样式。在團隊中工作時，您應該始終盡量減少摩擦，保持專業，不要為小事煩惱。

在引入自己的樣式之前，請花時間學習現有代碼庫的樣式。

JavaScript Standard Style

• 2 個空格 - 用於縮進
• 字符串使用單引號 - 除非為了避免轉義
• 沒有未使用的變量 - 這個可以捕獲 大量 錯誤！
• 沒有分號
• 切勿以 (、[ 或 ` 開頭
• 關鍵字後有空格 if (condition) { ... }
• 函數名稱後有空格 function name (arg) { ... }
• 始終使用 === 而不是 == - 但允許 obj == null 來檢查 null || undefined。
• 始終處理 Node.js err 函數參數
• 始終為瀏覽器全局變量添加 window 前綴 - 但 document 和 navigator 可以
  • 防止意外使用命名不當的瀏覽器全局變量，如 open、length、event 和 name。

查看完整的規則列表

最具爭議的規則無疑是沒有分號。多年來，人們一直認為分號應該始終 存在以避免錯誤，Crockford 為了推廣這一點做了很多努力，但它也在C 中有很深的根源，在C 中，分號是嚴格要求的，否則程序將無法運行。

JavaScript Standard Style 改變了我對這一點的看法，無分號 JavaScript 很好。

自動分號插入是JavaScript 的一個特性，它可以減少噪音並簡化程序，我從未 遇到過由於缺少分號而導致的錯誤，我不相信您也會遇到。有關此內容的更多信息，請參見 JavaScript 中的分號是否必要？

並非所有人都同意，著名的分支 semistandard 和 happiness 則強烈地恢復了分號。我發現這些分支有點令人遺憾，因為它們似乎錯過了標準的全部意義。

我不同意規則 X，您可以更改它嗎？

不。標準的重點是避免關於樣式的無謂爭論。網上有很多關於製表符與空格等的爭論，這些爭論永遠不會解決。這些爭論只會分散精力，無法完成工作。最終，您必須“只選擇一些東西”，這就是標準的全部理念——它是一堆明智的“只選擇一些東西”的觀點。希望用戶能夠看到這一點的價值，而不是捍衛自己的觀點。

就我個人而言，我已經習慣了在沒有分號的情況下進行編碼，也許這是因為我花時間編寫 Ruby、Python 和 CoffeeScript，這些語言需要較少的語法。無論原因是什麼，當需要查看的內容較少時，我發現程序更清晰。

Mark 的優秀程序等級

程序員應該重視：

1. 正確性
2. 可讀性
3. 幸福感
4. 效率

事實證明，採用像 standard 這樣的風格指南可以在這些方面都帶來好處。

正確性

為了發揮任何作用，程序必須按照您的意圖執行並且沒有錯誤。樣式不會使程序更正確，但 linter 可以在錯誤發布之前捕獲錯誤。

可讀性

作為一名專業開發人員，除了提供一個有效的程序之外，代碼的 可讀性 是最重要的事情。與編寫相比，閱讀和嘗試理解程序所花費的精力要多得多，因此請為您的未來自我和其他將繼承您的代碼的人員進行優化。

清晰可預測的樣式使代碼更易於閱讀和理解。

程序員幸福感

我最喜歡這個方面的一點是，它將重點放在人而不是機器上。它之所以在列表中排名第三，只是因為團隊對可讀、功能代碼的需求應該優先於我們自己的幸福感，但這並不意味著它會以犧牲幸福感為代價。

你想享受生活，不是嗎？如果你能快速完成工作，而且工作很有趣，那很好，不是嗎？這部分是生活的目的。你的生活更好了。

– 松本行弘

人生苦短，不要因為個人喜好上的意見分歧而煩惱，設定一個標準然後繼續前進。如果標準樣式可以防止團隊成員之間發生分歧和摩擦，那麼您會因此而更快樂。

效率

最後一點，但並非最不重要的一點。

如果您必須對這些要點中的任何一個進行權衡，您應該重視正確、可讀且使人們快樂的代碼 勝過 快速代碼。

計算機速度很快。如果程序足夠高效，那就沒問題。如果您注意到性能不佳，那麼 請花時間找到瓶頸並使代碼更高效。

人類速度很慢。為我們提高效率更有價值。從採用標準樣式中獲得的清晰度使您的代碼更容易理解和參與貢獻。花費在不同意上的時間也大大減少了，這是非常受歡迎的。

實現 JavaScript Standard Style

您可以無需任何工具即可採用標準，只需閱讀規則並記下不同的規則即可。試用一周，看看您是否喜歡它。如果您不喜歡，請繼續使用它！

還有一個 npm 包用於 lint 您的 JavaScript 代碼。

<code>npm install standard --global</code>

運行 standard 將通過 linter 運行目錄中的所有 JavaScript 文件。

此外，所有常用編輯器都有文本編輯器插件，以下是如何在 Atom 中安裝 linter。

<code>apm install linter
apm install linter-js-standard</code>

就我個人而言，我發現鍵入時自動 lint 程序非常令人分心。如果您也有同樣的感覺，您可能更喜歡在完成工作後使用這些 linter。 standard 命令還有一個標誌可以自動修復某些樣式錯誤，這可能會節省您的時間。

<code>standard --fix</code>

採用 JavaScript Standard Style

您應該採用標準樣式嗎？好吧，這完全取決於您。

如果您沒有樣式指南，那麼請準備好應對意見衝突。

如果您已經完善了自己的理想規則集，並且希望在整個代碼庫中強制執行它，那麼 ESLint 可能是您正在搜索的內容。

如果您寧願不浪費時間在語法這些無聊的細節上，那麼請試用 JavaScript Standard Style，並在下面的評論中告訴我們您的想法。

關於 JavaScript 風格指南的常見問題

為什麼使用 JavaScript 風格指南很重要？

JavaScript 風格指南是一套標準，開發人員在編寫 JavaScript 代碼時遵循這些標準。它確保代碼的一致性、可讀性和可維護性。當多個開發人員在一個項目上工作時，至關重要的是他們都遵循相同的風格指南，以避免混淆並使代碼更易於理解和調試。它還有助於減少代碼中錯誤和漏洞的可能性。

如何使用 JavaScript 設置 HTML 元素的樣式？

您可以通過訪問元素的 style 屬性來使用 JavaScript 設置 HTML 元素的樣式。例如，如果您有一個 id 為“myElement”的元素，您可以將其背景顏色更改為紅色，如下所示： document.getElementById("myElement").style.backgroundColor = "red"; 這會將 CSS 樣式直接應用於元素。

開發人員常用的常見 JavaScript 風格指南有哪些？

開發人員使用的一些最常見的 JavaScript 風格指南包括 Airbnb 的 JavaScript 風格指南、Google 的 JavaScript 風格指南和 StandardJS。這些指南為語法、格式和最佳實踐提供了規則，以確保代碼乾淨、一致且易於閱讀。

如何在我的項目中強制執行 JavaScript 風格指南？

您可以使用像 ESLint 這樣的 linter 在您的項目中強制執行 JavaScript 風格指南。 linter 是一種工具，它分析您的代碼以查找潛在的錯誤和違反您的風格指南的情況。您可以配置 ESLint 以遵循您選擇的風格指南的規則，並且當您的代碼違反這些規則時，它會提醒您。

我可以創建自己的 JavaScript 風格指南嗎？

是的，您可以創建自己的 JavaScript 風格指南。但是，通常使用社區已經測試和驗證的現有風格指南效率更高。如果您有現有風格指南未涵蓋的特定需求，您可以創建自己的規則並將其添加到您的 linter 配置中。

JavaScript 中內聯樣式和外部樣式有什麼區別？

內聯樣式使用 style 屬性直接應用於 HTML 元素，而外部樣式在單獨的 CSS 文件中定義並鏈接到 HTML 文檔。雖然內聯樣式對於小型項目或快速修復非常方便，但對於大型項目，通常更傾向於使用外部樣式，因為它們可以提高可重用性和關注點分離。

如何使用 JavaScript 從 HTML 元素中刪除樣式？

您可以通過將 style 屬性設置為空字符串來使用 JavaScript 從 HTML 元素中刪除樣式。例如，要從 id 為“myElement”的元素中刪除背景顏色，您可以執行以下操作： document.getElementById("myElement").style.backgroundColor = ""; 這將從元素中刪除內聯樣式。

使用帶有 JavaScript 風格指南的 linter 有什麼好處？

使用帶有 JavaScript 風格指南的 linter 可以幫助您在錯誤和不一致成為問題之前捕獲它們。它還可以通過強制執行最佳實踐和样式規則來幫助您編寫更乾淨、更易於閱讀的代碼。此外，它還可以通過自動修復某些類型的錯誤和格式問題來節省您的時間。

如何使用 JavaScript 將多個樣式應用於 HTML 元素？

您可以通過設置多個 style 屬性來使用 JavaScript 將多個樣式應用於 HTML 元素。例如，要設置 id 為“myElement”的元素的背景顏色和字體大小，您可以執行以下操作： var elem = document.getElementById("myElement"); elem.style.backgroundColor = "red"; elem.style.fontSize = "20px"; 這會將兩種樣式都應用於該元素。

我可以使用 JavaScript 來設置偽元素的樣式嗎？

不可以，JavaScript 無法直接設置偽元素（如 ::before 和 ::after）的樣式。這些是 CSS 規範的一部分，只能使用 CSS 來設置樣式。但是，您可以使用 JavaScript 向元素添加或刪除類，並且這些類可以在您的 CSS 中具有與偽元素相關的樣式。

以上是為什麼我使用JavaScript樣式指南以及為什麼也應該使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！