Simple event generation
In an effort to keep each chapter and its included code samples as relevent as possible to the context around it, I decided that a toolkit made the most sense. I also decided to simple write the toolkit and include it for the following reasons:
- I haven't used any of the ones out there yet for long enough to use them to correctly accomplish exactly what I need without coding the samples specifically for that particular toolkit.
- I needed a toolkit anyway for other things I work on and (since I'll release this under the BSD License), I can write it and use it anywhere.
- The toolkit will only need to cover a comparatively limited set of features, so I won't re-write all of Dojo, for example.
- Incuding code samples like the following reinforce the overall method of development.
The following implements very simple, yet effective, event listening. Just extend the EventDispatcher with whatever object has events (form handlers save, fail, delete, load, clear, etc.) and extend the CustomEvent object to fit your needs. This gets used extensively throughout the book in order to simplify the objects through encapsulation.
function CustomEvent() { } CustomEvent.prototype = { type : 'custom' } // Custom EventTarget equivalent function EventDispatcher() { } EventDispatcher.prototype = { // An object literal to store arrays of listeners by type events : {}, // If it supports the type, add the listener (capture ignored) addEventListener : function(type, listener, capture) { if (this.events[type]) { this.events[type].push(listener); } }, // If it supports the type, remove the listener (capture ignored) removeEventListener : function(type, listener, capture) { if (this.events[type] == undefined) { return; } var index = this.events[type].indexOf(listener); if (this.events[type][index]) { this.events[type].splice(index, 1); } }, // Cycle through all of the event listeners, passing the event to the callbacks dispatchEvent : function(type, event) { if (this.events[type]) { for (var i in this.events[type]) { this.events[type][i](event); } } } }
Edited so you can read the code.
12/8/06 - Edited to fix dispatchEvent to actually work.
Labels: advanced ajax, javascript, sample code

3 Comments:
I think this is a fine start. Many people like using fully loaded (read: fat and bloated) kits because they have a lot of bells and whistles with go faster striping..
The problem is, most of them just aren't solid enough to use reliably, and adding a lot of effects and what not just for the sake of adding effects is right up there with the use of blink and marque.. It's tired, out dated, and doesn't add anything to the site itself.
Simple = good.
... the previous post brought to you buy someone using backbase on his own personal site..
"The problem is, most of them just aren't solid enough to use reliably, and adding a lot of effects and what not just for the sake of adding effects is right up there with the use of blink and marque.. It's tired, out dated, and doesn't add anything to the site itself.
Simple = good."
Agreed. I also think that most of the toolkits out there take up entirely too much bandwidth, especially the ones that consider late-loading an excuse to weigh in at half a meg.
And yes, your site just loaded five extra JavaScript files and eight XML/content files before I even moved the mouse...which loaded another JavaScript file. :-)
And, of course, when I don't happen to have Firefox open, I get an "Unsupported browser" message for all of that technology.
Seriously, though, I really don't intend to make a full-blown toolkit for the book. I just want to put something together than will not detract from the rest of the code samples and makes sense to coders. I definitely do not want sample code that reads like:
var my_input = document.getElementById('some_id');
if (my_input) {
var my_input_value = my_input.value;
if (my_input_value) {
/**
* Whole ton of XMLHttpRequest/XML
* parsing magic, with try { }
* catch(e) { } statements, error
* handling, and user notification
*/
(the actual relevant code sample)
}
}
Post a Comment
Links to this post:
Create a Link
<< Home