何为 Stimulus JS 以及如何在 Laravel 中使用
Basecamp 团队已经发布了一个名为 Stimulus 的新 Javascript 框架 (v1.0.0)，该框架于 1月 30日上市。Stimulus 与某些较流行的前端 JavaScript 框架大相径庭，声称 HTML 内容与行为之间的关系更加分离：
Stimulus 是一个有野心的 JavaScript 框架。与其他框架不同，Stimulus 不会接管您应用程序的整个前端。而是通过自动将元素连接到 JavaScript 对象来扩充 HTML。
该文档解释说，HTML 行为与内容之间的分隔是通过 data-controller 建立 HTML 到 JavaScript 的桥梁。
这是一个简单的示例，我认为这很易懂：
<div data-controller="hello">
<input type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
这是 hello 控制器代码：
// src/controllers/hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
greet() {
console.log("Hello, Stimulus!", this.element)
}
}
Tdata-action="click->hello#greet" 按钮属性是这里的标签；您可以按以下方式细分值：
click是事件名称hello是控制器标识符greet是要调用的方法的名称
我们可以将重要元素标记为目标，以在控制器中引用它们：
<div data-controller="hello">
<input data-target="hello.name" type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
data-target 值是控制器名称和目标名称。在控制器中引用此值的方法如下：
// 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}!`)
}
}
由于这是一个 JavaScript 类，因此我们可以受益于 name getter：
// 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
}
}
这些例子来自 Hello Stimulus 简介。Stimulus 还可以直接使用 Turbolinks，这对于加速传统服务器端应用程序很有用。
您应该查看 安装指南 和 stimulus starter 以开始使用该框架。
在 Laravel 中使用 Stimulus
开始我还在 GitHub 快速存储库中试用 Stimulus，Turbolinks 和 Laravel paulredmond/stimulus-laravel-demo. 这是我使其运行所需要做的所有事情的要点：
yarn add stimulus turbolinks
yarn add --dev babel-plugin-transform-class-properties
将以下内容添加到项目根目录中的 .babelrc 文件中：
{
"plugins": ["transform-class-properties"],
"presets": [
["env", { "modules": false }]
]
}
接下来，创建一个 resources/assets/js/controllers 文件夹，并在 resources/assets/js/app.js 文件中替换以下内容：
var Turbolinks = require("turbolinks")
Turbolinks.start()
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
最后一个重要说明：
Turbolinks 必须位于 HTML 文档的 <head> 中。通过 XHR 获取文档后导航时会替换 <body>，因此脚本需要位于 <body> 标记之外。
因此只需将 app.js 文件添加到头部即可，如下所示：
<head>
<!-- ... -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ mix('js/app.js') }}"></script>
</head>
干杯!
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：