On all the projects I’ve worked on, I always try to follow the MVC arquitectural pattern, separating the model from the view *and* creating a controller. It may be a simple controller in charge of a tab-set, or an accordion. Or it may be a full size controller in charge of the whole page structure, on sites that make an extensive use of javascript.
Either way, I always have a controller for a dynamic section of the page and the controller always works with the container of that section. If I need to reference any element inside the container I will use this.container.getElementById() or this.container.getElements(), which will do a search only on the child elements of the container and not on the whole dom tree of the page.
Yes, it is very usual to see nowadays code that alters the links of a page 
we are searching the whole page. And coding like that is just a waste of resources.
A couple of days ago I created a demo to simulate planets on a 2D universe interacting each other like Gravity does in our lives. To compute the movements every planet had to be evaluated with each other on every step. Their position will be affected by the other planet position and in proportion to their respective mass. This means the speed of the planets doesn’t impact the attraction between them.
Today I decided to extend this demo a little bit more and I added a few things:
- Mass parameter to make mass independent from size.
- Collision detector to merge planets when they meet each other with color effect.
- Orbit trails
The result is very nice. The first option make it possible to create bigger planets with more mass but with a size that fits appropiately on the screen. The second option merged planets that collide, making it more like a real world. Finally, the orbit trails are just some sugar to see the trajectory followed by the plantes. To avoid the screen getting very messy, the trails clean up themselves after 25 seconds.
As you can see, the universe controller uses the Thread class I was talking about few days ago.
See both demos here:
http://dev.enekoalonso.com/research/gravity.php
http://dev.enekoalonso.com/research/gravity-2.php
PS: Please note there is no Canvas involved here. All objects on screen are DOM elements. Of course this is not the best way to do graphic animations on the web, but it is fun!
If you are working with plain Javascript but still want to have some advantajes when dealing with element classes (element.className) you can write a small $ function like this:
-
var $ = function(element) {
-
this.element = element;
-
this.getClasses = function() {
-
return this.element.className.replace(/\s+/,' ').split(' ');
-
}
-
this.hasClass = function(className) {
-
var classes = this.getClasses();
-
return (classes.indexOf(className) > -1);
-
}
-
this.addClass = function(className) {
-
if (!this.hasClass(className)) {
-
this.element.className += (this.element.className ? ' ' :'') + className;
-
}
-
}
-
this.removeClass = function(className) {
-
if (this.hasClass(className)) {
-
var classes = this.getClasses();
-
classes.splice(classes.indexOf(className), 1);
-
this.element.className = classes.join(' ');
-
}
-
}
-
return this;
-
}
Then, once you have a variable that contains a DOM element, you can use it like this:
-
$(mydomelement).addClass('test');
-
if ($(mydomelement).hasClass('test')) alert('element has class test');
-
$(mydomelement).removeClass('test');
-
var classes = $(mydomelement).getClasses();
This will let you work with elements that have multiple classes very easily.