一篇文章Stimulus：連接HTML和JavaScript的橋梁，實現簡單的controller，并學習了Stimulus是如何連接HTML與JavaScript的。現在我們使用Stimulus來實現復制文本到粘貼板的按鈕。

比如說，我們現在有一個需求，就是幫助用戶生成密碼，在密碼旁邊放置一個按鈕，點擊按鈕后密碼就被拷貝到粘貼板上了，這樣就方便用戶使用這個密碼了。

打開public/index.html，修改body內容，填充一個簡單的按鈕，如下：

<div>
    PIN: <input type="text" value="1234" readonly>
    <button>Copy to Clipboard</button>
</div>

下一步，創建src/controllers/clipboard_controller.js，然后添加一個copy()方法：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    copy() {
    }
}

然后，給div添加data-controller=“clipboard”。只要是給元素添加了data-controller屬性，Stimulus就會連接一個controller實例。

<div data-controller="clipboard">

我們還需要一個對輸入框的引用，這樣我們就可以在調用粘貼板API之前獲取輸入框的內容。給文本框添加data-clipboard-target=“source“：

PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>

在controller中定義一個target，然后就可以通過this.sourceTarget訪問文本框了。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = [ "source" ]
    
    copy() {
    }
}

解釋一下這個targets：

當Stimulus加載你的controller類時，它會查看靜態數組targets的字符串元素，對于每一個字符串，Stimulus會在controller中添加3個屬性。在這里，對于“source”，會添加如下屬性：

this.sourceTarget 在controller的域內的第一個source

this.sourceTargets 在controller的域內所有的source組成的一個數組

this.hasSourceTarget 在controller的域內是否有source

我們希望點擊按鈕時調用controller中的copy()方法，所以我們需要添加data-action=“clipboard#copy“

<button data-action="clipboard#copy">Copy to Clipboard</button>

你可以已經注意到在上面的動作描述符中省略了click->。那是因為Stimulus給button設置了click作為它默認的事件。

某些其他元素也有默認事件。下面是個全部列表：

最終，在copy()方法中，我們獲取輸入框的內容，調用粘貼板API

copy() {
    navigator.clipboard.writeText(this.sourceTarget.value)
}

刷新頁面，點擊按鈕，然后快捷鍵粘貼到Greet按鈕前到輸入框，可以看到1234。

到目前為止，在頁面上同一時間只有一個controller實例。在頁面上同時有一個controller的多個實例也是很正常的。

我們的controller是可以復用的，只要你需要在頁面上添加復制內容的按鈕，無論是哪個頁面，只要把對應的屬性值寫好，我們的controller都是生效的。

還是上面的例子，再添加另外一個復制按鈕：

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

刷新頁面，驗證一下兩個復制按鈕是否都生效。

我們再添加一個可以復制的元素，不用button，我們用a標簽，

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

Stimulus允許我們使用任何元素，只要它設置了合適的data-action屬性，就可以觸發復制。

這個例子里，要注意一點，點擊鏈接會使瀏覽器追蹤a標簽內的href屬性跳轉，可以取消這種默認行為，只需要在action中調用 event.preventDefault()就可以了。

copy(event) {
    event.preventDefault()    
    navigator.clipboard.writeText(this.sourceTarget.value)
}

還有另外一個方法，拷貝粘貼板上

copy(event) {
    event.preventDefault()    
    this.sourceTarget.select()
    document.execCommand("copy")
}

在本文中，我們看了一個在現實中把瀏覽器API包裝在Stimulus的controller中的例子。還有一個controller的多個實例如何同時出現在頁面上，我們還探索了actions和targets如何保持HTML和JavaScript的松散耦合。

下一篇文章，我們將優化一下這個復制粘貼板的功能，讓它運行起來更加健壯。

Stimulus：瀏覽器不支持復制或者弱網條件下，怎么辦？

istory 是 window 對象中的一個 JavaScript 對象，它包含了關于瀏覽器會話歷史的詳細信息。你所訪問過的 URL 列表將被像堆棧一樣存儲起來。瀏覽器上的返回和前進按鈕使用的就是 history 的信息。

History 對象包含長度屬性，它包含了會話歷史記錄棧中的 URL 數量。例如，如果用戶在瀏覽器中打開一個標簽頁，歷史記錄的長度將是 1（新的標簽頁也是一個網頁）。然后用戶輸入一個網址 foo.com 并點擊回車，現在歷史記錄對象的長度將是 2, 用戶轉到其他頁面 bar.com，歷史記錄對象的長度將就是 3 了。

Back 和 Forward 方法

你可以使用 history 對象的 back 和 forward 方法來瀏覽網頁。例如，如果你想轉到上一個頁面，那么可以使用：

history.back()

同樣的，如果你想轉到下一頁，你可以使用：

history.forward()

Go 方法

如果您想向前或向后移動 n 個頁面，那么您可以使用 go 方法：

