MooTools: Class Methods and Inheritance
In my last project, I enjoyed scripting using mootools and started exploring it more deeply. One of my extensive use was to define UI elements’ functionality in classes and then create multiple instances for re-usability.
Mootools makes use of Javascript’s native prototype model for inheritance. To extend a base functionality into sub class, mootools provide ‘Extends’ method. However, if you have class methods in your base model, Extends is insufficient to get them into the sub classes. After some research, I managed to solve this by using Class Mutators and overriding the Mootools ‘Extends’ to take care of class methods inheritance.
First of all, we need to define a ClassMethods mutator. Mutators belong to a class, not to their instances and they are called only when we define a new Class.
Next, we need to redefine Mootools Extends mutator:
Check out the example below:
You can see the above code working here.
http://jsfiddle.net/rZvJE/11/
Trackbacks
Use this link to trackback from your own site.
Hi Anup - I actually sent a mail to you yesterday. Just checking if you received it. Thanks.
Niro.
Hi Anup,
Thanks for sharing, class methods in mootools is definitely something I miss.
I was quite reluctant to overide Extends, since it is so much used within mootools, but I saw it’s actually only two lines of code (six with the method called within the closure). With a well tested app, I guess it’s ok.
Your code is not mootools-1.3 compatible, here’s an update : https://gist.github.com/906301
[...] are also a slew of additional benefits, like ECMAScript 5 array methods, support for multiple inheritance, and event handlers that make it easy to detect if the user is pressing Alt while right [...]