Christopher Bird » Javascript http://www.christopherbird.co.uk Personal and professional blog Mon, 21 Jun 2010 15:32:48 +0000 en hourly 1 http://wordpress.org/?v=3.0 JavaScript Multiple Callbacks http://www.christopherbird.co.uk/2010/06/javascript-multiple-callbacks/ http://www.christopherbird.co.uk/2010/06/javascript-multiple-callbacks/#comments Mon, 21 Jun 2010 15:32:12 +0000 Chris http://www.christopherbird.co.uk/?p=150 On a previous project we were writing a web UI using a lot of javascript. The UI was constructed in an MVP style with many Views, Presenters and Models all active at the same time. One of the problems we had was with having multiple Presenters subscribed to listen for a single callback from a Model.

Initially we had quite an ugly solution which involved chaining functions in a similar fashion as to DOM events were handled in the pre jQuery days. To do this we used the following function…

function addEventHandler(event, scope, method) {
    var oldEvent = event;
    return function() {

        var params = [];
        for (var i = 0; i < arguments.length; i++) {
            params.push(arguments[i]);
        }
        params.push(this);
        oldEvent.apply(this, params);
        method.apply(scope, params);
    };
}

Example usage…

someObject.someEvent = addEventHandler(someObject.someEvent, this, doSomething);
function doSomething() {
}

After some refactoring we created an Event class (semi inspired by Node.Js EventEmitter). This seemed like a nice way to allow us to simplify the syntax, make it easier to read and attempt to use a familiar syntax to listeners else where in JavaScript.

var Event = function() {
    var self = this;
    var handlers = [];

    self.addListener = function(handler) {
        handlers.push(handler);
    };

    self.trigger = function() {
        for(var index in handlers) {
            handlers[index].apply(this, getArguments(arguments));
        }
    };

    var getArguments = function(args) {
        var params = [];
        for (var i = 0; i < args.length; i++) {
            params.push(args[i]);
        }
        return params;
    };
};

Example usage…

someObject.someEvent.addListener(doSomething);
function doSomething() {
}
]]> http://www.christopherbird.co.uk/2010/06/javascript-multiple-callbacks/feed/ 0 New validation rules http://www.christopherbird.co.uk/2010/01/new-validation-rules/ http://www.christopherbird.co.uk/2010/01/new-validation-rules/#comments Sat, 16 Jan 2010 17:23:16 +0000 Chris http://www.christopherbird.co.uk/?p=82 Few conversations with colleagues later and a few small changes to the validation framework.

  • Fixed typo in adding custom rules test.
  • Added “length less than”, “length greater than” and “is a number” rules
  • Updated example to include some of the new validation rules

What next?

Date validation seems to be one that keeps cropping up. DateJs provides a great library for dealing with all sorts of date formats. Im considering whether this should be an optional set of rules as the sizes of DateJs would negate the bennifit of the small validation core if included with it. I’m also considering an optional set of patterns for common international problems (e.g.Email address and Uri), if they are small enough perhaps they should be in the core as well.

]]> http://www.christopherbird.co.uk/2010/01/new-validation-rules/feed/ 0 Javascript validation http://www.christopherbird.co.uk/2010/01/javascript-validation/ http://www.christopherbird.co.uk/2010/01/javascript-validation/#comments Sun, 10 Jan 2010 20:02:49 +0000 Chris http://www.christopherbird.co.uk/?p=72 To quote Eddie Izzard “Look, you’re British, so scale it down a bit, all right?”, well perhaps i should say “Look, you’re a validation framework, so scale it down a bit, all right?”. Recently i’ve been working on ALOT of javascript and experiences (reassuringly) from the past have come back to haunt me yet again. What am i talking about? Well it would seem that every framework starts out with the good intention trying to avoid repetition, but over time, someone adds a little here, and a little there and before you know it you have a behemoth of a framework which does things well out side the scope of what it should do.

How does this relate to javascript validation? Well after using quite a popular JQuery validation framework i noticed the size of the library minified as 29KB. This doesn’t sound a great deal but when you include a few frameworks like this, plus JQuery the page weights seem to get pretty big. Yes caching, gziping and content delivery networks will help but the first hit on these pages over mobile networks or on mobile phones and they can take quite a while to load. What i would like to see more of is smaller more directed frameworks/utilities that i can customise into what i want and keep page sizes to a minimum.

To this end i flippantly stated “It can’t be that hard” and embarked on writing a validation framework that will allow me to do most of what i need without the overhead. This is only a first stab that works for what i need, any comments on other validation types that i should support would be good.

Currently it supports… required (and ability to define a default value to ignore), patterns, less than, greater than, equal to, equal to other field and the ability to add custom rules. On top of this you can all specify rules that enable and disabled validation of a field. Currently the minified size stands at about 2k even tripling the number of rules would only take that up to about 4k.

I got the size down by only putting into the framework what really needed to be there. So what won’t it do? well it wont manage form click events for you, thats for you to decided how you want the validation to fire. It won’t do anything clever with the error messages, if you want something fancy write what you want.

Take a look at the code on git hub http://github.com/chrisabird/validate

]]> http://www.christopherbird.co.uk/2010/01/javascript-validation/feed/ 0