Structure your JavaScript!
Posted by Dennis on Nov 3, 2006 in Uncategorized • No commentsWith the emergence of the AJAX-hype, and the code chaos that comes with it, there has been an increased interest in the structuring of JavaScript code. Very good concepts have been devised that take JavaScript a level further. To begin structuring your JavaScript code, the use of packages/namespaces is valuable start. JavaScript 1.3 doesn’t support namespaces natively, so we’ll have to do it another way. We can accomplish this by using objects:
com = {
rozengain : {
myFunction : function(param1, param2) {
// code
}
}
}
In case this looks a bit awkward to you, this is the JSON-way of constructing objects. We can now call this function in this manner:
com.rozengain.myFunction();
Another cool thing that I use frequently is the separation of presentation and event handling logic. This is the way it is usually done:
<body onload="myOnloadFunction()">
This can also be done in pure JavaScript:
if(element.addEventListener) {
window.addEventListener("load", myOnloadFunction, false);
} else {
window.attachEvent("onload", myOnloadFunction);
}
You can see here that there is a syntactical difference between browsers. This function can be made generic like this:
com = {
rozengain : {
Global : {
addEvent : function(element, eventType, eventHandler, capture) {
if(element.addEventListener) {
element.addEventListener(eventType, eventHandler, capture);
} else {
element.attachEvent("on" + eventType, eventHandler);
}
}
}
}
}
In order to attach the event handler:
com.rozengain.Global.addEvent(window, "load", myOnloadFunction, false);
I have made a complete example to showcase these techniques. This code also attaches event handlers to a div object.
The HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON / Event Handling</title>
<script type="text/javascript" src="com.rozengain.Global.js"></script>
<script type="text/javascript" src="com.rozengain.HomePage.js"></script>
</head>
<body>
<div id="myElement">
Mauris tempor mi sit amet erat. Etiam ac magna. Etiam ac nisl. Fusce eros dui, fermentum sit amet, tincidunt ut, tincidunt nec, velit. Vivamus ligula eros, luctus vitae, venenatis vitae, aliquet ac, nunc.
</div>
</body>
</html>
The global utility JavaScript file com.rozengain.Global.js:
com = {
rozengain : {
Global : {
addEvent : function(element, eventType, eventHandler, capture) {
if(element.addEventListener) {
element.addEventListener(eventType, eventHandler, capture);
} else {
element.attachEvent("on" + eventType, eventHandler);
}
}
}
}
}
And finally the com.rozengain.HomePage script:
com.rozengain.HomePage = {
init : function() {
com.rozengain.HomePage.attachElementRollovers();
},
attachElementRollovers: function() {
var myElem = document.getElementById("myElement");
com.rozengain.Global.addEvent(myElem, "mouseover", com.rozengain.HomePage.changeColor, false);
com.rozengain.Global.addEvent(myElem, "mouseout", com.rozengain.HomePage.changeColor, false);
},
changeColor: function(evt) {
var srcElem = (evt.target) ? evt.target : evt.srcElement;
if(!srcElem) return;
srcElem.style.backgroundColor = (evt.type == "mouseover") ? "#990000" : "#009900";
}
}
com.rozengain.Global.addEvent(window, "load", com.rozengain.HomePage.init, false);
Read more here:
