I know I did not write for over a week now. I’m damn busy. Again, it’s Tim Connor’s fault. He left this fantastic link in the comments and after I read it, I was hooked so much that I’m overburning.
Mr. Crockford opened up a whole new level of Javascript programming for me. Before it, I was finally having a grip on how Javascript should be used in standards oriented pages. There, JS is not required to complete an action, but if you do enable it, you will complete it a lot quicker. The secret can simply be called..
Class abuse
As my latest WCH shows, I use one particular class to make the script working in IE5.0. I add WCHhider to any element that should be hidden when WCH is applied. That class is not in any CSS file, it is simply there as a marker.
This is a mild case of abuse.
Worse one is where I deliberately place classes on certain elements, just to be able to find them afterwards, when page is loaded. Using Mike Foster’s excellent X library you can do wonders. Here, I’m interested in xGetElementsByClassName, which returns an array of elements that have passed class name. Since all modern browsers support multiple class names, this is a sure-hit strategy.
What can you actually do with this? Well, let’s say that you have an unknown number of links on the page that all opens up the same link, but in the new window (see here, Horse form and Live commentary). There are various ways to open it up, but I wanted an accessible, yet usable stuff. Accessible means that even people with JS off can see this, and those with JS on will see it in new window.
To achieve that, I placed a regular A element, with href equal to link which should open in new window, and one dummy class.
<a href="link-to-open" class="TTwnd">....</a>
Now, on window.onload, you need to find all the links with this class and process all of them like this:
window.onload = function() {
var aTmp = xGetElementsByClassName("TTwnd", document, "a");
for (var i=0;i<aTmp.length;i++) {
aTmp[i].onclick = function() {
sHref = this.href;
window.open(sHref...);
return false;
};
}
}:
Very neat and very useful.
Private members and inheritance
So, just when I (more of less) finished recoding all my scripts to that, inheritance comes. I have developed several large JS applications, but I always disliked the fact that each function could call any other. Even though it is fastest to code, it also creates a whole a lot of mess, with no clear structure.
I was always trying to somehow divide my scripts into namespaces (for the lack of better word). That is why you see ADXM_, WCH_ and other prefixes. Douglas Crockford showed that Javascript can have private properties and methods as well as some sort of protected and public ones (not identical to Java or C# with same name).
So, now I’m recoding all of it again, using the parasitic inheritance to gradually build my objects. I have recoded WCH and ADxMenu to use this, only I don’t have time to post them. I’m damn busy recoding commercial work into this so I can use all the benefits of it. That work features 5 large Javascript modules, all calling each other here and there.
Now, instead of doing..
if (typeof(BS_BodyHide) != "undefined" && ...) ...
…I can use much cleaner form..
if (BS && ...) ....
This is the simplest example – possibilities are endless. And I just love it when I see something like this now:
LU.Market.Start(); LU.Sel.Start();
Hehehhehe. Fun, eh? I don’t quite use his exact methods, entirely, but I rebuilt a expanoTree using some of his (and some other) techiniques. Didn’t get much sleep for a while, but it’s beautiful now.
This page http://www.pbwizard.com/Articles/class_inheritance.htm entails another technique I found handy (actually I used a slightly inferior, but similar one):
if( !(this instanceof myClass) ) return new myClass( );
I can now just call myClass(element).doStuff(), almost as if the element was extended from the start (after I call it it does have the object attached, but this saves you from having to init every element on the page onload), because I attach the instance ref to the element (and add another test case to avoid reiniting it and for performance, since my tree crawls the same elements a lot)
function myClass()
{
if(!element){return null;}
if(element.myClass){return element.myClass}else{element.myClass = this;}
if( !(this instanceof myClass) ) return new myClass( );
Since we can’t change the HTMLElement.prototype before the DOM loads, this allows be to come as close as possible, as far as I am concerned. I could bind all the functions directly onto the element, but that could cause some problems. Instead I just always reference the object, then in my external pages, if they need to call a method of this new super element they just use the mentioned
myClass(element).doStuff()
For example, a page with my TreeNodes could use
TreeNode(element).Expand();
without having to worry about anything else (each node gets a reference to its parent, and then the root from its parent, which has been unwind back to the initial object, by the parent crawl).
One word of caution, it can get kind of confusing which scope is which, what with having to explicitely call this, or not. I suggest sticking with the _ for private scope, as it makes it a little clearer: private scope always has “_” public always has “this.”.
Also keep in mind that true instance public scope (prototype) actually shares memory space, where as private (inside the constructor) won’t, which means that each instance will have to keep the priveleged scope in it’s own memory space. I don’t worry about this too much, but if you had really large arrays of objects, you might need to pull as much out to the prototype as you could (just keeping getters and setters for priveleged). I haven’t really settled on a style yet, but I am liking getters in setters as the majority of the priveleged methods, anyways.
One other page, you may wish to skim is: http://www.litotes.demon.co.uk/js_info/private_static.html as he addresses what he says are some shortcomings in the original technique. I do not like his bulky methods of adding on true protected, though.
Oh, and I wonder if there would be any chance of convincing Mike Foster to add in an option (last parameter) proc hook, so you could pass in a function argument to his xGetElements functions, and then not have to walk each collection again a second time.
Then your code could just become
xGetElementsByClassName(“TTwnd”, document, “a”, myFunction);
where this is defined on the page
function myFunction(element){
element.onclick = function() {
sHref = this.href;
window.open(sHref…);
return false;
};
}
I know there can be some trickery to get this to work across frames and whatnot, but I’ve done similar before.
Wow, looking over my first use of javascript closure and privelege (my WCH tweaks) is ugly. I could do it some much better now. Am I ever going to be able to stop refactoring everything I’ve ever done? ;)
I really think it is cleaner (and more effecient) to pull the API functions out into prototype space, and just keep priveleged as internal workings that are needed to bridge the gap (which could be called directly if people need to cheat, when extending).
For example, imnsho, Discard and Apply should be prototyped (and the only functions that are) and have them call priveleged functions, as needed, to get at the inner workings.
I’m also constantly refactoring the code, always finding ways to write it better (or so I think).
I too have not found the one style I keep to. I changed it three times up to now and after each I thought this is the one. ;)
This proc hook thingie…you can try to contact Mike. He is present in the SitePoint’s javascript forum. He actually recommends it as a place to talk about X. I contacted him there in the past and found that he promptly responds.
I’m sure he will welcome perfomance additions.
Hi all. My first time here.
Thanks for the very nice comments on my work.
Yes indeed — if you would like to see additions/enhancements to the X Library just let me know. I can’t promise when I’ll get to it — I’m having to cut back on time spent on my web hobby right now.
I just redesigned cross-browser.com and I have a new X revision coming soon. I’m at another crossroad with the X library — I’m not 100% sure how to proceed.
On my site you’ll see links to 3 forums which I regularly visit. You can always find me at one of those forums.
My research into “Javascript Closure” brought me to this site. I have to admit that I’m late in utilizing this language feature. I’ve been playing with it — but don’t yet have anything on my site that utilizes it. There are many demos that I need to re-write entirely — but don’t have the spare time to do it.
All the Best,
Mike
BTW, in X v3.15.2 I’ve added a callback function parameter to these functions:
xGetElementsByClassName(clsName, parentEle, tagName, fn)
xGetElementsByAttribute(sTag, sAtt, sRE, fn)
Welcome Mike, I’m glad you find my blog worth your time. Tim, as you can see, Mike is a very receptive fellow, just as my impression was.
Btw Mike, if you haven’t seen, I make an extensive use of X lib at Stan James web site, where X is used all over the place — floating betslip, suspension layers, more bets layer. Unfortunatelly, client did not allow us (my company that built the betting platform) to place any built using links. I will try to sneak in some pointers in the scripts though, if that doesn’t harm the perfomance — as can be seen, every script is compressed.
Wow, so receptive that a casual reference on a blog somewhere gets the changes in. ;) Thanks. Well, I’m using my own home-rolled version that uses the .htc to handle all the WCH bindings anyways, but that should make your version more effiecient, and easier, Alek. And of course, other people may have a use for it sometime. There have been projects I have done before that could have really used it. it will be a bit of a niche requirement, though, possibly Mike.
Tim
Hi
I did like your blog postings and comments but i have soem problem if some1 could help me out.
Does anyone know how to pass html table data from parent to a child form html table ? Or may be you could let me know any URL related to this topic.
Any kind of help is highly appericiated.
Thanks
Imran Hashmi
http://www.visionstudio.co.uk