Advantages of esri.hide and esri.show over Dojo code?

[DanielYim]

Some context: In the past few weeks, I have been working extensively with the ArcGIS JS API and have successfully created an application for a project. Before I embarked on this task, I have never worked with ArcGIS maps/services, AJAX libraries such as Dojo, or even Javascript in general (I had only a cursory knowledge of JS, but I do come from a strong Java/C/C++ programming background).

Right now, I am in the stage of optimizing my code so that my page runs and loads faster, and one of the things that comes up during my code review is my method of hiding and showing elements.

From the snippets of code that I took from the ArcGIS samples, I see that I sometimes use

dojo.style("someId", "display", "none");

to hide elements, but just as often, sometimes I use

esri.hide(dojo.byId("someId"));

Is there any discrepancy between the two? Is one preferred over the other in some situations? Or is esri just providing a utility function that ultimately does the same thing as the Dojo example?

Thanks,
danyim

[stevegourley]

since esri's build is baked into dojo and minified ie you can't view the source, one can only infer that the dojo.style method is what is happening behind the function call of esri.hide/show.  I'm actually pretty positive that the esri.hide is just a convenience method for doing dojo.style blah blah.  So to save a function call I would say that dojo.style is faster (cpu wise).  Since the dojo build is optimized and minified and already in the clients browser you could almost argue that dojo.styles extra characters if heavily used will cost more for the client to download, unless you are also minifying/optimizing (not inlining) your code.  But I think it's negligible either way.  I would just try to stay consistent.  I would also recommend using dojo.style since understanding dojo is much better than some esri convenience method.

[derekswingley1]

I would say stick to esri.hide/show. You can take a look at each via firebug or the chrome developer tools by typing "esri.hide" or "esri.show" in the console. Here's each:

esri.hide
function (node){node.style.display="none";}

esri.show
function (node){node.style.display="block";}

dojo.style does a lot more than just show/hide nodes. I would expect the esri functions to always be faster.

[timgogl]

you may want to test both in multiple browsers also... i would imagine that some of the 'extra' code behind the dojo methods is to make it compatible across multiple browsers.

[derekswingley1]

Haven't tested but remember that you're passing the node returned from dojo.byId() to esri.show or esri.hide so dojo is still doing it's cross browser compatibility stuff.

[RichardKaufholz]

@Derek: just wanted to say thanks for the hint. Actually, the JSAPI says that the argument to esri.hide/show is "The name of the HTML element", rather than the DOM element itself. Curiosly, passing just the element name (without enclosing in quotes) in Chrome and IE (!) works fine, but its Firefox that throws an error.

I couldnt figure it out, but from your note I now use dojo.byId to pass the parameter and it works in all browsers.

Rich.

[derekswingley1]

Glad to help!