4

Over time, I created a bunch of various JavaScript functions. Most of them are static functions, and do things like modify the appears of a date, create the select menu HTML from an array, etc.

I currently have them all in a file called "general.js" which is in turn directly called by my HTML page, and each of them look something like:

function modifyDate(data){....}
function makeArray(arr){....}

And then I use them as:

alert(modifyDate("12/14/2013"));

I am thinking this is a bad idea as it might conflict with other libraries. Instead, I am thinking of something like the following:

myLibrary={};
myLibrary.modifyDate= function(data){....}
myLibrary.makeArray= function(arr){....}

And them use them as:

alert(myLibrary.modifyDate("12/14/2013"));

Note that I am kind of making this up as I go. Please provide advice how I should best organize my JavaScript library. Thank you

user1032531
  • 24,767
  • 68
  • 217
  • 387

1 Answers1

8

What you're describing is called namespacing and is generally considered a good idea.

Some more discussion of namespacing can be found in this question: Why do they use namespaces in javascript?

In general the benefits of namespacing are:

  1. Limiting pollution of the global scope and preventing naming collisions
  2. Providing context for your function names (we'd expect different results for WindowUtils.getHeight and MenuUtils.getHeight for instance).

So your example would provide the first benefit, though not necessarily the second one if this is just a group of grab-bag functions. Whether thats a good thing or not is totally dependent on your individual project and what you're trying to do.

Note that if you're going to be namespacing, you may want to look into the module pattern which is a way of protecting the scope of your namespaces to allow for private variables/protected state. There's a good example in this answer to a similar question or you could check out this canonical blog post on the module pattern

In your case the module pattern would look something like this:

var myLibrary=(function(){
  var privateVariable; //accessible by your functions but not in the global context    
  return {
    modifyDate: function(data){....},
    myLibrarymakeArray: function(arr){....}
  };
}())
Community
  • 1
  • 1
Ben McCormick
  • 25,260
  • 12
  • 52
  • 71
  • Thanks Ben. Any suggestions how to implement namespacing? I just googled "how to implement javascript namespacing" and came across http://blog.arc90.com/2008/06/06/an-easy-way-to-implement-namespaces-in-javascript/. They recommend using eval() which always seems to be a bad idea. – user1032531 Apr 01 '13 at 16:28
  • In regards to your second benefit, I guess I can use `myGenericLibrary.mySpecificLibrary.myFunction()`, right? – user1032531 Apr 01 '13 at 16:30
  • @user1032531 No need to use eval. Sure you can have double namespaces if needed, though that will get annoying to call very quickly. You can also just split it into 2 namespaces or not worry about having the context at all. Whatever makes it readable/easy to understand for you and others. As far as specific implementations see the module pattern example I added and the various links. – Ben McCormick Apr 01 '13 at 16:36
  • Thanks again Ben, Yes, your examples definitely tell me how to implement. Do you recommend the first approach (same as you included in your example) or the second (the canonical blog)? The later is newer and has more people commented on the blog, but that doesn't necessarily mean anything. Thanks – user1032531 Apr 01 '13 at 16:40
  • The blog is just listing some other ways the module pattern can be implemented. Its the same concept. Whichever example is most clear and helpful for you is what you should go for. – Ben McCormick Apr 01 '13 at 16:43