Tag Archives: javascript

A DRY abomination

One of my habits when presented with a new framework/platform is to implement a problem I know like the back of my hand. Usually the user interface isn’t of concern so I haven’t done much to improve on the logic there. I decided to try something different with this implementation of Tic-Tac-Toe:

Given the following 

        

            

                 
                 
                 
            

            

                 
                 
                 
            

            

                 
                 
                 

I used the following logic to determine the coordinates from a user click

var clickHandler = function(e){
//Recieves a plan/jQuery managed event object                    
       var element = e.target;
       var parent  = element.parentNode;                    
       var x,y;
       //Below is fine for 0-9 scenario's but will need to be refactored for more
       //advanced/larger grids.
       try{
            y = element.classNames().detect(function(cls) { if( /y\d/.match(cls)){ return true; }})[1];
            x = parent.classNames().detect(function(cls) { if( /x\d/.match(cls)){ return true;}})[1];
        }catch(e){
            console.debug(e);
            return;
        }
                                        
         console.log("Coordinate " + x + "," + y);
};

The cool thing about this, is that with jQuery I can do jQuery(“#myTable tr.x2 td.y0”) and get the exact cell I am looking for… or even crazier stuff like:
“#myTable td.y0” to select vertically down a row
OR
“#myTable tr.x0” to select horizontally.

Adventures in Javascript dependancy loading

One of my most personally successful philosophy’s in dealing with Web browsers is never blindly trust them.

My initial solution to loading in dependencies depended on a switchboard style approach, if browser support onready or similar events then bind an anonymous function to make the appropriate notice.  Else spin up a interval based checker anonymous function that looked every few seconds for the script for about a minute.    This solution kind of worked, but not reliably because it depended on browser detection vs. capabilities detection.

Instead of reworking things to attempt to ferret out what capabilities a foreign browser supports, I went with a brute force approach that will eventually be a foundation for a much more advanced system.

So the prototype works like such.

wm.loader.load(“someModule”) which becomes the path “/mods/someModule.js” and that is applied to a new script tag as it’s src attribute.  This is then appended to the head tag.  All pretty standard stuff actually.  What’s different is the notification process.

someModule.js contains a simple line “wm.loader.notify(“someModule”) ” which hits an internal dictionary and if this is the first notification, fire’s of a notice to the server.

Simple and guaranteed to work reliably.   Plus it gives me room to grow for later.

Like adding a call like “wm.loader.multi(“lib1″,”lib2″,”lib3”, 10,  function(){   doSomethingWhen Dependancies met });

arguments[0-2] can be detected and pushed to a callstack array, any integer can be assumed to be a time out period, and the last argument as an anonymous function can be assumed to be a onSuccess callback.   A dependency failure mechanism could be incorporated into the actual loader lib as either an observable emitter or just a cry for help back to the service.

More involved:

wm.loader.multi( ){

          var dependancies = [],  timeOut = -1,  callBack = None;

          loop through arguments:
                    if( current instanceof string ){
                           append to dependancies
                    } 
                    else if( current instanceof integer){
                             append to timeOut
                    } 
                    else if( current instanceof function ){
                                assign to callBack
                     }

              var dependancyCheck = function(loadedLib){
                                          pop loadLib from dependancies;
                                         if dependancies.length <= 0 then
                                                     cancel timeOut 
                                                     call  callback;
                                 }
             dependancies.map( wm.loader.load, dependancyCheck );
}

I would be lying if I said I knew this construct would work perfectly once I implement it, but I think the general idea is something to work with.