将信息存储在变量与数据属性元素中

Storing information in a variable vs data-attribute elements

本文关键字：数据属性 元素 变量 信息 存储      更新时间：2023-09-26

我们有option1:

MyApp.frames.frame1 = {};
MyApp.frames.frame1.element = document.getElementById("#frame1");
MyApp.frames.frame1.alias = "f1";
MyApp.frames.frame1.otherInfo = "FOO";

option2: 

<div id="frame1" data-alias="f1" data-otherinfo="FOO"></div>

就更好的代码实践和性能而言，哪个更好?

我发现选项2更快，因为它是更少的代码。但就我个人而言，我发现维护选项1更容易，因为我可以找到我使用变量的地方，但它的代码更多。

但除此之外，我真的不知道使用option1或option2的任何真正的利弊。我想在我的代码中保持一致，所以任何见解都会很有帮助。

第二种更快。但是使用object来配置更容易维护。原因:

  1. 第二个更快:dom是在设置这个属性的同时创建的。就一个弯。第一个包括dom修改，浏览器检查dom是否应该呈现。

  2. 对于我来说，我会使用以下格式:

    MyApp.frames.frame1={
    element:document.getElementById(),
    alias:"F1",
    otherInfo:"F00"
}

  3. 这是你必须提到的:data-*用dom.dataset["attr"]

    4. 检索
相关文章：