AAA教育

和網(wǎng)頁(yè)設(shè)計(jì)一樣，網(wǎng)頁(yè)開(kāi)發(fā)的技術(shù)發(fā)展也是非?？斓摹Ｈ招略庐惖那岸斯ぞ哔x予了前端越來(lái)越強(qiáng)大的開(kāi)發(fā)能力和效率，甚至改變網(wǎng)站建設(shè)的方式。而VirtualDOM 就是諸多改變前端開(kāi)發(fā)的工具之一。

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

 

MaquetteJS

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

 

ReDOM

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

 

ReactiveJS

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

 

RiotJS

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

 

HyperHTML

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

 

Mithril

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

 

SlimJS

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

 

VSVG

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

 

EmotionSH

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

 

React Starter Kit

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

 

Elements

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

 

Modaal

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

 

WordPressify

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

 

Lando

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

 

WP-Docklines

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

 

WP-Locker

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

 

Docusaurus

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

 

VSCode Yo

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

 

BluebirdJS

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

 

Prettier

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