微人有好多主題想要拿出來聊一下，感覺最近在 View 這個話題會無限延伸。但還是有在努力克制（好像很會講一樣？），其實只是微人在學習過程中，發現一些真的比較難直覺性的理解的主題（原始於不懂的太多才是真的）。

在我們的 View 一部曲有提到 HTML 到底是什麼！ 今天就來簡單的介紹一下攸關網站結構完整度的 data-* attribute 。

data-* attribute

先說明一下屬性是什麼好了，像在 html 中常使用的 ”class“ ”id“ ”title“，都是 html 屬性，而 data-* 全域屬性構成一組稱作自訂 data 屬性的屬性，是不是有點饒舌？簡單說就是一個自訂的屬性。主要功能是令 HTML 與其 DOM 擁有給腳本用的交換資訊。

那 data-* 這該怎麼使用呢？
在 data-＿＿＿＿<-在底線中填入你自己定義的字詞，例："data-key" "data-info" "data-item" 等，任何字串的形式都可以。

如何靈活運用呢？
透過元素的 HTMLElement，使用HTMLElement.dataset property 就可以取用到對應得的屬性內容。但還是注意幾個小規則，命名中：

• 絕對不能以 xml 起頭，無論是否用於 xml
• 絕對不能包含分號（U+003A）
• 絕對不能包含大寫 A 到大小 Z 的拉丁字母。

另外因為 HTMLElement.dataset property 屬於字串的形式，因此，"data - key" 中間的減號是會被移除，並被取代為駝峰式（camelcase）名字，因此我們在呼叫值出現時，要透過 HTMLElement.dataset.testValue 或 HTMLElement.dataset["testValue"] 取用。
簡單一個示範案例：

<a class="cover-link" data-key="<%= book.id %>" >
  <%= render partial: "shared/frontend/book_cover", locals: {book: book, size: :small} %>
  <div class="book-title"><%= book.title %></div>
</a>

微人簡單的見了幾個屬性內容，若要在 JavaScript 裡取得 data-* attribute 的屬性值，可以透過 dataset 物件，來取用。範例：

bookInfo.addEventListener("click", (e) => {
  let classes = e.target.classList;
  if (classes.contains("book-cover") || classes.contains("book-title")) {
    let bookKey = e.target.parentElement.dataset.key;
      //  "<%= book.id %>" 
  }
});

註："<%= book.id %>"在這裡因會方便理解，所以標示原本程式語法，但實際是透過 rails 語法做轉換後最終顯示的是id的值。

好啦！今天就先聊到這囉！明天見，掰餔。