[[218013]]

日新月異的前端工具賦予了前端越來越強(qiáng)大的開發(fā)能力和效率，甚至改變網(wǎng)站建設(shè)的方式。而VirtualDOM 就是諸多改變前端開發(fā)的工具之一。

DOM（文檔對象模型）是定義網(wǎng)站結(jié)構(gòu)的樹狀模型，選擇和遍歷DOM可能是一個(gè)成本極為高昂的操作，甚至?xí)苯佑跋窬W(wǎng)站的性能。當(dāng)然，關(guān)于DOM如何工作并不在今天的文章探討的范圍以內(nèi)，今天的文章更多的是推薦一些幫你更好實(shí)現(xiàn)VirtualDOM的庫和工具。

MaquetteJS

這是VirtualDOM的一種實(shí)現(xiàn)，你可以借助 MaquetteJS 創(chuàng)建流暢的用戶界面，并且隨時(shí)更新相關(guān)的數(shù)據(jù)。這是一個(gè)由純粹JS編寫的庫，它可以和注入 CoffeeScript、TypeScritp 和 JSX之類的合成語音一起使用。它僅有3kb，是React.js 的不錯(cuò)的替代品。

ReDOM

[[218014]]

這是我最喜歡的 VirtualDOM庫之一，你只需要看看它的語法就能快速上手。僅有2kb的 ReDOM能讓你快速渲染和自定義HTML組件。

ReactiveJS

這是一個(gè)用來構(gòu)建高交互化的Web應(yīng)用的模板化UI庫，ReactiveJS 最初是為TheGuardian 所構(gòu)建的，它有著跨瀏覽器和跨設(shè)備運(yùn)行的特性，所以它足夠可靠。ReactiveJS 還帶有許多Web 應(yīng)用所需要的功能，比如 Scoped CSS，自定義組件，SVG和動(dòng)效。

RiotJS

RiotJS 是一個(gè)對于初學(xué)者非常友好的庫，它允許使用HTML元素和屬性自定義組件，而其他的庫常常會(huì)強(qiáng)制要求使用純粹的JS語法。RiotJS 兼容 Node.js 環(huán)境和瀏覽器，并且可以用作 Vue.js 的替代品。

HyperHTML

[[218015]]

你可以使用 HyperHTML 來創(chuàng)建自定義的元素和Web組件，它和 jQuery 一樣簡單，你可以通過CDN加載腳本并訪問 HyperHTML，同樣的你也能在瀏覽器中輕松訪問它而無需任何復(fù)雜的工具。。

Mithril

Mithril 是一個(gè)聽起來很酷，功能也很強(qiáng)大的JS庫，除了VirutalDOM 和 租價(jià)你之外，Mithril 還配備了 Routing 和 XHR，你可以使用它來構(gòu)建單頁式Web應(yīng)用而不用依賴其他的庫。

SlimJS

SlimJS 是一個(gè)使用本地的Web 組件API來構(gòu)建自定義Web組件的 JS庫。由于它常常是圍繞著本地瀏覽器組件來使用的，因此 SlimJS 還配備了一個(gè) Polyfill，它可以將API填充到尚不支持它的瀏覽當(dāng)中。如果你喜歡采用本地化開發(fā)的方式，那么它是一個(gè)非常不錯(cuò)的框架。

VSVG

雖然它的語法和HTML非常相似，但是明顯有著自己的偏好。這個(gè)名為VSVG的庫，實(shí)際上允許你創(chuàng)建和控制SVG。

EmotionSH

EmotionSH 是一個(gè) CSS-in-JS 的框架，當(dāng)你使用 VirtualDOM 來創(chuàng)建網(wǎng)站的時(shí)候，可能會(huì)需要它。借助它你可以只釋出網(wǎng)站的CSS部分，并且可以動(dòng)態(tài)地更新樣式，而無需使用類命名和特定的功能。

React Starter Kit

如果你最近一直在關(guān)心前端相關(guān)的技術(shù)，會(huì)發(fā)現(xiàn)React 現(xiàn)在幾乎無處不在了。這個(gè)React Starter Kit 是一個(gè)針對新手的5個(gè)短視頻課程，幫你上手。

Elements

Elements 是一組iOS組件的合集，用來在 Sketch 中創(chuàng)建iOS APP的原型。

Modaal

Modaal 是一個(gè)通過了“WCAG 2.0 AA級別支持”的目前可訪問性最強(qiáng)的模型庫。它是輕量級的，兼容jQuery，可用于視頻、圖片甚至Instagram。

WordPressify

這是一個(gè)NPM軟件包，讓你在幾分鐘內(nèi)就可以擁有一個(gè)可以啟動(dòng)運(yùn)行的 WordPress 開發(fā)環(huán)境。所有的這一切都建立在現(xiàn)代化的工具注入 Gulp、LinveReload、PostCSS和Babel 之上，它們讓你可以更加專注于開發(fā)而非反復(fù)調(diào)整配置。

Lando

Lando也是一個(gè)可以快速方便地創(chuàng)建開發(fā)環(huán)境的工具，就像上面所提到的 WordPressify 一樣。不過，它利用的不是 Node.js ，而是 Docker 的清廉機(jī)容器化技術(shù)。

WP-Docklines

WP-Docklines 是一個(gè)圖像合集，它可以集成到 WordPress 主題或者運(yùn)用到諸如 Bitbucket、CircleCl和 Gitlab 等服務(wù)插件當(dāng)中去。每個(gè)圖像當(dāng)中都捆綁了開發(fā) WordPress 時(shí)通常所需要的工具，注入 PHP代碼修干起、PHPUnit 和 WP-CLI等。

WP-Locker

WP-Locker 基于 Docker Compose 配置，可以在幾分鐘內(nèi)創(chuàng)建一個(gè) WordPress 開發(fā)環(huán)境。它建立在 Apache、MySQL和 phpMyAdmin基礎(chǔ)之上，由于它擴(kuò)展了 WP-Docklines 的圖片，所以它還具備一些處理圖片的額外的工具。

Docusaurus

Docusaurus 也是源自Facebook 的一個(gè)開源項(xiàng)目，它是用來為你的項(xiàng)目創(chuàng)建網(wǎng)頁文檔的工具。它使用 React 和 Markdown 來創(chuàng)建，你可以用它來輕松地撰寫文檔，維護(hù)甚至為網(wǎng)站創(chuàng)建一個(gè)完整的博客。

VSCode Yo

Yeoman 是一個(gè)Node包，你可以通過選取預(yù)制的腳手架快速創(chuàng)建項(xiàng)目。如果你使用的是 Visual Studio，那么這個(gè)插件能夠幫你進(jìn)一步簡化工作流程，因?yàn)樗屇憧梢栽?Visual Studio 的代碼窗口中直接運(yùn)行 Yo 命令。

BluebirdJS

BluebirdJS 是一個(gè)讓你在所有瀏覽器中使用 Promise 、等待和異步等特性，甚至 Netscape 都可以使用。Promise 是最新的 Javascript 規(guī)范中重點(diǎn)強(qiáng)調(diào)的功能，它能讓代碼更加精簡、易讀和易于維護(hù)。

Prettier

Prettier 是一個(gè)幫你格式化代碼以符合語言規(guī)范和標(biāo)準(zhǔn)的工具，它會(huì)幫你從頭到尾重寫代碼，確保你的團(tuán)隊(duì)協(xié)作更加有效率，而不需要在代碼風(fēng)格上來回討論。