有了已建立的JavaScript框架，例如React，Vue，Angular和Svelte已經(jīng)很受歡迎，是否需要另一個(gè)JavaScript庫(kù)？讓我們檢查Alpine.js，看看它是否適合您的需求。 Alpine.js非常適合開(kāi)發(fā)人員，而不是構(gòu)建單頁(yè)應(yīng)用程序（SPA）。它的輕巧性質(zhì)（?7kb Gzped）和標(biāo)記驅(qū)動(dòng)的方法使其成為一個(gè)引人注目的選擇。

它的語(yǔ)法從VUE和Angular指令借用，為對(duì)這些框架所經(jīng)歷的開(kāi)發(fā)人員提供了熟悉。但是，與他們不同，Alpine.js並不是為水療中心設(shè)計(jì)的。相反，它以最小的JavaScript增強(qiáng)了模板。

例如，考慮一個(gè)交互式“警報(bào)”組件：使用x-model="msg" ，警報(bào)消息是雙向綁定到輸入的雙向綁定，並且警報(bào)級(jí)別由反應(yīng)性level屬性控制。僅當(dāng)msg和level都具有值時(shí)，該警報(bào)才會(huì)出現(xiàn)。

Alpine.js：現(xiàn)代的jQuery替代品

Alpine.js充當(dāng)JQuery和Vanilla JavaScript的Vue替代品，而不是反應(yīng)，VUE或SVELTE的競(jìng)爭(zhēng)者。

Alpine.js是相對(duì)較新的，可以利用JQuery不可用的現(xiàn)代DOM API。讓我們比較：

數(shù)據(jù)綁定與DOM操縱

JQuery的大小在很大程度上源於其跨瀏覽器兼容性層，以進(jìn)行命令式操縱。 Alpine.js使用x-bind屬性綁定指令提供了一種聲明性方法，將數(shù)據(jù)鏈接到DOM。對(duì)於綁定不足的情況（例如，集成第三方庫(kù)）， x-ref提供了直接的DOM元素訪問(wèn)。

事件處理

JQuery管理活動(dòng)； Alpine.js使用x-on指令和$event來(lái)處理它們，以及$dispatch觸發(fā)自定義事件。

過(guò)渡和動(dòng)畫

jQuery的動(dòng)畫功能在Alpine.js的x-transition指令中鏡像，該指令在過(guò)渡過(guò)程中添加和刪除類，類似於Vue的過(guò)渡API。但是，Alpine.js缺乏與JQuery的Ajax相同的內(nèi)置。開(kāi)發(fā)人員可以使用Fetch API或第三方庫(kù)（Axios，KY，Superagent）。

可擴(kuò)展性和插件

目前，Alpine.js缺乏與JQuery相當(dāng)?shù)膹?qiáng)大插件生態(tài)系統(tǒng)。共享組件很簡(jiǎn)單 - 通常是一個(gè)簡(jiǎn)單的複製紙 - 組件中的JavaScript是獨(dú)立功能。關(guān)於添加自定義指令並擴(kuò)展其功能的討論可能受到VUE.JS API的啟發(fā)。

大小和性能

Alpine.js明顯小於jQuery（7.1kb Gzb vs. 30.4kb的jQuery），大約是23％。這部分是由於其聲明性的DOM操縱，避免了虛擬DOM的開(kāi)銷（與VUE不同）。

一個(gè)實(shí)踐的例子：口袋妖怪搜索

Alpine.js的緊湊性在其聲明性方法中很明顯。口袋妖怪搜索示例說(shuō)明了這一點(diǎn)：使用x-data定義組件，功能初始化數(shù)據(jù)和方法，以及x-init以進(jìn)行初始執(zhí)行。

綁定和事件聽(tīng)眾使用類似VUE的語(yǔ)法：

• Alpine： x-bind:attribute="expression"和x-on:eventName="expression" （shorthand ：： :attribute="expression"和@eventName="expression" ）
• vue： v-bind:attribute="expression"和v-on:eventName="expression" （shorthand ：： :attribute="expression" and @eventName="expression" ）

列表渲染使用x-for ，有條件的渲染使用x-if 。請(qǐng)注意，alpine.js沒(méi)有插值（例如{{ myValue }} in vue）;相反， x-text和x-html直接操縱Node.innerText和Node.innerHTML 。

一個(gè)可比的jQuery示例將涉及多個(gè)步驟：命令按鈕點(diǎn)擊綁定，檢索輸入值，API調(diào)用和DOM更新。

以HTML為中心的開(kāi)發(fā)

受parwindcss的啟發(fā)，Alpine.js強(qiáng)調(diào)以HTML為中心的發(fā)展。這在無(wú)訪問(wèn)的導(dǎo)航菜單示例中舉例說(shuō)明了不需要腳本標(biāo)籤：aria屬性（ aria-labelledby ， aria-controls ， aria-expanded ）直接在HTML內(nèi)管理，Alpine.js處理動(dòng)態(tài)更新。

這種以HTML為中心的方法簡(jiǎn)化了共享組件，並與服務(wù)器渲染（Laravel，Rails，Django）或靜態(tài)站點(diǎn)生成器（Hugo，Hexo，Jekyll）完善。

CDN優(yōu)先和無(wú)構(gòu)建

Alpine.js設(shè)計(jì)用於通過(guò)CDN直接包含，簡(jiǎn)化集成並消除構(gòu)建步驟。雖然VUE可以類似地使用，但它犧牲了關(guān)鍵功能，例如Vue CLI，單文件組件和無(wú)建築物時(shí)優(yōu)化的捆綁包。

總而言之，Alpine.js為JQuery提供了現(xiàn)代，輕巧且無(wú)構(gòu)建的替代品，提供了聲明性的渲染，而沒(méi)有更大的框架的複雜性。如果您需要避免使用水療體系結(jié)構(gòu)的JQuery替換，則值得考慮Alpine.js。有關(guān)更多信息，請(qǐng)?zhí)剿鰽lpine.js每週。

以上是Alpine.js：JavaScript框架像JQuery一樣使用，像Vue一樣寫，並受到TailWindCSS的啟發(fā)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！