Sep 30
Injecting Traits into Javascript Objects
Posted By: Praveen Ray
Duplication is the mother of all evil in programming. Remaining DRY at all costs should be your goal at all times. A pattern repeats itself one time and your code complexity goes up exponentially.
One great way to DRY up your code is via Traits. Traits are functional equivalent of base classes where you can collect most often used functions and inject these Traits into your objects. Here’s one simple way to do it in Javascript (using extjs here):
MyTrait = { xhr: function(config) { return Ext.Ajax.request(config) }, submit: function(basic_form,config) { //perform some checks on config // and call basic_form.submit }, //...add more utility functions } function MyGrid(config) {MyGrid.superclass.constructor.call(this,config)} Ext.extend(MyGrid, Ext.grid.GridPanel, MyTrait);
September 30th, 2009 at 5:29 pm
You should define and xtype for your MyGrid, augmented with MyTrait.
Ext.reg(’my-grid’, MyGrid);
var myGrid = Ext.ComponentMgr.create({xtype: ‘my-grid’, title: “My Grid”});
September 30th, 2009 at 5:59 pm
Hey Praveen,
I think you don’t need the ‘function MyGrid(config) {MyGrid.superclass.constructor.call(this,config)}’ line (in case you don’t override the constructor).
Just ‘MyGrid = Ext.extend(Ext.grid.GridPanel, MyTrait);’ should work in your example, too.
Never heard the name of Trait, in Ruby I would call this a module.
Cheers,
Steffen
October 2nd, 2009 at 1:33 pm
[...] few days back Praveen Ray posted about “Traits” in Ext JS. What he described is pretty much what we’d call Modules in the Ruby world, and how to mix [...]
October 2nd, 2009 at 1:38 pm
I was typing up a reply here but it got a bit long and evolved into a blog post
Check out http://edspencer.net/2009/10/extjs-modules-and-mixins.html if you’re interested…
October 2nd, 2009 at 2:25 pm
Why create an object reference if you’re not going to use it again? Also, there is no need to create a constructor just to call the superclass constructor.
var MyGrid = Ext.extend(Ext.grid.GridPanel, {
// utility functions here
});
That’s it.
One last thing, please encourage the use of ‘var’ when creating variables.
October 10th, 2009 at 1:28 am
Hi Praveen,
>> Here’s one simple way to do it in Javascript (using extjs here):
JavaScript’s language design already supports [Trait] implementation
mechanics in its most native way via [Function] objects and its two
caller methods [apply] or [call].
A trait gets written like any constructor function. Your given example
code than will turn into:
var MyTrait = (function () {
this.xhr = (function (config) {
return Ext.Ajax.request(config);
});
this.submit = (function (basic_form,config) {
// perform some checks on config
// and call basic_form.submit
});
// … add more utility functions
});
The JavaScript code for applying such behavior onto already existing
instances of whatever kind (var obj = new SomeVeryComplexObjectModel;)
literaly states what it does:
MyTrait.call(obj);
And it is simple as well to make this kind of subtyping (is it allowed
calling it *interface inheritance*?) part of a constructor function:
var SomeVeryComplexObjectModel = (function () {
MyTrait.call(this); // applying or mixing in the [MyTrait] type
/*
defining the objects constructing [SomeVeryComplexObjectModel] type
*/
});
How about that defenition of mine, I came up with a while ago, cause
I wanted to make understood myself the languages different approches
and wordings of what I’d like to call Traits in JavaScript too.
»The concept of “Mixin”s from the perspective of
JavaScript adds behavior to objects by delegation
over implemented interfaces. “Trait”s might be
the wording that comes closest to this languages
design.
Furthermore, “augment” describes far better the
mechanism behind this special kind of interface
inheritance than “mix in” does.«
Pleace correct me. If it comes to the basic principles of computer
science I’m merely an interested layman.
so long – peterS.
December 12th, 2009 at 8:30 am
Sry for commenting OFF TOPIC … which wordpress theme do you use? It looks amazing.
December 12th, 2009 at 3:50 pm
The theme is iBlog2 theme by Pagelines