A DRY abomination

David — Sun, 31 Jan 2010 06:48:36 +0000

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

        <table border="1" style="height:100%; width:100%" >
            <tr class="x0">
                <td class="y0"> </td>
                <td class="y1"> </td>
                <td class="y2"> </td>
            </tr>
            <tr class="x1">
                <td class="y0"> </td>
                <td class="y1"> </td>
                <td class="y2"> </td>
            </tr>
            <tr class="x2">
                <td class="y0"> </td>
                <td class="y1"> </td>
                <td class="y2"> </td>
            </tr>
        </table>

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

David — Fri, 29 Jan 2010 20:35:39 +0000

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.

Refactored scope » javascript

A DRY abomination

Adventures in Javascript dependancy loading