1

最近我重构了我早期编写 ES5 的项目之一。有些部分我必须使用 document.getElementById(id) 通过它们的 id 检索 DOM 元素

然后我使用 ES6 代理重构了代码。例如，我有一个 html 文件，其中包含

  <div class="bottom">
    <div class="add">
      <div class="add__container">
        <select class="add__type" id="addType">
          <option value="inc" selected>+</option>
          <option value="exp">-</option>
        </select>
        <input type="text" class="add__description" id="addDescription" placeholder="Add description">
        <input type="number" class="add__value" id="addValue" placeholder="Value">
        <button class="add__btn" id="addButton">
          <i class="ion-ios-checkmark-outline"></i>
        </button>
      </div>
    </div>

然后我使用代理来检索这样的 DOM

const {
  addType,
  addDescription,
  addValue,
  addButton,
  budgetContainer,
  budgetIncomeList,
  budgetExpensesList,
  budgetValue,
  budgetIncomeValue,
  budgetExpensesValue,
  budgetExpensesPercentage,
  monthLabel,
} = new Proxy({}, { get(_, id) { return document.getElementById(id); } });

它有效，但我想知道这是否是检索 DOM 元素的好习惯。

我也刚刚发现，在我注释掉代码的检索部分后，即上面使用代理的代码段。我仍然可以直接使用它们的 ID 访问我的 Js 文件中的 DOM 元素，而无需定义它们！我以前对此一无所知。

抱歉，我知道这看起来像是两个不同的问题，但我真的希望你们能分享一些关于这些的知识。

4

0 回答 0