javascript 框架_刺激：适合HTML爱好者JavaScript框架

最新推荐文章于 2024-09-17 23:15:58 发布

daique1908

最新推荐文章于 2024-09-17 23:15:58 发布

阅读量118

点赞数

文章标签： python java vue javascript js ViewUI

javascript 框架

Stimulus是一个“适度JavaScript框架”，由Basecamp的人们创建，他们为您带来了Rails。

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

DOM：国家的地方？

许多现代框架的核心概念在于将“状态”与“ DOM”分开。这样，DOM仅充当其表示的数据的客户端。

刺激颠倒了这个概念，而是依靠DOM保持状态。

这最终意味着Stimulus最适合用于HTML的应用程序（而不是例如与JSON API集成）。

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

这也意味着您不会像在Handlebars或React中看到的那样看到each循环或map循环。

除非您显式创建该功能，否则刺激不会承担呈现HTML的工作。

所以...它做什么？

因此，Stimulus不会渲染模板。而是将其构建为将您在应用程序前端执行的操作和事件连接到后端的控制器。

刺激使用三个概念来实现这一目标： 目标，控制者和行动。

但是，在我们深入之前，让我们继续进行安装，并在您的计算机上运行Stimulus！

建立

此设置假定您已经在计算机上安装了最新版本的NodeJS。如果尚未执行此操作，请转至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类，其中包含一些可一起使用的方法和数据。

控制器在刺激中可能看起来像这样：

<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创建类的新实例。

需要注意的另一个有趣特征是，在控制器类本身中的任何位置都找不到类名。发生这种情况是由于index.js文件中的application.load(definitionsFromContext(context)) 。此行加载应用程序代码，并使用文件名推断类名。起初这可能会造成混淆，但是一旦您开始定期使用此约定，它将变得更加流畅。

动作

动作听起来很像：您要在用户发生特定事件后执行的过程。对于我们的刷新控制器，我们希望在单击按钮时对内容的特定区域执行刷新。在这种情况下，我们的动作可以称为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中的按钮时，它将在控制器中运行刷新操作。

现在，我们如何使用此操作在页面上执行某些操作？

目标

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

<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或香草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)
    })
  }

}

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