Question

我正在创建一个静态HTML/CSS网站，其中有许多Javascript正在运行。特别是对于动画等。由于HTML有点忙，并且随着时间的流逝，事情会发生很大变化，所以我创建了一个对象，该对象保存了我当前使用的ID's的所有HTML elements

它看起来像这样：

const dom = {
    pages: {
      home: '#homepage',
      about: '#about',
      contact: '#contact',
    },
    form: {
      emailInput: '#form_input',
      textareaInput: '#form_textarea',
      sendButton: '#form_send-button',
    }
};

这是否使我感到很好奇，这种方法的pros/cons是什么。我在开源项目中不太了解这种方法。这样做的主要原因是

如果我需要更改元素的ID，那么只能去1个地方。
由于VSCode代码完成功能可以很好地解决错字问题，因此非常有用。

很想听听一些想法。

Answer 1

首先，您的对象表示法是错误的，要么dom是一个数组，要么pages和form是键，所以它们将用{{1 }}（冒号）

您仅将:个必需元素存储在该对象中。

如果我假设正确，那么您仍然会写很多id来实际创建或修改元素。

看看这段代码：

js

const dom = {
  pages: {
    home: '#homepage',
    about: '#about',
    contact: '#contact',
  },

  form: {
    emailInput: '#form_input',
    textareaInput: '#form_textarea',
    sendButton: '#form_send-button',
  }
}

// creating a sample div
let homepage = document.createElement('div');
homepage.setAttribute('id', dom.pages.home.replace('#', ''));
homepage.innerText = 'Hello'
document.body.appendChild(homepage);

这仅是为了创建具有最少内容的单个#homepage { background: skyblue; min-height: 100px; }元素，还要检查我是否必须从您的存储值中删除div才能使用#正确设置ID < / p>

您的项目要求可能会要求您创建类似的元素，但是我建议您不要这样做，因为当您有很多带有很多子元素的元素时，它会变得很混乱，您可能还需要使用JS对其进行修改。

如果我是你，我会选择JavaScript或reactive之类的Vue.js框架

对DOM选择器使用命名空间常量，好的做法？

1 个答案: