Kengo's blog

Technical articles about original projects, JVM, Static Analysis and TypeScript.

When/How to use goog.ui.Component#makeId()

google-closure javascript

goog.ui.Component#makeId() is a helper function to generate ID for DOM elements. Let's start discussion based on sample component which contains following DOM:

<form>
  <div>
    <input type="text">
  </div>
  <button type="submit">
</form>

To implement createDom() method, we may need to decide ID for each element. And of course each of them should be unique in the document.

How you'll solve this problem? Use random value as ID? Or create counter to use sequential value? It looks troublesome.
So it's time to try makeId() method! It will use goog.ui.IdGenerator as counter to generate sequential value, and generated ID starts with ':' so it will not conflict other hand-made value so easily.

/** @override */
jp.skypencil.Component.prototype.createDom = function() {
  var domHelper = this.getDomHelper();

  var $input = domHelper.createDom(goog.dom.TagName.INPUT, {
    type : 'text',
    id: this.makeId('input') // will return a string like ':1.input'
  });
  var $div = domHelper.createDom(goog.dom.TagName.DIV, {
    id : this.makeId('div') // will return a string like ':1.div'
  }, $input);
  var $button = domHelper.createDom(goog.dom.TagName.BUTTON, {
    type : 'submit',
    id : this.makeId('button') // will return a string like ':1.button'
  });

  var $form = domHelper.createDom(goog.dom.TagName.FORM, {
    id : this.makeId('form')  // will return a string like ':1.form'
  }, $div, $button);
  this.setElementInternal($form);
}

getElementByFragment() helps you to get Element easily

Here is another merit to use makeId(); you can get Element instance simply like below:

var $button = this.getElementByFragment('button');

Stay away from setId() and getId()

goog.ui.Component also has setId() and getId(), but this is not for handling id attribute of DOM element. This is for handling Component-ID will be used to maintain component tree.

It is not necessary to keep Component-ID and DOM element ID same. I recommend you to stay away from these 2 methods, you do not have to care about component tree handling (it's responsibility of closure-library!).

Reference