引用不存在的HTML数据属性时的JavaScript行为？

Question

今天我一直在寻找在点击时切换按钮文本的最佳方法，例如从“Read more”到“Read less”。

我在CSS Tricks https://css-tricks.com/swapping-out-text-five-different-ways/上发现了关于交换文本的文章，在解构了每个方法后，我有一个关于JavaScript数据属性行为的简单问题。

考虑以下代码：

$("button").on("click", function() {
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
    el.text(el.data("text-original"));
  } else {
    el.data("text-original", el.text());
    el.text(el.data("text-swap"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="example-two" data-text-swap="Show">Hide</button>

我的问题涉及“text-original”的使用，它是HTML标记中不存在的数据属性。这段代码怎么没有抛出错误？我认为它的工作原理是因为JavaScript必须以某种方式恢复为默认的html，即“隐藏”。有人可以解释为什么这有效吗？

Answer 1

通常，JS在直接访问不存在的属性/属性时不会出错。

具体来说，您使用的是jQuery的全局数据缓存，它集成了HTML5 data-属性，并且在数据尚不存在时也不会抱怨。

无论哪种方式，该技术都是不必要的，因为您不需要单独的存储来执行此操作，现代浏览器使得通过dataset属性获取数据属性变得特别容易。

这个演示使用dataset和解构赋值来使这段代码非常简短和干净。

$("button").on("click", function() {
  [this.dataset.textSwap, this.textContent] = [this.textContent, this.dataset.textSwap];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="example-two" data-text-swap="Show">Hide</button>

---

当然，你可以在没有jQuery依赖的情况下做到这一点。

document.querySelector("button").addEventListener("click", function() {
  [this.dataset.textSwap, this.textContent] = [this.textContent, this.dataset.textSwap];
});

<button id="example-two" data-text-swap="Show">Hide</button>

Answer 2

这是因为data-text-swap和data-text-original是不同的东西，data-text-swap是HTML5 data- *属性，而data-text-original存储一些与元素相关的数据。

基本上它将data-text-swap值与元素的实际文本值进行比较，最初它们会有所不同，当您单击文本时，值将更改为data-text-swap，将另一个保存在data-text-original上，依此类推......

你可以在这里看到更多关于它的信息：https://api.jquery.com/data/#data1 vs https://api.jquery.com/data/#data2