StimulusJS 开源项目教程

StimulusJS 开源项目教程

awesome-stimulusjsModestly awesome list of StimulusJS related content.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-stimulusjs

项目介绍

StimulusJS 是一个轻量级的 JavaScript 框架，旨在为静态或半静态的 HTML 页面添加交互性。它由 Basecamp 开发，旨在与 Turbolinks 和 Rails 无缝集成。StimulusJS 的核心理念是“HTML 优先”，它通过控制器、动作和目标来增强现有的 HTML，而不是替代它。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 Yarn（或 npm）。然后，通过以下命令安装 StimulusJS：

yarn add @stimulus/core

或者使用 npm：

npm install @stimulus/core

初始化

在你的项目中创建一个 index.js 文件，并添加以下代码来初始化 Stimulus：

// src/index.js
import { Application } from "@stimulus/core"
import HelloController from "./controllers/hello_controller"

const application = Application.start()
application.register("hello", HelloController)

创建控制器

在 src/controllers 目录下创建一个 hello_controller.js 文件，并添加以下代码：

// src/controllers/hello_controller.js
import { Controller } from "@stimulus/core"

export default class extends Controller {
  static targets = [ "name" ]

  greet() {
    const element = this.nameTarget
    const name = element.value
    console.log(`Hello, ${name}!`)
  }
}

HTML 示例

在你的 HTML 文件中添加以下代码：

<div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

应用案例和最佳实践

表单验证

StimulusJS 可以轻松处理表单验证。例如，你可以创建一个表单控制器来验证输入字段：

// src/controllers/form_controller.js
import { Controller } from "@stimulus/core"

export default class extends Controller {
  static targets = [ "name", "email" ]

  validate() {
    const name = this.nameTarget.value
    const email = this.emailTarget.value

    if (name.length < 3) {
      alert("Name must be at least 3 characters long.")
    }

    if (!email.includes("@")) {
      alert("Email must be valid.")
    }
  }
}

动态内容加载

StimulusJS 可以与 AJAX 结合使用，实现动态内容加载：

// src/controllers/content_loader_controller.js
import { Controller } from "@stimulus/core"

export default class extends Controller {
  static targets = [ "container" ]

  loadContent() {
    fetch("/some/content")
      .then(response => response.text())
      .then(html => this.containerTarget.innerHTML = html)
  }
}

典型生态项目

Turbolinks

Turbolinks 是一个用于加速页面加载的库，与 StimulusJS 配合使用可以提供无缝的页面切换体验。

Stimulus Reflex

Stimulus Reflex 是一个扩展 StimulusJS 的库，允许你通过 WebSocket 实现实时更新和交互。

Stimulus Components

Stimulus Components 是一个社区驱动的库，提供了许多预构建的 Stimulus 控制器，可以加速开发过程。

通过这些模块的介绍和示例，你可以快速上手并深入了解 StimulusJS 的使用和生态系统。

awesome-stimulusjsModestly awesome list of StimulusJS related content.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-stimulusjs