STIMULUS（二） —— Hello, Stimulus

bigdevil_s 發(fā)布于2019-08-23 14:06 / 796人閱讀

摘要：每個(gè)項(xiàng)目都是從開(kāi)始的，此項(xiàng)目也不例外。控制器為帶來(lái)生命力作為其核心，的目標(biāo)是自動(dòng)將元素連接到對(duì)象。檢查是否生效刷新頁(yè)面，你會(huì)看到任何改變都沒(méi)有。在中，處理事件的控制器方法叫做操作方法。這意味這我們擁有了標(biāo)準(zhǔn)的重構(gòu)技術(shù)兵工廠。

學(xué)習(xí) Stimulus 的最簡(jiǎn)單方式就是構(gòu)建一個(gè)簡(jiǎn)單的控制器。這一章我們就來(lái)學(xué)習(xí)一個(gè)。

先決條件

要往下繼續(xù)，你需要運(yùn)行一個(gè) stimulus-starter ，它是一個(gè)用于探索 Stimulus 的預(yù)配置骨架。

推薦使用 remixing stimulus-starter on Glitch ，這樣就能完整地在瀏覽器里運(yùn)行了，而且不需要再安裝其他東西：
Remix on Glitch

或者,如果你喜歡使用自己的舒適的文本編輯器,您將需要克隆并設(shè)置stimulus-starter:

$ git clone https://github.com/stimulusjs/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start請(qǐng)輸入代碼

然后在瀏覽器中訪問(wèn) http://localhost:9000/。

(注意 stimulus-starter 使用 Yarn 來(lái)管理依賴(lài)，你得先安裝它。)

從 HTML 起步

我們從一個(gè)簡(jiǎn)單的練習(xí)開(kāi)始：帶按鈕的文本域。點(diǎn)擊按鈕時(shí)，讓文本域的值顯示在控制臺(tái)。

每個(gè) Stimulus 項(xiàng)目都是從 HTML 開(kāi)始的，此項(xiàng)目也不例外。編輯public/index.html并在標(biāo)簽后面添加以下代碼：

然后刷新頁(yè)面，便能看到文本域和按鈕了。

控制器為 HTML 帶來(lái)生命力

作為其核心，Stimulus 的目標(biāo)是自動(dòng)將 DOM 元素連接到 JavaScript 對(duì)象。這些對(duì)象由控制器調(diào)用。

我們一起來(lái)通過(guò)拖拽框架內(nèi)置的控制器類(lèi)創(chuàng)建第一個(gè)控制器。在 src/controllers/ 文件夾里創(chuàng)建一個(gè)hello_controller.js文件。然后放入以下代碼：

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

export default class extends Controller {
}

鏈接控制器和 DOM 的標(biāo)識(shí)符

下一步，我們需要告訴 Stimulus 控制器應(yīng)該怎樣連接到 HTML。在

的 data-controller 屬性中添加標(biāo)識(shí)符即可：

標(biāo)識(shí)符充當(dāng)了元素和控制器之間的鏈接。在此例中，標(biāo)識(shí)符hello告訴 Stimulus 去hello_controller.js創(chuàng)建一個(gè)控制器的實(shí)例。在安裝指南中可以了解更多關(guān)于如何動(dòng)態(tài)加載控制器。

檢查是否生效

刷新頁(yè)面，你會(huì)看到任何改變都沒(méi)有。我們應(yīng)該如何知道控制器有沒(méi)有生效？

一種方式是在 connect() 方法中添加一個(gè) log 狀態(tài)，控制器鏈接到
HTML 時(shí) Stimulus 就會(huì)觸發(fā)它。

在 hello_controller.js 實(shí)現(xiàn) connect()方法：

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

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

刷新頁(yè)面，你就能在控制臺(tái)中看到Hello, Stimulus!了。

Actions Respond to DOM Events

現(xiàn)在，我們看下，如何修改代碼讓 log 信息在點(diǎn)擊“Greet”按鈕時(shí)顯示。

首先，將 connect() 重命名為 greet()：

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

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

我們想要在按鈕的點(diǎn)擊事件觸發(fā)時(shí)調(diào)用greet()方法。在 Stimulus 中，處理事件的控制器方法叫做操作（action）方法。

將 action 方法連接到按鈕的點(diǎn)擊事件。public/index.html并添加魔法屬性data-action到按鈕上：

操作描述符（action descriptor）解釋
data-action的值 value click->hello#greet被成為操作描述符。這里的意思是：


click 是事件名稱(chēng)

hello 是控制器標(biāo)識(shí)符

greet 要調(diào)用的方法名

刷新頁(yè)面并打開(kāi)開(kāi)發(fā)者控制臺(tái)。你就能在點(diǎn)擊“Greet”按鈕時(shí)看到 log 信息了。

將重要元素映射到控制器屬性中

我們即將完成此次練習(xí)，修改 action 使其對(duì)我們輸入到文本域里的任何名字都說(shuō) hello。

要實(shí)現(xiàn)它，首先我們需要在控制器中引用 input 元素。然后就能通過(guò)讀取它的值獲取輸入的內(nèi)容了。

Stimulus 讓我們將重要元素標(biāo)記為目標(biāo)（target），然后我們就能輕松地在控制器中通過(guò)相應(yīng)的屬性引用這些元素了。打開(kāi)public/index.html添加魔法屬性data-target到 input 元素：

﹟目標(biāo)描述符（Target Descriptors）解釋
data-target的值hello.name被稱(chēng)為目標(biāo)描述符. 這里的意思是：


hello 是控制器標(biāo)識(shí)符

name  是目標(biāo)的名稱(chēng)

在我們將 name 添加到控制器的目標(biāo)描述符列表中時(shí)，Stimulus 會(huì)自動(dòng)創(chuàng)建一個(gè)this.nameTarget屬性，它會(huì)返回第一個(gè)匹配到的目標(biāo)元素。我們可以使用這個(gè)屬性讀取元素的值并構(gòu)建歡迎字符串。

我們來(lái)試試。打開(kāi)hello_controller.js然后這樣修改：

// 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}!`)
  }
}

然后刷新頁(yè)面，打開(kāi)控制塔。在輸入框中輸入你的名字，點(diǎn)擊“Greet”按鈕。Hello, world!

控制器簡(jiǎn)化重構(gòu)

我們已經(jīng)知道 Stimulus 控制器是 JavaScript 類(lèi)的實(shí)例。該類(lèi)的方法可以作為事件處理器使用。

這意味這我們擁有了標(biāo)準(zhǔn)的重構(gòu)技術(shù)兵工廠。比如，我們可以通過(guò)提取name getter 來(lái)清理 greet() 方法：

// 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
  }
}

總結(jié)和后續(xù)步驟

恭喜！你寫(xiě)出了你的第一個(gè) Stimulus 控制器！

本文我們覆蓋了該框架的核心概念：controllers, identifiers, actions, 和 targets。在下一章，我們將了解如何組件這些東西構(gòu)建正兒八經(jīng)的控制器，呃，像 Basecamp 那樣。

Next: Building Something Real