1

recently I refactored one of my earlier project where I wrote ES5. There were parts where I had to retrieve DOM elements using document.getElementById(id) by their id

And then I refactored the code by using ES6 proxy. For example, I have a html file containing

  <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>

then I used proxy to retrieve the DOMs like this

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

It worked, but I was wondering if this is a good practice to retrieve DOM elements.

Also I just found that, after I commented out the retrieve part of the code i.e. the snippet above with Proxy. I can still access DOM elements in my Js file directly using their IDs without defining them! I didn't know anything about this before.

Sorry I know this looks like two different questions but I really wish you guys can share some knowledge about these.

Joji
  • 4,703
  • 7
  • 41
  • 86
  • 1
    `using their IDs without defining them` https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables – CertainPerformance May 20 '18 at 21:27
  • 1
    That's a really interesting way of quickly defining elements without repeating selectors *and* variable names. Might post this on codereview, it's much more suited to questions about "is this good practice". – CertainPerformance May 20 '18 at 21:34
  • This depends on where are this code is supposed to run. Context matters, and the question doesn't have it. Proxies are relatively slow and cannot be polyfilled in ES5. It's unclear what's the purpose of using variables. Ids could be mapped to object properties, and this could be done without a proxy. – Estus Flask May 20 '18 at 21:49
  • @estus While proxies are certainly slow enough to think about when used in loops or functions that get called many times, I think selecting a small handful of elements *once* through a Proxy is surely trivial. Incompatibility with ancient browsers is the real problem. – CertainPerformance May 20 '18 at 23:11
  • @CertainPerformanc so I didn't understand your comment. when used in loops or functions that get called many times, does using proxies outweigh its cost or not really? – Joji May 20 '18 at 23:22
  • @estus yes you are right. Context matters. but consider these elements are going to be used multiple times in my app, like around 10 times per element. does this proxy operation outweigh its cost ? and also since Ids could be mapped to object properties, is it a good practice to just use id in js file as a way to do DOM manipulation – Joji May 20 '18 at 23:24
  • While proxies *are* significantly slower than more conventional methods, a one-time `O(N)` is *nothing*. The (possible) problem is when you frequently and repeatedly use proxies, which is not the case here. You're only accessing the proxy initially; afterward, the proxy reference is discarded, and all you're left with is the destructured variables referencing elements. – CertainPerformance May 20 '18 at 23:30
  • 'Good practice' is subjective and too broad for SO. As it was stated, this may be a question for https://codereview.stackexchange.com/ but at this point there's nothing to review. The question doesn't make sense without context. This may be good or bad practice, depending on what you're trying to achieve. There may be a need for other selectors rather than element id and there's no room for them, so it's seems more like a bad one. *but consider these elements are going to be used multiple times in my app* - it doesn't matter how often they used but how often the code where they are used runs. – Estus Flask May 21 '18 at 00:02

0 Answers0