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中文网其他相关文章！