建HTML網(wǎng)頁時(shí)，可以采用多種布局和設(shè)計(jì)風(fēng)格。以下是一些常見的網(wǎng)頁形態(tài)名稱，可用于不同的網(wǎng)站設(shè)計(jì)和功能需求：

1. **門戶網(wǎng)站** - 集成了新聞、天氣預(yù)報(bào)、郵箱等服務(wù)的網(wǎng)站。

2. **企業(yè)網(wǎng)站** - 用于展示公司信息、產(chǎn)品和服務(wù)。

3. **電子商務(wù)網(wǎng)站** - 用于在線銷售商品。

4. **博客** - 用于個(gè)人或公司發(fā)布文章和日志。

5. **社交媒體網(wǎng)站** - 如Facebook和Twitter，用于社交互動。

6. **論壇** - 用戶可以發(fā)帖和回帖討論特定主題。

7. **新聞網(wǎng)站** - 提供新聞文章和更新。

8. **教育網(wǎng)站** - 用于在線課程和學(xué)術(shù)資源。

9. **政府網(wǎng)站** - 提供政府服務(wù)和信息。

10. **非營利組織網(wǎng)站** - 用于宣傳和籌款。

11. **個(gè)人作品集** - 展示個(gè)人作品，如設(shè)計(jì)師和藝術(shù)家。

12. **在線百科全書** - 如維基百科，提供大量信息。

13. **食譜網(wǎng)站** - 提供食譜和烹飪技巧。

14. **健康與健身網(wǎng)站** - 提供健康和健身相關(guān)內(nèi)容。

15. **旅行網(wǎng)站** - 提供旅行信息和預(yù)訂服務(wù)。

16. **房地產(chǎn)網(wǎng)站** - 展示房產(chǎn)信息和經(jīng)紀(jì)人。

17. **汽車網(wǎng)站** - 提供汽車信息和銷售服務(wù)。

18. **科技新聞網(wǎng)站** - 關(guān)注最新科技發(fā)展和產(chǎn)品。

19. **音樂網(wǎng)站** - 提供音樂播放和下載。

20. **視頻分享網(wǎng)站** - 如YouTube，用戶可以上傳和分享視頻。

21. **電影數(shù)據(jù)庫** - 如IMDb，提供電影信息和評論。

22. **體育網(wǎng)站** - 提供體育新聞和賽事信息。

23. **財(cái)經(jīng)網(wǎng)站** - 提供股票市場和財(cái)經(jīng)新聞。

24. **攝影網(wǎng)站** - 展示和分享攝影作品。

25. **時(shí)尚網(wǎng)站** - 提供時(shí)尚新聞和趨勢。

26. **寵物網(wǎng)站** - 提供寵物護(hù)理和相關(guān)信息。

27. **美食博客** - 分享美食制作和餐廳評論。

28. **兒童網(wǎng)站** - 提供兒童教育和娛樂內(nèi)容。

29. **DIY網(wǎng)站** - 提供手工制作和DIY項(xiàng)目。

30. **游戲網(wǎng)站** - 提供在線游戲和游戲新聞。

31. **星座占卜網(wǎng)站** - 提供星座運(yùn)勢和占卜。

32. **招聘網(wǎng)站** - 提供職位信息和求職服務(wù)。

33. **個(gè)人博客** - 個(gè)人分享生活和觀點(diǎn)的博客。

34. **科技博客** - 關(guān)注科技產(chǎn)品和公司動態(tài)。

35. **書評網(wǎng)站** - 提供書籍評論和推薦。

36. **旅游博客** - 分享旅行經(jīng)歷和攻略。

37. **藝術(shù)畫廊網(wǎng)站** - 展示和銷售藝術(shù)品。

38. **在線市場** - 如Etsy，提供手工藝品和獨(dú)特商品。

39. **在線課程平臺** - 提供各種在線課程和培訓(xùn)。

