你好，Stimulus
了解 Stimulus 工作原理的最佳方法是构建一个简单的控制器。本章将向你展示如何操作。
﹟ 先决条件
要继续操作，你需要运行 stimulus-starter 项目的副本，这是一个预先配置的空白模板，用于探索 Stimulus。
我们建议在 Glitch 上混编 stimulus-starter，这样你就可以完全在浏览器中工作，而无需安装任何内容。
或者，如果你希望在自己的文本编辑器的舒适环境中工作，则需要克隆并设置 stimulus-starter
$ git clone https://github.com/hotwired/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start
然后在浏览器中访问 https://127.0.0.1:9000/。
（请注意，stimulus-starter 项目使用 Yarn 包管理器 进行依赖管理，因此请确保首先安装该管理器。）
﹟一切都始于 HTML
我们从使用文本字段和按钮的简单练习开始。当你单击该按钮时，我们将在控制台中显示文本字段的值。
每个 Stimulus 项目都从 HTML 开始。打开 public/index.html，并在 <body> 标记的正后方添加以下标记
<div>
<input type="text">
<button>Greet</button>
</div>在浏览器中重新加载页面，你应该会看到文本字段和按钮。
﹟控制器让 HTML 栩栩如生
从本质上讲，Stimulus 的目的是自动将 DOM 元素连接到 JavaScript 对象。这些对象称为控制器。
让我们通过扩展框架内置的 Controller 类来创建我们的第一个控制器。在 src/controllers/ 文件夹中创建一个名为 hello_controller.js 的新文件。然后将以下代码放入其中
// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
}﹟ 标识符将控制器与 DOM 链接
接下来，我们需要告诉 Stimulus 此控制器应如何连接到我们的 HTML。我们通过在 <div> 上的 data-controller 属性中放置一个标识符来实现此目的
<div data-controller="hello">
<input type="text">
<button>Greet</button>
</div>标识符充当元素和控制器之间的链接。在这种情况下，标识符 hello 告诉 Stimulus 在 hello_controller.js 中创建控制器类的实例。您可以在 安装指南 中了解有关自动控制器加载工作原理的更多信息。
﹟ 这是个什么东西？
在浏览器中重新加载页面，您会看到没有任何变化。我们如何知道我们的控制器是否工作？
一种方法是在 connect() 方法中放置一个日志语句，Stimulus 会在每次控制器连接到文档时调用此方法。
在 hello_controller.js 中按如下方式实现 connect() 方法
// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log("Hello, Stimulus!", this.element)
}
}再次重新加载页面并打开开发者控制台。您应该看到 Hello, Stimulus! 后跟 <div> 的表示形式。
﹟ 操作响应 DOM 事件
现在让我们看看如何更改代码，以便在单击“问候”按钮时显示我们的日志消息。
首先将 connect() 重命名为 greet()
// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
greet() {
console.log("Hello, Stimulus!", this.element)
}
}我们希望在按钮的 click 事件触发时调用 greet() 方法。在 Stimulus 中，处理事件的控制器方法称为操作方法。
要将我们的操作方法连接到按钮的 click 事件，请打开 public/index.html 并向按钮添加一个 data-action 属性
<div data-controller="hello">
<input type="text">
<button data-action="click->hello#greet">Greet</button>
</div>﹟ 操作描述符说明
data-action值click->hello#greet称为操作描述符。此特定描述符表示
click是事件名称hello是控制器标识符greet是要调用的方法的名称
在浏览器中加载页面并打开开发者控制台。单击“Greet”按钮时，您应该会看到日志消息出现。
﹟ 目标将重要元素映射到控制器属性
我们将通过更改操作来向我们在文本字段中键入的任何名称问候来完成练习。
为了做到这一点，我们首先需要在控制器中引用输入元素。然后我们可以读取 value 属性来获取其内容。
Stimulus 让我们将重要元素标记为 目标，以便我们可以通过相应的属性在控制器中轻松引用它们。打开 public/index.html 并向输入元素添加一个 data-hello-target 属性
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">Greet</button>
</div>接下来，我们将通过向控制器的目标定义列表中添加 name 来为目标创建一个属性。Stimulus 将自动创建一个 this.nameTarget 属性，它返回第一个匹配的目标元素。我们可以使用此属性来读取元素的 value 并构建我们的问候字符串。
让我们试一试。打开 hello_controller.js 并像这样更新它
// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
const element = this.nameTarget
const name = element.value
console.log(`Hello, ${name}!`)
}
}然后在浏览器中重新加载页面并打开开发者控制台。在输入字段中输入您的姓名，然后单击“Greet”按钮。你好，世界！
﹟ 控制器简化重构
我们已经看到 Stimulus 控制器是 JavaScript 类的实例，其方法可以作为事件处理程序。
这意味着我们可以使用一系列标准重构技术。例如，我们可以通过提取 name getter 来清理我们的 greet() 方法
// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
console.log(`Hello, ${this.name}!`)
}
get name() {
return this.nameTarget.value
}
}﹟ 总结和下一步
恭喜——您刚刚编写了您的第一个 Stimulus 控制器！
我们已经涵盖了该框架最重要的概念：控制器、操作和目标。在下一章中，我们将看到如何将它们放在一起以构建一个直接取自 Basecamp 的真实控制器。