avaScript 的Document.createElement()方法用于創(chuàng)建新的 HTML 元素。以下是實(shí)際效果：

const root = document.body;

const newElement = document.createElement('div');
newElement.textContent = 'Hello World';

root.append(newElement);

如您所見，創(chuàng)建元素很容易。令人厭煩的部分是必須設(shè)置其所有屬性，然后將其添加到 DOM。更糟糕的是，創(chuàng)建具有相同屬性集的多個(gè)元素需要大量重復(fù)的代碼。

幸運(yùn)的是，我們可以將元素創(chuàng)建抽象為一個(gè)函數(shù)。實(shí)際上，我們可以使用對象將屬性傳遞給元素。使用Object.entries()我們可以迭代對象并設(shè)置屬性。看起來是這樣的：

const root = document.body;

const createElement = (el, parent, prepend = false) => {
  const { nodeName = 'div', ...attrs } = el;
  const element = document.createElement(nodeName);
  Object.entries(attrs).forEach(([attr, value]) => {
    element[attr] = value;
  });
  if (prepend) parent.prepend(element);
  else parent.append(element);
};

createElement(
  {
    nodeName: 'div',
    textContent: 'Hello world',
  },
  root
);

createElement(
  {
    nodeName: 'p',
    textContent: 'Hi',
  },
  root,
  true
);

這非常有用，但是如果我們想要?jiǎng)?chuàng)建一個(gè)元素的 HTML 字符串會(huì)發(fā)生什么呢？我們有一個(gè)createElement 片段，它可以按照這些思路做一些事情。唯一缺少的部分是將其附加到父元素。

更多內(nèi)容請?jiān)L問我的網(wǎng)站：https://www.icoderoad.com

、可維護(hù)性代碼

通常說代碼可維護(hù)就意味著它具備以下的特點(diǎn)：

1. 容易理解，無須求助原始開發(fā)者，任何人一看代碼就知道它是干什么的，以及它是怎么實(shí)現(xiàn)的；
2. 符合常識(shí)，代碼中的一切都顯得順理成章，無論操作多么復(fù)雜；
3. 容易適配，即使數(shù)據(jù)發(fā)生變化也不用完全重寫；
4. 容易擴(kuò)展，代碼架構(gòu)經(jīng)過認(rèn)真設(shè)計(jì)，支持未來擴(kuò)展核心功能；
5. 容易調(diào)試，出問題時(shí)，代碼可以給出明確的信息，通過它能直接定位問題；

二、編碼規(guī)范-可讀性

要想讓代碼容易維護(hù)，首先必須使其可讀。代碼縮進(jìn)是保證可讀性的重要基礎(chǔ)，如果所有人都是用相同的縮進(jìn)，整個(gè)項(xiàng)目的代碼就會(huì)更容易讓人看懂。縮進(jìn)通常使用空格數(shù)而不是tab鍵來定義，因?yàn)閠ab鍵在不同文本編譯器中的顯示不同，一般來說縮進(jìn)是4個(gè)空格。

可讀性的另一方面是代碼注釋。在大多數(shù)的編程語言中，廣泛接受的做法是為每個(gè)方法都編寫注釋。

一般來說，以下地方應(yīng)該寫注釋：

1. 函數(shù)和方法，每個(gè)函數(shù)和方法都應(yīng)該有注釋來描述其用途，以及完成任務(wù)所用的算法。同時(shí)，也寫清楚這個(gè)函數(shù)或方法的前提，每個(gè)參數(shù)的含義，以及函數(shù)是否返回值。
2. 大型代碼塊，多行代碼但用于完成單一任務(wù)的，應(yīng)該在前面給出注釋，把要完成的任務(wù)寫清楚。
3. 復(fù)雜的算法，如果使用了獨(dú)特的方法解決問題，要通過注釋解釋明白。這樣不僅可以幫助別人查看代碼，也可以幫助自己今后查看代碼。
4. 使用黑科技，一些特殊的方法，特定的假設(shè)。

三、變量和函數(shù)命名

代碼中變量和函數(shù)的適當(dāng)命名對于其可讀性和可維護(hù)性至關(guān)重要。

1. 變量名應(yīng)該是名稱；
2. 函數(shù)名應(yīng)該以動(dòng)詞開始；
3. 變量、函數(shù)、方法都以小寫字母開頭，使用駝峰大小寫形式；
4. 名稱要盡量用描述性和直觀的詞匯，但不要過于冗長；

四、松散耦合

只要應(yīng)用程序的某個(gè)部分對另一部分依賴的過于緊密，代碼就會(huì)變得緊密耦合，因而難以維護(hù)。

典型的問題是在一個(gè)對象中直接引用另一個(gè)對象，這樣，修改其中一個(gè)，可能必須還得修改另一個(gè)。緊密耦合的軟件難以維護(hù)，肯定需要頻繁的重寫。

