Whats the best way to resolve name conflicts in javascript?

Question

I recently wrote some javascript code that filled a drop down list based on some XML, pretty simple stuff. The problem was I had to write similar code to do almost the same thing on a different page.

Because the code was almost identical I named most of the functions the same, thinking that they would never be included in the same page. However, naming conflicts arose because both javascript files were eventually included in the same HTML page.

When I had to go back and change the names I simply added first_ or second_ to the method's names. This was a pain and it doesn't seem very elegant to me. I was wondering if there is a better way to resolve name conflicts in javascript?

Answer 1

Going slightly object oriented and using namespaces should prevent such conflicts IMHO. I'm not much of a web developer, so there might be better ways to do it specifically for Javascript, but this is generally what's done.

Answer 2

Try the JavaScript module pattern (or namespaces) used in various libraries.

Try to be DRY (don't repeat yourself) so you can avoid name collisions. If the code is almost the same you better avoid code duplication by creating a function which can handle both cases. The function can take two parameters: which dropdown to populate and with what data. This helps maintainability as well.

update: I assume that you take the XML from an AJAX request. In this case you can create on-the-fly anonymous functions with the appropriate parameters for callback inside a loop.

Answer 3

I would look at how I could merge the two pieces of code (functions?) into a single function. If you need to populate a list box, then pass the list box id into the function, so you are not hard-coded to operate on one single control only...

I did this on my rocket business's web site where I sold rocket motors with different delay values, but in essence, they were the same product, just a different delay value.

Perhaps this might try and explain what I'm trying to say... I use this if an image file happens to be missing, it will display a "no image" image in place of the real image.

function goBlank(image)
{
  if(image) {
    var imgobj = document[image];
    imgobj.src="/images/blank.gif";
  }
}

In this case, you call it with:

<img src="/images/aerotech.gif" name="header" onError="goBlank('header');">

If you need more example with things like list boxes used, let me know. Perhaps even post some sample code of yours.

Answer 4

Another option (if possible) is to carefully tie the code to the element itself.

e.g.

<input type="text" name="foo" id="foo" value="World" onchange="this.stuff('Hello ' + this.value);"/>
<script>
  document.getElementById('foo').stuff = function(msg){
    //do whatever you want here...
    alert('You passed me: ' + msg);
  };
</script>