history.go(-2) // 倒退 2 頁
history.go(2) // 前進 2 頁

所以 history.go(1) 和 history.forward() 效果是相同的，history.go(-1) 和 history.go(-1) 效果是相同的。history.go 方法的默認值為 0，如果不傳任何數字，則當前頁面會被刷新。

window.history.go(0)
window.history.go()

PushState

你也可以使用 pushState 和 replaceState 方法改變頁面的 URL。pushState 會改變頁面的 URL，并將改變后的 URL 添加到 history 對象的 URL 棧頂部。語法如下：

history.pushState(state, title, url)

參數 state 是狀態數據，它將被存儲在 history.state 變量中。參數 title 是標題文本，不過它對大多數瀏覽器都沒有效果，所以一般傳空字符串（""）或傳 null 就可以了。

讓我們在控制臺中嘗試一下，在執行之前，比如打開 baidu.com，然后在控制臺輸入：

history.pushState('123', '', 'new-url')

執行上面的代碼后，它會將頁面地址欄中的 URL 改為 baidu.com/new-url，同時將 URL 添加到 history 對象中。此時檢查 history.length 會增加 1。

除此之外，我們還可以為每個 URL 存儲狀態（當前頁面的數據）。在上面的例子中，你會把 "123" 存儲在 history.state 變量中，當你返回到這個頁面時，你就可以 history.state 再次拿到到這些數據。例如：

history.pushState('temp data 1', 'title', 'new-url-1')
history.state //"temp data 1"
history.pushState('temp data 2', 'title', 'new-url-2')
history.state //"temp data 2"
history.back()
history.state // "temp data 1"

每當通過 pushState 返回到之前被添加到歷史記錄的頁面時，瀏覽器就會觸發一個名為 popstate 的事件，并將 state 數據作為參數。比如在瀏覽器打開一個新標簽頁，進入某個網頁（比如 baidu.com），先監聽 popstate 事件：

window.addEventListener('popstate', (e) => console.log(e))

然后調用 pushState：

history.pushState({ name: 'test1' }, 'title', 'test1')

然后按下返回按鈕，popstate 事件就會被觸發，你可以在監聽事件中查看打印出來的數據。在打印的數據中，可以找到 history.state 的值。

注冊 pushState 中的 url 可以是完整的 url，但必須和當前頁面是相同的域名，否則會拋出跨域異常。

瀏覽器還有一個 replaceState API，和 pushState 的區別是，它只改變了 URL，不會將 URL 添加到歷史記錄，這里就不再累述了。

實例演示

現在我們做一個小的網頁應用，這個應用將實現如下功能：

1. 顯示用戶列表
2. 可以通過下拉框篩選“先生”和“女士”
3. 當下列列表發生變化時，URL 也會相應的變化

我們先不關心 history API，先實現功能。下面是 html 關鍵代碼：

<select id="selectbox">
  <option value="both">全部</option>
  <option value="male">先生</option>
  <option value="femalt">女士</option>
</select>
<ul id="userslist">
  <li gender="male">張先生</li>
  <li gender="female">李女士</li>
  <li gender="female">王女士</li>
</ul>

下面是 javascript 關鍵代碼：

let selectBox = document.getElementById('selectBox')
let usersList = document.getElementById('usersList')

selectBox.addEventListener('change', onSelectBoxChange)

function onSelectBoxChange(ev) {
  let val = this.value
  filterList(val)
}

function filterList(val) {
  let users = usersList.children
  for (let i = 0; i < users.length; i++) {
    let user = users[i]
    let gender = user.getAttribute('gender')
    if (gender === val || val === 'both') {
      user.style.display = ''
    } else {
      user.style.display = 'none'
    }
  }
}

實現后的效果如下：

當修改下拉列表時，為了使瀏覽器地址也發生變化，需要使用 pushSate 方法：

function onSelectBoxChange(ev) {
  let val = this.value
  filterList(val)
  history.pushState({ gender: val }, null, val)
}

當我們在下拉框選擇“先生”時，瀏覽器的地址會變成：localhost:5000/male。效果如下：

此時會有個問題，當我們點擊前進/后退時，瀏覽器地址變了，但對應的數據卻不對。因此，當進行前進/后退時，我們需要監聽 popstate 重新過濾數據：

window.addEventListener('popstate', onPopState)
function onPopState(ev) {
  let state = ev.state
  filterList(state.gender)
}

我們還需要處理頁面刷新的問題。當刷新頁面時，歷史記錄不會改變，history.state 的狀態值也保持不變。所以我們可以從 history.state 中取出當前的狀態數據，利用 state.gender 的值就可以在 load 事件中來過慮出當前 URL 對應的用戶列表：

window.addEventListener('load', function () {
  let gender = history.state ? history.state.gender : 'both'
  filterList(gender)
})

這是個簡單的示例，你也可以繼續進一步優化。今天的分享就到這里，有問題請在下面留言哦~~