The Dojo Fish Tank is a demonstration of Dojo Toolkit’s amazing capabilities with animation. JavaScript animation is under used because previously it was difficult to produce results that were speedy, cross browser compliant, and easy to write.
I did not line mash to write the script in less than 200 lines. Instead, I commented it and left it readable and neat so everyone interested can view the source and learn about animations, JavaScript, and Dojo.
To do the simple animations I mainly used dojo.fx.slideTo() which does a very simple slide effect from one point to another. I used one other animation which is dojo.fadeOut() which was used to fade the bubbles out when they get near the top of the tank.
Memory leak with removeChild
A small memory leak, noticed by Anthony Fryer (a Dojo developer), was caused by DOM nodes not being removed properly by removeChild(). In browsers, this does not actually destroy the element completely, it stays in memory. This is solved by using dojo._destroyElement() which moves the element into a div and sets the div’s innterHTML to nothing. If you do not want to use Dojo be sure you are not creating a new div each time you delete a node as this would also cause a DOM node leak.
I learned a few new things from Freyer about memory leaks and he showed me a tool to help see them. IE Sieve helps find memory leaks in JavaScript. I used this tool to measure memory usage until I fixed the issue.
View the Dojo Fish Tank in action.
Great post! Just wanted to let you know you have a new subscriber- me!