共计 3335 个字符，预计需要花费 9 分钟才能阅读完成。
学习 Stimulus 的最简单方式就是构建一个简单的控制器。这一章我们就来学习一个。
先决条件
要往下继续，你需要运行一个 stimulus-starter，它是一个用于探索 Stimulus 的预配置骨架。
推荐使用 remixing stimulus-starter on Glitch，这样就能完整地在浏览器里运行了，而且不需要再安装其他东西：Remix on Glitch
或者, 如果你喜欢使用自己的舒适的文本编辑器, 您将需要克隆并设置 stimulus-starter:
$ git clone https://github.com/stimulusjs/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start 请输入代码
然后在浏览器中访问 http://localhost:9000/。
(注意 stimulus-starter 使用 Yarn 来管理依赖，你得先安装它。)
从 HTML 起步
我们从一个简单的练习开始：带按钮的文本域。点击按钮时，让文本域的值显示在控制台。
每个 Stimulus 项目都是从 HTML 开始的，此项目也不例外。编辑 public/index.html 并在 <body> 标签后面添加以下代码：
<div>
<input type=”text”>
<button>Greet</button>
</div>
然后刷新页面，便能看到文本域和按钮了。
控制器为 HTML 带来生命力
作为其核心，Stimulus 的目标是自动将 DOM 元素连接到 JavaScript 对象。这些对象由控制器调用。
我们一起来通过拖拽框架内置的控制器类创建第一个控制器。在 src/controllers/ 文件夹里创建一个 hello_controller.js 文件。然后放入以下代码：
// src/controllers/hello_controller.js
import {Controller} from “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() 方法中添加一个 log 状态，控制器链接到 HTML 时 Stimulus 就会触发它。
在 hello_controller.js 实现 connect() 方法：
// src/controllers/hello_controller.js
import {Controller} from “stimulus”
export default class extends Controller {
connect() {
console.log(“Hello, Stimulus!”, this.element)
}
}
刷新页面，你就能在控制台中看到 Hello, Stimulus! 了。
Actions Respond to DOM Events
现在，我们看下，如何修改代码让 log 信息在点击“Greet”按钮时显示。
首先，将 connect() 重命名为 greet()：
// src/controllers/hello_controller.js
import {Controller} from “stimulus”
export default class extends Controller {
greet() {
console.log(“Hello, Stimulus!”, this.element)
}
}
我们想要在按钮的点击事件触发时调用 greet() 方法。在 Stimulus 中，处理事件的控制器方法叫做操作（action）方法。
将 action 方法连接到按钮的点击事件。public/index.html 并添加魔法属性 data-action 到按钮上：
<div data-controller=”hello”>
<input type=”text”>
<button data-action=”click->hello#greet”>Greet</button>
</div>
操作描述符（action descriptor）解释
data-action 的值 value click->hello#greet 被成为操作描述符。这里的意思是：
click 是事件名称
hello 是控制器标识符
greet 要调用的方法名
刷新页面并打开开发者控制台。你就能在点击“Greet”按钮时看到 log 信息了。
将重要元素映射到控制器属性中
我们即将完成此次练习，修改 action 使其对我们输入到文本域里的任何名字都说 hello。
要实现它，首先我们需要在控制器中引用 input 元素。然后就能通过读取它的值获取输入的内容了。
Stimulus 让我们将重要元素标记为目标（target），然后我们就能轻松地在控制器中通过相应的属性引用这些元素了。打开 public/index.html 添加魔法属性 data-target 到 input 元素：
<div data-controller=”hello”>
<input data-target=”hello.name” type=”text”>
<button data-action=”click->hello#greet”>Greet</button>
</div>
﹟目标描述符（Target Descriptors）解释 data-target 的值 hello.name 被称为目标描述符. 这里的意思是：
hello 是控制器标识符
name 是目标的名称
在我们将 name 添加到控制器的目标描述符列表中时，Stimulus 会自动创建一个 this.nameTarget 属性，它会返回第一个匹配到的目标元素。我们可以使用这个属性读取元素的值并构建欢迎字符串。
我们来试试。打开 hello_controller.js 然后这样修改：
// src/controllers/hello_controller.js
import {Controller} from “stimulus”
export default class extends Controller {
static targets = [“name”]
greet() {
const element = this.nameTarget
const name = element.value
console.log(`Hello, ${name}!`)
}
}
然后刷新页面，打开控制塔。在输入框中输入你的名字，点击“Greet”按钮。Hello, world!
控制器简化重构
我们已经知道 Stimulus 控制器是 JavaScript 类的实例。该类的方法可以作为事件处理器使用。
这意味这我们拥有了标准的重构技术兵工厂。比如，我们可以通过提取 name getter 来清理 greet() 方法：
// src/controllers/hello_controller.js
import {Controller} from “stimulus”
export default class extends Controller {
static targets = [“name”]
greet() {
console.log(`Hello, ${this.name}!`)
}
get name() {
return this.nameTarget.value
}
}
总结和后续步骤
恭喜！你写出了你的第一个 Stimulus 控制器！
本文我们覆盖了该框架的核心概念：controllers, identifiers, actions, 和 targets。在下一章，我们将了解如何组件这些东西构建正儿八经的控制器，呃，像 Basecamp 那样。
Next: Building Something Real