40. **語言學(xué)習(xí)網(wǎng)站** - 提供語言學(xué)習(xí)和練習(xí)工具。

41. **健康咨詢網(wǎng)站** - 提供健康和醫(yī)療建議。

42. **心理健康網(wǎng)站** - 提供心理健康信息和資源。

43. **個(gè)人財(cái)務(wù)網(wǎng)站** - 提供個(gè)人理財(cái)建議和工具。

44. **投資網(wǎng)站** - 提供投資策略和市場分析。

45. **環(huán)境與自然網(wǎng)站** - 關(guān)注環(huán)境保護(hù)和自然話題。

46. **歷史與文化網(wǎng)站** - 提供歷史和文化知識。

47. **宗教與靈性網(wǎng)站** - 提供宗教和靈性內(nèi)容。

48. **政治評論網(wǎng)站** - 提供政治新聞和評論。

49. **在線論壇** - 用戶可以討論各種主題。

50. **慈善網(wǎng)站** - 用于宣傳和籌集慈善捐款。

這些形態(tài)的名稱代表了不同的網(wǎng)站類型和功能，可以根據(jù)您的需求和目標(biāo)受眾選擇合適的網(wǎng)站形態(tài)。

碼必須盡可能的清晰和易讀。

這實(shí)際上是一種編程藝術(shù) —— 以一種正確并且人們易讀的方式編碼來完成一個(gè)復(fù)雜的任務(wù)。一個(gè)良好的代碼風(fēng)格大大有助于實(shí)現(xiàn)這一點(diǎn)。

一、語法

下面是一個(gè)備忘單，其中列出了一些建議的規(guī)則（詳情請參閱下文）：

現(xiàn)在，讓我們詳細(xì)討論一下這些規(guī)則和它們的原因吧。

沒有什么規(guī)則是“必須”的

沒有什么規(guī)則是“刻在石頭上”的。這些是風(fēng)格偏好，而不是宗教教條。

二、花括號

在大多數(shù)的 JavaScript 項(xiàng)目中，花括號以 “Egyptian” 風(fēng)格（譯注：“egyptian” 風(fēng)格又稱 K&R 風(fēng)格 — 代碼段的開括號位于一行的末尾，而不是另起一行的風(fēng)格）書寫，左花括號與相應(yīng)的關(guān)鍵詞在同一行上 — 而不是新起一行。左括號前還應(yīng)該有一個(gè)空格，如下所示：

if (condition) {
  // do this
  // ...and that
  // ...and that
}

單行構(gòu)造（如 if (condition) doSomething()）也是一個(gè)重要的用例。我們是否應(yīng)該使用花括號？如果是，那么在哪里？

下面是這幾種情況的注釋，你可以自己判斷一下它們的可讀性：

1. 初學(xué)者常這樣寫。非常不好！這里不需要花括號：if (n < 0) {alert(`Power ${n} is not supported`);}
2. 拆分為單獨(dú)的行，不帶花括號。永遠(yuǎn)不要這樣做，添加新行很容易出錯(cuò)：if (n < 0) alert(`Power ${n} is not supported`);
3. 寫成一行，不帶花括號 — 如果短的話，也是可以的：if (n < 0) alert(`Power ${n} is not supported`);
4. 最好的方式：if (n < 0) { alert(`Power ${n} is not supported`); }

對于很短的代碼，寫成一行是可以接受的：例如 if (cond) return null。但是代碼塊（最后一個(gè)示例）通常更具可讀性。

三、行的長度

沒有人喜歡讀一長串代碼，最好將代碼分割一下。

例如：

