A Simple “Destructor” Pattern In Javascript
I’ve been playing around with Javascript a lot more at work lately — in fact, the UI for the current project I’m working on is almost entirely done in Javascript (using the Dojo/Dijit/Dojox library).
In working on the project, I’ve been trying to follow some general “best practices” — not necessarily Javascript practices, but overall programming practices. One of the main ones I’ve had some fun playing with is a basic destructor bastardization, and I figured what the hell: I’ll throw it out for people to take a look at.
Three notes I want to put out here first:
1) I’m using the Dojo library, but the pattern itself isn’t really library dependent. The example code I’m giving should translate fairly well to Prototype, jQuery, or even just plain ‘ol vanilla Javascript.
2) Javascript doesn’t have an actual destructor implementation, like an “OnDelete” event or anything like that, so that’s why I say this is a “bastardization” of a destructor — you still need to manually call everything yourself in order for it to work. But, setting that up to happen automatically when the page is unloaded is a part of the example code I’ll give out here.
3) This may or may not be good practice overall. I’m not a JS guru by any stretch of the imagination. I actually started doing this because of a misunderstanding — in FF, my project was leaking memory like a seive, and I thought cleaning stuff up would help. It has, but most of the memory leaks were because of Firebug holding on to references. However, I don’t think this code will hurt anything, other than spend a few cycles cleaning things up when the user navigates away from the current page. If you find out otherwise, please don’t hesitate to let me know.
Anyways, on to the code…
The pattern is really simple. To start with, we’ll create a very basic Javascript class (again, this is using the Dojo library; tweak to suit your own needs):
dojo.declare("Person", null, {
name: null,
address: null,
constructor: function() {
this.name = "Bob Jones";
this.address = "123 Test Dr.";
},
destroy: function() {
delete this.name;
delete this.address;
}
});
That last function is what this little article is about — “destroy”. Yes, this is a contrived example, so in the real world you’d probably just let the JS garbage collector handle such a trivial object, but humor me.
Anyways, that’s half the fun right there. The other half goes into the web page where you’re loading the object (again, using Dojo-specific code):
var thePerson;
function initPerson() {
thePerson = new Person();
dojo.addOnUnload(destroyPerson}
function destroyPerson{
thePerson.destroy();
delete thePerson;
}
dojo.addOnLoad(initPerson);
Of course, that goes in a script tag (I put it at the end of the page, but whatever).
Again, it's such a contrived example that it probably doesn't seem to be of much use -- even if a Person object did leak, so what? Maybe it won't do a whole hell of a lot as far as overall memory consumption goes, but (IMO) it looks like a better attempt at good practices.
Please feel free to criticize and point out problems with the concept -- again, I don't claim to be any kind of expert on Javascript, so I may be missing the boat entirely here. And I've been having some minor problems trying to get some good profiling set up -- even with Firebug -- so I couldn't really tell you whether it makes much of a difference in long-term memory consumption or not.
Anyways, I need to start getting ready for work. Catch you on the flip side.
--Matt
Comments
Leave a Reply
Networked Blogs (on Facebook)
