Stimulus 使用準備

如果說 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的區別

  1. export與export default均可用于導出常量、函數、文件、模塊等
  2. 在一個文件或模塊中,export、import可以有多個,export default僅有一個
  3. 通過export方式導出,在導入時要加{ },export default則不需要
  4. export能直接導出變量表達式,export default不行。
  5. 為模塊指定默認輸出(這樣就不需要知道所要加載模塊的變量名)

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> 元素的默認事件。

未完成

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 官方中文版原文鏈接 感謝社區中各位的大力支持,譯者再次奉上一點點福利:阿里云產品券,享受所有官網優惠,并抽取幸運大...
    HetfieldJoe閱讀 3,668評論 2 27
  • 系列文章導航 模塊(一) CommonJs,AMD, CMD, UMD 本文參考阮一峰 ES6入門 Module的...
    合肥黑閱讀 6,154評論 0 4
  • 想法總是一出一出的,然后這個點,決定準備備考明年的教師招聘! 理由如下: 1. 這是老媽的夙愿; ...
    木子閱讀 208評論 0 1
  • 迎春有感 ----2010年2月11日(臘月二十八) 窗外的雨, 淅淅瀝瀝, 牛年隨流水而去, 競品擠壓, 運輸緊...
    鮮花愛笑笑閱讀 192評論 0 6
  • ###四個收獲 1、要懂得作者的邏輯、架構、立場,然后站在他的角度來讀書,才會提升理解力。 2、文法、邏輯、修辭這...
    Eco糯米閱讀 260評論 1 0