// 回勾引號 ` 允許將字符串拆分為多行
let str = `
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

對于 if 語句：

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

一行代碼的最大長度應(yīng)該在團(tuán)隊(duì)層面上達(dá)成一致。通常是 80 或 120 個(gè)字符。

四、縮進(jìn)

有兩種類型的縮進(jìn)：

• 水平方向上的縮進(jìn)：2 或 4 個(gè)空格。一個(gè)水平縮進(jìn)通常由 2 或 4 個(gè)空格或者 “Tab” 制表符（key Tab）構(gòu)成。選擇哪一個(gè)方式是一場古老的圣戰(zhàn)。如今空格更普遍一點(diǎn)。選擇空格而不是 tabs 的優(yōu)點(diǎn)之一是，這允許你做出比 “Tab” 制表符更加靈活的縮進(jìn)配置。例如，我們可以將參數(shù)與左括號對齊，像下面這樣：

show(parameters,
     aligned, // 5 spaces padding at the left
     one,
     after,
     another
  ) {
  // ...
}

• 垂直方向上的縮進(jìn)：用于將代碼拆分成邏輯塊的空行。即使是單個(gè)函數(shù)通常也被分割為數(shù)個(gè)邏輯塊。在下面的示例中，初始化的變量、主循環(huán)結(jié)構(gòu)和返回值都被垂直分割了：

function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

插入一個(gè)額外的空行有助于使代碼更具可讀性。寫代碼時(shí)，不應(yīng)該出現(xiàn)連續(xù)超過 9 行都沒有被垂直分割的代碼。

五、分號

每一個(gè)語句后面都應(yīng)該有一個(gè)分號。即使它可以被跳過。

有一些編程語言的分號確實(shí)是可選的，那些語言中也很少使用分號。但是在 JavaScript 中，極少數(shù)情況下，換行符有時(shí)不會被解釋為分號，這時(shí)代碼就容易出錯(cuò)。更多內(nèi)容請參閱 代碼結(jié)構(gòu) 一章的內(nèi)容。

如果你是一個(gè)有經(jīng)驗(yàn)的 JavaScript 程序員，你可以選擇像 StandardJS 這樣的無分號的代碼風(fēng)格。否則，最好使用分號以避免可能出現(xiàn)的陷阱。大多數(shù)開發(fā)人員都應(yīng)該使用分號。

六、嵌套的層級

盡量避免代碼嵌套層級過深。

例如，在循環(huán)中，有時(shí)候使用 continue 指令以避免額外的嵌套是一個(gè)好主意。

例如，不應(yīng)該像下面這樣添加嵌套的 if 條件：

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 又一層嵌套
  }
}

我們可以這樣寫：

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 沒有額外的嵌套
} //多用這種風(fēng)格。

使用 if/else 和 return 也可以做類似的事情。

例如，下面的兩個(gè)結(jié)構(gòu)是相同的。

第一個(gè)：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

第二個(gè)：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

但是第二個(gè)更具可讀性，因?yàn)?n < 0 這個(gè)“特殊情況”在一開始就被處理了。一旦條件通過檢查，代碼執(zhí)行就可以進(jìn)入到“主”代碼流，而不需要額外的嵌套。

七、函數(shù)位置

如果你正在寫幾個(gè)“輔助”函數(shù)和一些使用它們的代碼，那么有三種方式來組織這些函數(shù)。

1. 在調(diào)用這些函數(shù)的代碼的 上方 聲明這些函數(shù)：

// function declarations
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// the code which uses them
let elem = createElement();
setHandler(elem);
walkAround();

2. 先寫調(diào)用代碼，再寫函數(shù)

// the code which uses the functions
let elem = createElement();
setHandler(elem);
walkAround();

// --- helper functions ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

3. 混合：在第一次使用一個(gè)函數(shù)時(shí)，對該函數(shù)進(jìn)行聲明。

大多數(shù)情況下，第二種方式更好。

這是因?yàn)殚喿x代碼時(shí)，我們首先想要知道的是“它做了什么”。如果代碼先行，那么在整個(gè)程序的最開始就展示出了這些信息。之后，可能我們就不需要閱讀這些函數(shù)了，尤其是它們的名字清晰地展示出了它們的功能的時(shí)候。

八、風(fēng)格指南

風(fēng)格指南包含了“如果編寫”代碼的通用規(guī)則，例如：使用哪個(gè)引號、用多少空格來縮進(jìn)、一行代碼最大長度等非常多的細(xì)節(jié)。

當(dāng)團(tuán)隊(duì)中的所有成員都使用相同的風(fēng)格指南時(shí)，代碼看起來將是統(tǒng)一的。無論是團(tuán)隊(duì)中誰寫的，都是一樣的風(fēng)格。

當(dāng)然，一個(gè)團(tuán)隊(duì)可以制定他們自己的風(fēng)格指南，但是沒必要這樣做。現(xiàn)在已經(jīng)有了很多制定好的代碼風(fēng)格指南可供選擇。

一些受歡迎的選擇：

• Google JavaScript 風(fēng)格指南
• Airbnb JavaScript 風(fēng)格指南
• Idiomatic.JS
• StandardJS
• 還有很多……

如果你是一個(gè)初學(xué)者，你可以從本章中上面的內(nèi)容開始。然后你可以瀏覽其他風(fēng)格指南，并選擇一個(gè)你最喜歡的。

九、自動檢查器

檢查器（Linters）是可以自動檢查代碼樣式，并提出改進(jìn)建議的工具。

它們的妙處在于進(jìn)行代碼風(fēng)格檢查時(shí)，還可以發(fā)現(xiàn)一些代碼錯(cuò)誤，例如變量或函數(shù)名中的錯(cuò)別字。因此，即使你不想堅(jiān)持某一種特定的代碼風(fēng)格，我也建議你安裝一個(gè)檢查器。

下面是一些最出名的代碼檢查工具：

• JSLint — 第一批檢查器之一。
• JSHint — 比 JSLint 多了更多設(shè)置。
• ESLint — 應(yīng)該是最新的一個(gè)。

它們都能夠做好代碼檢查。我使用的是 ESLint。

大多數(shù)檢查器都可以與編輯器集成在一起：只需在編輯器中啟用插件并配置代碼風(fēng)格即可。

例如，要使用 ESLint 你應(yīng)該這樣做：

1. 安裝 Node.JS。
2. 使用 npm install -g eslint 命令（npm 是一個(gè) JavaScript 包安裝工具）安裝 ESLint。
3. 在你的 JavaScript 項(xiàng)目的根目錄（包含該項(xiàng)目的所有文件的那個(gè)文件夾）創(chuàng)建一個(gè)名為 .eslintrc 的配置文件。
4. 在集成了 ESLint 的編輯器中安裝/啟用插件。大多數(shù)編輯器都有這個(gè)選項(xiàng)。

下面是一個(gè) .eslintrc 文件的例子：

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": 2
  }
}

這里的 "extends" 指令表示我們是基于 “eslint:recommended” 的設(shè)置項(xiàng)而進(jìn)行設(shè)置的。之后，我們制定我們自己的規(guī)則。

你也可以從網(wǎng)上下載風(fēng)格規(guī)則集并進(jìn)行擴(kuò)展。有關(guān)安裝的更多詳細(xì)信息

此外，某些 IDE 有內(nèi)置的檢查器，這非常方便，但是不像 ESLint 那樣可自定義。

十、總結(jié)

本文描述的（和提到的代碼風(fēng)格指南中的）所有語法規(guī)則，都旨在幫助你提高代碼可讀性。它們都是值得商榷的。

當(dāng)我們思考如何寫“更好”的代碼的時(shí)候，我們應(yīng)該問自己的問題是：“什么可以讓代碼可讀性更高，更容易被理解？”和“什么可以幫助我們避免錯(cuò)誤？”這些是我們討論和選擇代碼風(fēng)格時(shí)要牢記的主要原則。

閱讀流行的代碼風(fēng)格指南，可以幫助你了解有關(guān)代碼風(fēng)格的變化趨勢和最佳實(shí)踐的最新想法。