stimulus(6300✨)

https://github.com/stimulusjs/stimulus

一个现代JS框架，不会完全占据你的前端，事实上它不涉及渲染HTML。

相反，它被设计用于增加你的HTML和刚刚够好的behavior。

Stimulus和Turbolinks协作非常好。

Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal amount of effort.

---

原文：  https://chloerei.com/2018/02/24/stimulus/

它解决了取元素data-target和绑事件data-action的问题. 用 MutationObserver 监控元素的变化, 补绑事件或者修改元素的引用.

这是 Ruby 社区给多页面应用设计的框架。

Stimulus对HTML5页面局部更新支持非常到位，可以说是和RoR的Turbolinks配合最好的JS库。解决了JQuery和Turbolinks配合时，对事件绑定要小心处理的问题。

如果你已经在使用 Turbolinks + SJR(非Ajax)，那么可以马上使用 Stimulus，它会让前端代码更规范。

如果前端需求非常复杂，需要处理大量客户端状态，那么应该求助于前端渲染框架（Vue，React）。

如果你的团队已经使用前后端分离的方式开发、不需要 SEO、没有对前后端分裂感到痛苦，那么就不需要 Stimulus。

---

At its core, Stimulus’ purpose is to automatically connect DOM elements to JavaScript objects. Those objects are called controllers.

核心，目的是自动连接DOM元素到JS对象。这些JS对象被叫做controllers。

Identifiers连接HTML元素和controllers(这里是一个单文件.js组件), 例子；

  <div data-controller="hello">
    <input type="text">
    <button>
      Greet
    </button>
  </div>

在controllers/hello_controller.js中使用:connect() { console.log()}方法，刷新浏览器，可以看到成功连接上<div>和hello controller

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!", this.element)
  }
}

处理事件events的controller方法，叫做action methods

In Stimulus, controller methods which handle events are called action methods.

使用data-action来使用event激活action methods。

    <button data-action="click->hello#greet">  //称为action descriptor
      Greet
    </button>

• click是事件名字
• hello是controller identifier
• greet是action method的名字

标记重要元素为targets, 通过对应的属性来引用位于controller对象中的它们。

Stimulus lets us mark important elements as targets so we can easily reference them in the controller through corresponding properties.

<input data-target="hello.name" type="text">

• name是target的name

当增加name到controller的target定义的list中后，

Stimulus自动创建一个this.nameTarget属性，它会返回第一个匹配的target element。

我们可以用这个属性来读取元素的value并创建我们的greeting string

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

Controller简化重构：

  static targets = [ "name" ]
  
  greet() {
    console.log(`Hello, ${this.name}!`)  //this是t{context: e} 上下文作用域中的内容。
  }

  get name() {
    return this.nameTarget.value
  }

Stimulus继续监听网页，当属性变化／消失时，生效。

任何DOM的更新都会让他工作，无论是来自完全的网页加载，或者Turbolinks页面变化，或者Ajax请求。

他Stimulus管理整个lifecycle.

适合小型的团队。

什么是 static targets = [ ...]

When Stimulus loads your controller class, it looks for target name strings in a static array called targets.

For each target name in the array, Stimulus adds three new properties to your controller. Here, our "source" target name becomes the following properties:

• this.sourceTarget evaluates to the first source target in your controller’s scope. If there is no source target, accessing the property throws an error.
• this.sourceTargets evaluates to an array of all sourcetargets in the controller’s scope.
• this.hasSourceTarget evaluates to true if there is a source target or false if not.

常见事件有默认的action,即可省略。

例子：

  <div data-controller="clipboard">
    PIN: <input data-target="clipboard.source" type="text" value="1234" readonly>
    <button data-action="clipboard#copy">
      Copy to Clipboard
    </button>
  </div>

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["source"]
  copy() {
    this.sourceTarget.select()　　　　／／select()方法，用于选择。
    document.execCommand("copy")   ／／copy是Clipboard API中的事件。
  }
}

Stimulus Controllers are Reusable

controllers对象是类，可以有多个实例，因此是可以被复用.

比如多个<input data-target="clipboard.source" ...略>

 

Actions and Targets Can Go on Any Kind of Element

Stimulus lets us use any kind of element we want as long as it has an appropriate data-action attribute.