JavaScript dataset 應用

前言

在前端開發中，data-* 屬性可以用來存儲自訂資料，dataset 屬性則提供了一種簡單的方式來讀取這些資料。本文將介紹如何使用 data-* 屬性和 dataset，並提供一些示例程式碼。

data-* - 透過 dataset 讀取自訂資料

使用 data-* 屬性可以在 HTML 元素上添加自訂資料。以下是一個示例：

<ul>
  <li class="listli" data-num="0" data-dog="3">拉拉</li>
</ul>

<script>
var list = document.querySelector('.listli');
list.addEventListener('click', function(e) {
  var num = e.target.dataset.num;
  var dog = e.target.dataset.dog;
  console.log('num:', num);
  console.log('dog:', dog);
}, false);
</script>

在這個示例中，我們在 <li> 元素上添加了兩個 data-* 屬性：data-num 和 data-dog。當使用者點擊該元素時，我們透過 dataset 屬性獲取這些資料並在控制台中輸出。

dataset - array 運用

dataset 還可以與陣列結合使用，動態渲染列表並獲取相應的自訂資料。以下是一個示例：

<style>
  .list {
    padding: 30px;
    background: #868686;
  }
</style>

<ul class="list"></ul>

<script>
var data = [
  { name: 'abc' },
  { name: 'dfg' }
];

var list = document.querySelector('.list');

function updateList() {
  var str = '';
  var len = data.length;
  for (var i = 0; len > i; i++) {
    str += `<li data-num="${i}">${data[i].name}</li>`;
  }
  list.innerHTML = str;
};

updateList(); // 渲染 li

list.addEventListener('click', function(e) {
  if (e.target.nodeName !== 'LI') { return; }
  var num = e.target.dataset.num;
  console.log(data[num].name);
});
</script>

在這個示例中，我們首先定義了一個包含物件的陣列。然後，透過 updateList 函數生成包含 data-num 屬性的 <li> 元素，並將它們添加到頁面上。當使用者點擊某個列表項時，使用 dataset 獲取對應的索引，進而從陣列中獲取並輸出相應的名稱。

總結

透過使用 data-* 屬性和 dataset，開發者可以輕鬆地將自訂資料與 HTML 元素關聯起來。這種方法不僅簡化了資料存取的過程，也提高了程式碼的可讀性和可維護性。希望這篇筆記對你理解 JavaScript 的 dataset 特性有所幫助！