Question

我创建了一个简单的拟字函数，可用于编辑网页上元素的数据属性。我正在测试从49.0.2623.112m到最新版本的所有版本的chrome。关键是...它在任何地方都不起作用...

我无法在我的项目中使用这段代码。它似乎可以在stackoverflow上正常工作（如下面的代码段所示），但不适用于我在本地计算机上托管的任何项目。即使在仅包含body和a元素的空白页上，也无需任何其他脚本。

每次运行此代码都会返回错误...is not a function。

我的问题是：是由过时的浏览器某些问题引起的还是编写时犯了错误？我完全迷失了。我搜索了两天，没有找到答案。

<html>
<head>
<script>
Element.prototype.data = function(name, value) {
 this.setAttribute(name, value);
}
</script>
</head>

<body>
  <a href="#">Text</a>
</body>

<script type="text/javascript">
window.setTimeout(function(){ document.querySelector('a').data('href','https://google.com');
},5000);
</script>

</html>

Answer 1

如评论monkey-patching prototypes is considered harmful中所述。通过使用属性作为数据存储，您可能会遇到方法覆盖重要的HTML属性并且数据必须仅为string类型的情况。

通过使用WeakMap，您可以创建一个独立函数，而没有这些缺点，在这些函数中，数据的生存期仍与“连接”的元素的生存期绑定

const data = (() => {
  const map = new WeakMap();
  return (element, key, value) => {
    if (value == null) {
      const innerMap = map.get(element);
      if (innerMap) {
        return innerMap.get(key);
      }
    }
    const innerMap = map.get(element) || new Map();
    map.set(element, innerMap);
    innerMap.set(key, value);
  };
})();

const el1 = document.querySelector("#el1");
const el2 = document.querySelector("#el2");
data(el1, "hello", "world");
data(el2, "foo", {
  complex: "object"
});
console.log(data(el1, "hello")); // "world"
console.log(data(el2, "hello")); // undefined
console.log(data(el2, "foo"));   // {complex: "object"}

<div id="el1">some element</div>
<div id="el2">some other element</div>

JavaScript：调用原型会返回“不是函数”错误

1 个答案: