Alpine.js：JavaScript框架像JQuery一樣使用，像Vue一樣寫，並受到TailWindCSS的啟發

有了已建立的JavaScript框架，例如React，Vue，Angular和Svelte已經很受歡迎，是否需要另一個JavaScript庫？讓我們檢查Alpine.js，看看它是否適合您的需求。 Alpine.js非常適合開發人員，而不是構建單頁應用程序（SPA）。它的輕巧性質（〜7kb Gzped）和標記驅動的方法使其成為一個引人注目的選擇。

它的語法從VUE和Angular指令借用，為對這些框架所經歷的開發人員提供了熟悉。但是，與他們不同，Alpine.js並不是為水療中心設計的。相反，它以最小的JavaScript增強了模板。

例如，考慮一個交互式“警報”組件：使用x-model="msg" ，警報消息是雙向綁定到輸入的雙向綁定，並且警報級別由反應性level屬性控制。僅當msg和level都具有值時，該警報才會出現。

Alpine.js：現代的jQuery替代品

Alpine.js充當JQuery和Vanilla JavaScript的Vue替代品，而不是反應，VUE或SVELTE的競爭者。

Alpine.js是相對較新的，可以利用JQuery不可用的現代DOM API。讓我們比較：

數據綁定與DOM操縱

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

事件處理

JQuery管理活動； Alpine.js使用x-on指令和$event來處理它們，以及$dispatch觸發自定義事件。

過渡和動畫

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

可擴展性和插件

目前，Alpine.js缺乏與JQuery相當的強大插件生態系統。共享組件很簡單 - 通常是一個簡單的複製紙 - 組件中的JavaScript是獨立功能。關於添加自定義指令並擴展其功能的討論可能受到VUE.JS API的啟發。

大小和性能

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

一個實踐的例子：口袋妖怪搜索

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

綁定和事件聽眾使用類似VUE的語法：

• 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 。請注意，alpine.js沒有插值（例如{{ myValue }} in vue）;相反， x-text和x-html直接操縱Node.innerText和Node.innerHTML 。

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

以HTML為中心的開發

受parwindcss的啟發，Alpine.js強調以HTML為中心的發展。這在無訪問的導航菜單示例中舉例說明了不需要腳本標籤：aria屬性（ aria-labelledby ， aria-controls ， aria-expanded ）直接在HTML內管理，Alpine.js處理動態更新。

這種以HTML為中心的方法簡化了共享組件，並與服務器渲染（Laravel，Rails，Django）或靜態站點生成器（Hugo，Hexo，Jekyll）完善。

CDN優先和無構建

Alpine.js設計用於通過CDN直接包含，簡化集成並消除構建步驟。雖然VUE可以類似地使用，但它犧牲了關鍵功能，例如Vue CLI，單文件組件和無建築物時優化的捆綁包。

總而言之，Alpine.js為JQuery提供了現代，輕巧且無構建的替代品，提供了聲明性的渲染，而沒有更大的框架的複雜性。如果您需要避免使用水療體系結構的JQuery替換，則值得考慮Alpine.js。有關更多信息，請探索Alpine.js每週。

以上是Alpine.js：JavaScript框架像JQuery一樣使用，像Vue一樣寫，並受到TailWindCSS的啟發的詳細內容。更多資訊請關注PHP中文網其他相關文章！