1、解耦HTML和JavaScript

web開發(fā)中最常見的耦合是HTML和JavaScript，在網(wǎng)頁中，HTML和JavaScript分別代表不同層面的解決方案，HTML是數(shù)據(jù)，JavaScript是行為。這是因?yàn)樗鼈冎g要相互操作，需要通過不同的方式將這兩種技術(shù)聯(lián)系起來。可惜的是，其中一些方式會(huì)導(dǎo)致HTML與JavaScript緊密耦合。

把JavaScript直接嵌入在HTML中，要么使用包含嵌入代碼的

<!-- 使用<script>造成緊密耦合 -->

<script>

document.write("hello 哪吒編程");

</script>

<!-- 使用事件處理程序?qū)傩栽斐删o密耦合 -->

<input type="button" value="Click me" onclick="dosomething()"/>

雖然技術(shù)上這樣做沒有問題，但實(shí)踐中，這樣會(huì)將表示數(shù)據(jù)的HTML與定義行為的JavaScript緊密耦合在一起，理想情況下，HTML和JavaScript應(yīng)該完全分開，通過外部文件引入JavaScript，然后使用DOM添加行為。

一般來說，應(yīng)該避免在JavaScript中創(chuàng)建大量的HTML。同樣，這主要是為了做到數(shù)據(jù)層和行為層各司其職，在出錯(cuò)時(shí)更容易定位問題所在。

2、解耦CSS和JavaScript

web應(yīng)用程序的另一層是CSS，負(fù)責(zé)頁面樣式顯示、

JavaScript和CSS緊密相關(guān)，都構(gòu)建咋HTML之上，因此經(jīng)常一起使用。

CSS和JavaScript緊密相連的例子：

element.style.color = "red";

element.style.backgroundColor = "blue";

3、解耦應(yīng)用程序邏輯和事件處理程序

每個(gè)web應(yīng)用程序中都會(huì)有大量事件處理程序在監(jiān)聽各種事件。可是，其中很少能做到應(yīng)用程序邏輯與事件處理程序分離。

以下是解耦應(yīng)用程序邏輯和業(yè)務(wù)邏輯時(shí)應(yīng)該注意的幾點(diǎn)：

1. 不要把event對象傳給其他方法，而是只傳遞event對象中必要的數(shù)據(jù)；
2. 應(yīng)用程序中每個(gè)可能的操作都應(yīng)該無須事件處理程序就可以執(zhí)行；
3. 事件處理程序應(yīng)該處理事件，而把后續(xù)處理交給應(yīng)用程序邏輯；

做到以上幾點(diǎn)能夠給任何代碼的可維護(hù)性帶來巨大的提升，同時(shí)也能為將來的測試和開發(fā)提供很多可能性。

五、編碼慣例

1、尊重對象所有權(quán)

2、不聲明全局變量

最多可以創(chuàng)建一個(gè)全局變量，作為其他對象和函數(shù)的命名空間。

3、不要比較null

4、使用常量

1. 重復(fù)出現(xiàn)的值
2. 用戶界面字符串
3. URL
4. 任何可能變化的值

六、作用域意識(shí)

隨著作用域鏈中作用域數(shù)量的增加，訪問當(dāng)前作用域鏈外部變量所需要的時(shí)間也會(huì)增加，訪問全局變量始終比訪問局部變量要慢，因?yàn)楸仨毐闅v作用域鏈，任何可疑縮短遍歷作用域鏈時(shí)間的舉措都能提升代碼性能。

1、避免全局查找

改進(jìn)代碼性能非常重要的一件事，可能就是要提防全局查找。全局變量和函數(shù)相比于局部變量始終是最費(fèi)時(shí)間的，因?yàn)樾枰?jīng)歷作用域鏈查找。

如果for循環(huán)中多次引用document，可以通過在局部作用域中保存document對象的引用，能夠明顯提升這個(gè)函數(shù)的性能，因?yàn)橹恍枰饔糜蜴湶檎摇?/span>

2、不適用with語句

在性能很重要的代碼中，應(yīng)避免使用with語句，與函數(shù)類似，with語句會(huì)創(chuàng)建自己的作用域，因此也會(huì)加長其中代碼的作用域鏈。在with語句中的diamagnetic一定比在它外部執(zhí)行的代碼慢，因?yàn)樽饔糜蜴湶檎視r(shí)多一步。

七、優(yōu)化循環(huán)

循環(huán)時(shí)編程中常用的語法構(gòu)造，因此在JavaScript中十分常見，優(yōu)化這些循環(huán)時(shí)性能優(yōu)化的重要內(nèi)容，因?yàn)檠h(huán)會(huì)重復(fù)多次運(yùn)行相同的代碼，所以運(yùn)行時(shí)間會(huì)自動(dòng)增加。

1、簡化終止條件

