无法在键值存储中设置未定义的属性答案

【问题标题】：Cannot set properties of undefined in key-value store无法在键值存储中设置未定义的属性
【发布时间】：2022-01-01 10:24:39
【问题描述】：

我有这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./framework.js"></script>
</head>
<body>
  <p f-text="name"></p>
  <script>
    Framework.store('name', 'Joe');
  </script>
</body>
</html>

document.querySelectorAll('*').forEach((element) => {
  if (element.hasAttribute('f-text')) {
    const textValue = element.getAttribute('f-text');
    
    element.innerHTML = window.fStore[textValue];
  }
});

window.Framework = {
  store: (key, value = '') => {
    if (value === '') {
      return window.fStore[key];
    }

    window.fStore[key] = value;
  }
}

但是得到这个错误：

TypeError: Cannot set properties of undefined (setting 'name')
    at Object.store (/framework.js:15:24)
    at /:12:15

我希望页面通过从f-text 获取密钥，在window.fStore 中找到密钥的值，然后将element.innerHTML 设置为值来呈现“Joe”。 Framework.store() 接受一个键和一个值，如果没有值，则从 window.fStore 中的键返回值，如果有则将 window.fStore[key] 设置为值。

【问题讨论】：

标签： javascript html undefined typeerror key-value

【解决方案1】：

你需要先检查window.fStore是否存在。

window.Framework = {
  store: (key, value = '') => {
    if(!window.fStore) window.fStore = {}
    if (value === '') {
      return window.fStore[key];
    }
    window.fStore[key] = value;
  }
}
Framework.store('name', 'Joe');

document.querySelectorAll('*').forEach((element) => {
  if (element.hasAttribute('f-text')) {
    const textValue = element.getAttribute('f-text');
    element.innerHTML = window.fStore[textValue];
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p f-text="name"></p>
</body>

</html>

【讨论】：

我试过了，它不再给我错误，但页面保持空白。
@TacoSnack 将带有 JS 文件的脚本标签移动到 p 标签之后。这可能是因为当您尝试选择元素时，该元素不在 DOM 中。
那也没用。
@TacoSnack 也可以在选择元素之前调用store。基本上就是把sn-p里面的JS复制到文件里就行了。

【解决方案2】：

您可能还需要等到窗口首先加载。如果你不这样做，有些浏览器会让你头疼

window.addEventListener('load', e=>{
  window.Framework = {
    store: (key, value = '') => {
      if(!window.fStore)
        window.fStore = {};
      if (value === '')
        return window.fStore[key];
      window.fStore[key] = value;
    }
  }
  window.Framework.store('name', 'Joe');

  document.querySelectorAll('*').forEach((element) => {
    if (element.hasAttribute('f-text'))
      element.innerHTML = window.fStore[element.getAttribute('f-text')];
  });
}

【讨论】：

当我这样做时，我得到这个错误：ReferenceError: Framework is not defined at /:12:5
抱歉希望编辑修复它
我在<script>标签中有Framework.store()，而不是在JS文件中。