js简介:为极简主义者设计的JavaScript框架

前端JavaScript框架的创新是我们这个时代最伟大的技术文化现象之一。20多年来，我们见证了进化创造力的长尾展开。每一个新的想法都进入了公共的罐子，在开发软件的过程和开发人员构建的最终产品中激起了改进。

其中一个出名的框架是Alpine.js。Alpine是一种极简主义框架，顾名思义，适合在崎岖的地形上进行轻操作。它在一个精简的、易于掌握的包中提供了很多动力。本文将让您初步了解Alpine.js，这样您就可以理解它提供了什么，以及它在什么时候可能对您有用。

Alpine的极简API

随着Alpine.js文档Alpine的API是一个包含15个属性、6个属性和2个方法的集合。这是一个非常小的API配置文件。其极简主义的目的是以干净的格式提供反应性，并增加了一些周边的细节，如事件和中央商店。

考虑清单1中非常简单的web页面。

清单1。一个用Alpine.js构建的简单网页

     
  
 
      
      
map
 

除了通过CDN包含Alpine包(您可以了解推迟语义在这里)，这里只有两个与阿尔卑斯山相关的东西是指令x数据而且x-text．

如果将其放入系统上的HTML页面并在浏览器中查看，将看到消息输出“文本文字”。虽然这个应用程序不是特别令人印象深刻，但它演示了Alpine的两个有趣方面。

首先，为了使响应性生效，必须将标记包含在x数据指令。如果删除该指令，则x-text不生效。本质上，x数据指令创建一个Alpine组件。在本例中，x数据指令是空的。在实际使用中，这里几乎总是有数据;毕竟，您正在编写的组件的目的是响应数据。

清单1中要注意的第二点是，可以将任何有效的JavaScript放入x-text．所有的Alpine指令都是如此。

x-data和x-text元素

的x数据内容提供给所有包含的元素。要理解我的意思，请查看清单2。

清单2。x数据和x文本交互

  
 .

现在该页面将输出《独立宣言》的开头部分。你们可以看到x数据定义了一个简单的JavaScript对象，只有一个字段，“消息”，其中载有《宣言》的序言。的x-text引用该对象字段。

在Alpine.js中的反应

接下来，我们将使用反应性来修复声明中的错误。看一下清单3。

清单3。X-on:点击和反应

 修复   

的x-text指令现在应该不言自明了。它指的是代词变量。x数据指令。这里的新部件是按钮，它有一个x:点击指令。此单击事件的处理程序将旧的默认代词替换为中性代词，而响应性负责更新x-text。

数据中的函数

Alpine中的数据属性是功能齐全的JavaScript对象。让我们考虑处理上述需求的另一种方法，如清单4所示。

清单4。使用数据函数

 修复  

在清单4中，您可以看到数据对象现在托管了一个搞定由单击处理程序调用的方法。

顺便说一句，请注意，您有时会看到从x数据在脚本标记中定义的函数的指令-这是个人偏好，它的操作与内联完全相同x数据：

< div x数据= " myDataFunction() " >…< / div >… . 0

获取远程数据

现在让我们转换话题，考虑一个更复杂的需求。假设我们想从外部API加载一个json格式的美国总统列表。我们要做的第一件事是在页面加载时加载它。为此，我们将使用x-init指令，如清单5所示。

清单5。从x-init预加载数据

  
 .

这里发生了什么?首先，这个x数据指令应该是明确的:它只是有一个总统字段，使用空数组。的x-text在跨度元素输出此字段的内容。

的x-init代码更复杂一些。首先，请注意它被包装在一个自动执行的函数中。这是因为Alpine期望的是函数，而不是函数定义。的非异步回调形式获取，你不需要像这样包装函数。)

一旦我们从端点获得了总统列表，我们将其插入总统变量的一部分x数据对象。

重申一下:Alpine.js正在生成来自一个数据可用于其他指令函数(如x-init)。

使用Alpine.js迭代

此时，我们的应用程序正在从远程端点提取数据并将其保存到状态中。但是请注意，它输出类似于【对象】,【对象】……．这不是我们想要的。让我们看一下遍历数据的过程，如清单6所示。

清单6。使用Alpine.js迭代

< div x数据=…>< ul>