Code your JavaScript to play nice with others
Generally speaking, the key to using JavaScript in a website is to do so in a way that keeps it unobtrusive. Not only should the page work at a basic level (if at all possible) without JavaScript, but your code should not conflict with another developers code if dropped into a page.
This means two things…
- Keep your code contained
- Place your code in one location
Lets see some examples. Note that I use YUI (Yahoo User Interface Library) to speed my development. However, the methods here will work with many libraries, or with no library at all.
Keep your code contained.
When you include your script into a page, you may do it via an external file or by placing your code inline in the page. If your not careful, your variables will be available to code in other places you did not mean for it to be, or you may overwrite a variables value that another developers code was used for somewhere else.
var current_value = "foo"; // do something with current value that should be foo.... //html code ... content... other stuff... var current_value = "bar"; // do something with current value that should be bar //html code ... content... other stuff... // if we try to use the current_value down here, and expect it to be "foo" our code will break
How do we fix that leak? We can use an anonymous function to wrap the variables within, that way we don’t overwrite other peoples code later.
var current_value = "foo";
// do something with current value that should be foo....
//html code ... content... other stuff...
// wrap the code
(function(){
// no when we set "current_value" it will not override the "current_value from above
var current_value = "bar";
// do something with current value that should be bar
})();
//html code ... content... other stuff...
// if we try to use the current_value down here, it should be the of value "foo"
This is important to understand when working with other peoples code, you’ll break something quick if you start merging code and leaving variables everywhere unwrapped.
Place your code in one location
Example, I need to build a function that lets me click a “Print” button and open a new window. I can create one object that will take an element and add all the functionality we need.
// this remains globally accessible
var AllMyStuff = {};
(function(){
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var PrintPage = function(element)
{
this._print_element = element;
this.init();
};
PrintPage.prototype = {
_print_page_get_var: 'print_view=yes',
_print_element: null,
_window_name: 'PrintPage',
_window_attributes: 'width=800,height=500,resizable=yes,scrollbars=yes,location=no',
init: function()
{
// apply click event to the element
Event.addListener(this._print_element, 'click', this.onPrintClick, null, this);
},
onPrintClick: function(event, args)
{
Event.preventDefault(event);
var url = this.getUrlForNewWindow();
window.open(url, this._window_name, this._window_attributes);
},
/**
* Get the url. If there is a get variable in use, then append a new get variable after a & char
* to indicate we want the print version. Otherwise, add the ? along with the get var.
*/
getUrlForNewWindow: function()
{
var url = window.location;
// do we have a search query (get variables)
if(url.search.length) {
url = url.pathname + url.search + '&' + this._print_page_get_var;
} else {
url = url.pathname + '?' + this._print_page_get_var;
}
return url;
}
}
// save our object in the global namespace so we can use it later
AllMyStuff.PrintPage = PrintPage;
})();
Notice how I’m using a global object to organize my code. This is one helpful habit that I ended up taking from YUI, they do this a lot and it’s helpful and keeps code organized.
The real reason for that though is that if I need to use that PrintPage object, I need to be able to do so later in the site. If I want to use this now, I just need to give the PrintPage object an element that will act as a button… for example…
< a href="printpage.html?thisPageTitle=something" id="printPageButton" > print < /a >
// given that link is on the page somewhere, I can do this to activate the print page button now...
var print_button_element = document.getElementById('printPageButton');
var print_button_object = new AllMyStuff.PrintPage( print_button_element );
If you go through the code above, you’ll notice that the object has an init function that will use that element, and automatically add any event functionality needed for that button to work.
