1Directly to the point
ObjectiveDegradation is a small API that will map javascript objects behaviour to the HTML of your page. See the «Hello World» example, the ObjectiveDegradation and Microformats tutorial or read the rest of the article for an introduction to the problem and the proposed solution.
2Behaviour Separation
The principle of behaviour separation is simple: you should not mix layout information (html, css) with behaviour information (server side code, javascript, etc...).
Basically, with this js, this means that you do not put any javascript event call in the html:
<a href="#" onclick="do_something();">do something</a>
[1] is bad. Yes: BAD; what
will happen with this link if the browser does not support javascript
(or it is disabled)?
This is treated in an interesting way by the Behaviour library. The javascript behaviour is glued to the html by definint element level behaviour. It looks something like that:
html
javascript
var myrules = {
'#example li' : function(el){
el.onclick = function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(myrules);
(this is the basic example from the Behaviour home page)
3Graceful Degradation
So what about the degradation of this code when javascript is disabled? [2]
This is the great thing, if javascript is not enabled, the navigator will just call the link and it is up to the server-side code to have the same behaviour as the javascript.
However, this approach have some issues. The first one (at least the one I found first) is passing parameters to the javascript this way. If we could pass parameters, then we can have some reusable code. You can see other small problems with the approach
And there, a few solutions are proposed:
- using the id, class or rel field to contain them. But hey, thats
means:
- extra parsing
- not really semantic at all
- where is the separation between behaviour and code? hum...
- treat the id as an index in some database that will contain the rest of the params [3]. But well, that is mainly if you use ajax.
4Object, Semantic and Separation
Well, here comes a strange idea. First I read the ParticleTree article and DomScripting on degrading ajax that both make a good point: The only really degradable element in XHTML are the one that naturally generate onclick events: forms buttons and anchor links. This is the first principle I started with.
All this Behaviour.js approach is currently oriented to a procedural javascript approach, which is in my opinion what makes it difficult to scale to pass arguments, be reusable etc...
I personally prefer object oriented programming and of what I have seen, javascript is really cool for that. But then, how do you map the javascript objects to a single onclick event?
This is where a bit of semantic comes handy. Lets say you have semantically structured html:
- the form represents a Message,
- the submit button is one of our display button,
well, this is some sort of semantic, is it? Anyway, the word is always over-used, here it is meaningful in a certain perspective. Lets make it an Object Oriented perspective with some javascript code [4]:
var Message = Class.create();
Message.prototype = {
display: function() {
alert($F('message'));
},
};
So here we have a javascript object, as Message with a display function. Does that remembers you something?
Yes, you probably got it: it would be great if we can map this object and its behaviour on the submit button. Well, this is what ObjectiveDegradation API will do.
You just have to register the javascript object you are interested in. Then, when a user will click on the submit button, the API will override that, initialise a Message object and call the right (display) function on it:
ObjectiveDegradation.register({
'Message': Message,
});
5What about parameters
Well, we all know this is not yet talking use very far. Objects oriented goes farer than that.
1- object properties. Yes, object have methods, but also properties, this is were the thing start to be handy:
var Message = Class.create();
Message.prototype = {
string: '',
display: function() {
alert(this.string);
},
};
ObjectiveDegradation will in fact follow the following steps:
- find the closest parent of the clicked node that match one (ore more, will see that later) registered class,
- create the right object and inherit all the methods of the corresponding classes,
- find all the childs that correspond to properties of the trigered classes,
- call the matching function.
In our example, it will:
- create an object and copy all the function from the Message prototype,
- set the property string of this Message to the value of the input,
- call the display function;
ObjectiveDegradation will do all this for you!
2- Object coreferencing see example and the ObjectiveDegradation and Microformats tutorial, will talk about that later.
3- Polymorphism see the tutorial on Polymorphism and Inheritance.
4- Multiple Inheritance simple inheritance is treated in the tutorial on Polymorphism and Inheritance. Multiple inheritance will soon be developed in a tutorial on patterns with ObjectiveDegradation.
.
