如果說 CSS 是把樣式從 HTML 剝離的技術, Stimulus 就是把 JS 從 HTML 剝離的技術, 結合 Turbolinks 一起使用, 開發效率和用戶體驗都很棒.
CSS 使用 class
鏈接HTML,Stimulus使用data-controller
鏈接HTML。
Stimulus 的代碼一般長這樣:
<button data-controller="user" data-action="user.action">
Text
</button>
當點擊按鈕的時候, Stimulus 會自動找到 user_controller.js 文件, 并調用 user_controller.js 中的 action 函數.
Rails的使用案例
http://www.lxweimin.com/p/8b5e81216b83
Stimulus 增加了魔法屬性data-action
,它描述了頁面上的事件應該怎樣觸發控制器里的方法;
魔法屬性 data-target
,它為你提供了在控制器作用域(controller’s scope)中尋找元素的途徑(handle )。
ES6 規范
導出
export default命令:為模塊指定默認輸出(這樣就不需要知道所要加載模塊的變量名)
//a.js
let sex = "boy";
export default sex(sex不能加大括號)
//原本直接export sex外部是無法識別的,加上default就可以了.但是一個文件內最多只能有一個export default。
其實此處相當于為sex變量值"boy"起了一個系統默認的變量名default,自然default只能有一個值,所以一個文件內不能有多個export default。
// b.js
本質上,a.js文件的export default輸出一個叫做default的變量,然后系統允許你為它取任意名字。所以可以為import的模塊起任何變量名,且不需要用大括號包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy
export default class extends Controller {
}
export 和 export default的區別
- export與export default均可用于導出常量、函數、文件、模塊等
- 在一個文件或模塊中,export、import可以有多個,export default僅有一個
- 通過export方式導出,在導入時要加{ },export default則不需要
- export能直接導出變量表達式,export default不行。
- 為模塊指定默認輸出(這樣就不需要知道所要加載模塊的變量名)
https://segmentfault.com/a/1190000010426778
http://www.lxweimin.com/p/edaf43e9384f
導入
import { Controller } form "stimulus"
export default class extends Controller {
static targets = [ "source" ]
// ...
}
static targets 這行是什么? 在 Stimulus 加載控制器類時,它會在被稱為目標(targets)的靜態數組中尋找目標名稱字符串。針對數組中的每個目標名稱,Stimulus
會為你的控制器添加三個新屬性。這里 "source" 這個目標名稱就變成了這樣三個屬性:
-
this.sourceTarget
在控制器作用域內尋找到的第一個來源目標。如果沒有找到,訪問此屬性會拋出一個錯誤 -
this.sourceTargets
在控制器作用域內尋找到的由所有來源目標組成的數組。 -
this.hasSourceTarget
如果找到了來源目標,返回 true,否則,返回 false。
常見的事件有一個速記符號 你可能已經注意到了我們省略了操作描述符中的 click->。那是因為 Stimulus 將點擊事件設置成了操作 <button> 元素的默認事件。
未完成