因?yàn)槊看窝h(huán)都會(huì)計(jì)算終止條件，所以它應(yīng)該盡可能地快。

2、簡化循環(huán)體

循環(huán)體是最花時(shí)間的部分，因此要盡可能優(yōu)化。要確保其中不包含可以輕松轉(zhuǎn)移到循環(huán)外部的密集計(jì)算。

3、使用后測試循環(huán)

最常見的循環(huán)時(shí)for和while循環(huán)，這兩種循環(huán)都屬于先測試循環(huán)。do-while就是后測試循環(huán)，避免了對終止條件初始化評估，因此會(huì)更快。

4、展開循環(huán)

如果循環(huán)的次數(shù)是有限的，那么通常拋棄循環(huán)而直接多次調(diào)用函數(shù)會(huì)更快。

八、語句最少化

JavaScript代碼語句的數(shù)量影響執(zhí)行的速度。一條可以執(zhí)行多個(gè)操作的語句，比多條語句中每個(gè)語句執(zhí)行一個(gè)操作要快。那么優(yōu)化的目標(biāo)就是尋找可以合并的語句，以較少整個(gè)腳本的執(zhí)行時(shí)間。

1、多個(gè)變量聲明

2、插入迭代性值

任何時(shí)候只要使用迭代性值（遞增或者遞減），都要盡可能使用組合語句。

比如

let name = values[i++]

替代

let name = values[i];

i++;

3、使用數(shù)組和對象字面量

九、優(yōu)化DOM交互

在所有JavaScript代碼中，涉及DOM的部分無疑是非常慢的。DOM操作和交互需要占用大量時(shí)間，因?yàn)榻?jīng)常需要重新渲染整個(gè)或部分頁面。此外，看起來簡單的操作也可能花費(fèi)很長時(shí)間，因?yàn)镈OM中攜帶著大量信息。理解如何優(yōu)化DOM交互可以極大地提升腳本的執(zhí)行速度。

1、實(shí)時(shí)更新最小化

訪問DOM時(shí)，只要訪問的部分是顯示頁面的一部分，就是在執(zhí)行實(shí)時(shí)更新操作。之所以稱其為實(shí)時(shí)更新，是因?yàn)樯婕傲⒓锤马撁娴娘@示，讓用戶看到。每次這樣的更新，無論是插入一個(gè)字符還是刪除頁面上的一個(gè)內(nèi)容，都會(huì)導(dǎo)致性能損失。這是因?yàn)闉g覽器需要為此重新計(jì)算數(shù)千項(xiàng)指標(biāo)，之后才能執(zhí)行更新。實(shí)時(shí)更新的次數(shù)越多，執(zhí)行代碼所需的時(shí)間也越長。

2、使用innerHTML

在頁面中創(chuàng)建新DOM節(jié)點(diǎn)的方式有兩種，使用DOM方法如createElement()和appendChild()，以及使用innerHTML。對于少量DOM更新，兩種技術(shù)區(qū)別不大，但對于大量DOM更新，使用innerHTML要比使用標(biāo)準(zhǔn)DOM方法創(chuàng)建同樣的結(jié)構(gòu)快得多。

在給innerHTML賦值時(shí)，后臺(tái)會(huì)創(chuàng)建HTML解析器，然后使用原生DOM調(diào)用，而不是JavaScript的DOM方法來創(chuàng)建DOM結(jié)構(gòu)，原生DOM方法速度更快，因?yàn)樵摲椒〞r(shí)執(zhí)行編譯代碼而非解釋代碼。

3、使用委托事件

大多數(shù)web應(yīng)用程序會(huì)大量使用事件處理程序?qū)崿F(xiàn)用戶交互。一個(gè)頁面中事件處理程序的數(shù)量與頁面響應(yīng)用戶交互的速度有直接關(guān)系，為了減少對頁面響應(yīng)的影響，應(yīng)該盡可能使用事件委托。

事件委托利用了事件的冒泡，任何冒泡的事件都可以不在事件目標(biāo)上，而在目標(biāo)的任何祖先元素上處理。基于這個(gè)認(rèn)知，可以把事件處理程序添加到負(fù)責(zé)多個(gè)目標(biāo)的高層元素上。只要可能，就應(yīng)該在文檔級添加事件處理程序，因?yàn)樵谖臋n級可以處理整個(gè)頁面的的事件。

4、注意HTMLCollection

由于web應(yīng)用程序存在很大的性能問題，只要訪問HTMLCollection，無論是它的屬性還是方法，就會(huì)觸發(fā)查詢文檔，而這個(gè)查詢相當(dāng)耗時(shí)，減少訪問HTMLCollection的次數(shù)可以極大地提升腳本的性能。

可以優(yōu)化HTMLCollection訪問最關(guān)鍵的地方就是循環(huán)。

十、JavaScript思維導(dǎo)圖

[機(jī)智]點(diǎn)擊獲取資料