Stimulus：为喜欢HTML的人设计的JavaScript框架

Stimulus是什么？Stimulus 是一个“谦虚的javascript框架”，由 Basecamp 的人们为您带来 Rails 构建。

在许多方面，它与当今可用的其他现代框架相反。虽然您可能会看到一些类似的概念和命名，但 Stimulus 在一些基本方面是非常不同的。我们将简要讨论这些差异，然后使用 Stimulus 构建我们的第一个应用程序。

Stimulus：为喜欢HTML的人设计的JavaScript框架第1张

dom：A Place for State?

许多现代框架的核心概念在于将“状态”与“DOM”分开。通过这种方式，DOM 仅充当它所表示的数据的客户端。

Stimulus 颠覆了这个概念，而是依靠 DOM 来保持状态。

这最终意味着 Stimulus 最适合提供 html 服务的应用程序（而不是例如与 JSON api集成）。

使用 Stimulus，您不会看到 HTML 模板。相反，您将看到 data-* 将 HTML 连接到 JavaScript 应用程序的属性。

这也意味着您不会看到像在 handlebars 或reacteach中看到的那样的东西或循环。map

除非您明确创建该功能，否则 Stimulus 不负责呈现 HTML。

所以......它有什么作用？

所以 Stimulus 不会渲染模板。相反，它旨在将您在应用程序前端执行的操作和事件连接到后端的控制器。

Stimulus 使用三个概念来实现这一点： 目标、控制器和动作。

但在我们深入之前，让我们继续在您的计算机上启动并运行 Stimulus！

设置

此设置假定您已经在您的计算机上安装了最新版本的node JS。如果您还没有这样做，请前往nodejs.org 。

我们将使用一个 index.html 最初看起来像这样的基本静态文件：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./dist/bundle.css">
  </head>
  <body>
    <!-- application code will go here -->
    <script src="./dist/bundle.js"></script>
  </body>
</html>

注意：在本教程中，我们实际上不会介绍 CSS 的任何样式或构建过程。

接下来，创建一个名为 src. 在内部 src，创建另一个名为 controllers 和单个 index.js 文件的文件夹。

我们将使用webpack 来构建我们的 javaScript 应用程序，因为 Stimulus 使用了 JavaScript 的一些高级特性，这些特性不能直接在浏览器中运行。

在项目的根目录中创建一个名为的文件，该文件 package.json 具有以下内容：

{
    "name": "wdstimulus",
    "version": "1.0.0",
    "description": "Stimulus Introduction",
    "scripts": {},
    "author": "Your Name",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.0.0-beta.39",
        "@babel/preset-env": "^7.0.0-beta.39",
        "babel-loader": "^8.0.0-beta.0",
        "babel-preset-stage-0": "^6.24.1",
        "stimulus": "^1.0.0",
        "webpack": "^3.10.0"
    }
}

注意：这些版本将来会发生变化，我们建议尽可能保持最新版本的任何工具。

您还可以使用生成此文件 npm init 并使用 npm install [package-name].

该文件包含我们创建 Stimulus 应用程序的浏览器兼容版本所需的一切。从应用程序的根目录运行 npm install. 这会将这些依赖项安装在 node_modules 应用程序内的目录中。

接下来，我们将创建一个配置文件，以便 Webpack 在保存文件时知道我们希望它对我们的文件做什么。在所在的同一根目录中 package.json ，创建一个名为的文件 webpack.config.js，并添加以下内容：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/env"],
                        plugins: ["transform-class-properties"]
                    }
                }
            }
        ]
    }
};

这个文件本质上是告诉 Webpack 使用 env 预设来编译我们的 JavaScript。我们的节点模块中有 stage-0 预设，我们还添加了所需的 transform-class-properties 插件。

为 Stimulus 应用程序做好准备的最后一步是在我们的 index.js 文件中填写以下内容：

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))

此代码直接来自 Stimulus 文档。它执行了一些魔法，允许我们在创建应用程序代码时使用传统的命名结构。

如果您使用此 index.js 代码，文件的命名实际上对 Stimulus 很重要（Rails 开发人员会发现这种细微差别很熟悉）。

现在我们都设置好了，让我们确保我们的 Webpack 构建工作正常。从根目录运行以下命令：

npx webpack src/index.js dist/bundle.js --watch

此命令的 npx 一部分是运行位于 node_modules 目录中的二进制文件的便捷方式。此命令将监视您的 JavaScript 文件的更改，并在您进行这些更改时重建您的应用程序。

只要您没有在控制台中看到错误，您就可以开始了！

控制器

如果您熟悉 Rails 或Laravel，控制器的概念可能很容易为您采用。

将 Stimulus 中的控制器视为一个 JavaScript 类，其中包含一些协同工作的方法和数据。

Stimulus 中的控制器可能如下所示：

<div data-controller="refreshable">
<!-- more soon... -->
</div>

// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
}

关于此控制器，有几点需要注意。首先，控制器是 HTML 和 JavaScript。该 data-controller 属性告诉 JavaScript 创建该类的新实例。

另一个需要注意的有趣特征是在控制器类本身的任何地方都找不到类名这一事实。发生这种情况是因为文件中的 application.load(definitionsFromContext(context)) 行 index.js 。此行加载应用程序代码并使用文件名来推断类名。起初这可能会令人困惑，但是一旦您开始定期使用此约定，它就会变得更加流畅。

行动

动作就像听起来的那样：您希望在用户的特定事件之后发生的过程。对于我们的刷新控制器，我们希望在单击按钮时刷新特定区域的内容。在这种情况下，可以调用我们的操作 refresh。

// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  refresh(){
    console.log("refresh!")
  }
}

但是仅仅在我们的控制器中使用这个动作方法并不能做任何事情。我们需要将它连接到我们的 HTML。

<div data-controller="refreshable">
  <button data-action="refreshable#refresh">Refresh</button>
</div>

当用户单击此 HTML 中的按钮时，它将在控制器中运行刷新操作。

现在，我们如何使用这个动作在页面上做一些事情呢？

目标

Stimulus 还使用称为“目标”的概念来连接页面上的重要元素。我们将使用它来管理包含我们要刷新的内容的容器元素。

<div data-controller="refreshable">
  <button data-action="refreshable#refresh">Refresh</button>
  <article data-target="refreshable.content"></article>
</div>

// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"

export default class extends Controller {

  static targets = [ "content" ]

  refresh(){
    this.contentTarget.innerHTML = "Refresh!"
  }

}

在这个例子中，我们代表了刺激的所有三个概念。一个 refreshable 控制器、一个 refresh 动作和一个 content 目标。

如果您仔细观察，您会在这段代码中看到一些可能会让您措手不及 的东西：直接操作 DOM。 这是 Stimulus 与其他框架不同的一种方式。直接操作 DOM 元素不仅是可能的，而且受到鼓励。

这也意味着，如果您精通jquery或 vanilla JavaScript 和浏览器 API，则可以利用这些知识！例如，刷新方法的 jQuery 驱动版本可能如下所示：

// src/controllers/refreshable_controller.js
import { Controller } from "stimulus"
import $ from 'jquery'; // requires adding jQuery to package.json

export default class extends Controller {

  static targets = [ "content" ]

  refresh(){
    let target = this.contentTarget;
    $.get("/content", function(content){
      $(target).html(content)
    })
  }

}

如果您想使用您已经熟悉的其他工具，Stimulus 不会妨碍您。