blog.kassens.net

Valerio came up quite a time ago with another class mutator called Exposes. (I already wrote a post about the Binds mutator a few posts ago). I rewrote the mutator a way I think the usage is cleaner.

The Exposes mutator is about getters and setters, which means its incompatible with IE and reduces it's practical use to internal websites, experimental use, or AIR apps. The mutator converts methods named like getFoo to getters and setFoo to setters. That is myObj.foo = "bar" calls the setter and alert(myObj.foo); the getter. Note that this means you can't store the property internally under the same name, as setting the property with this.foo = newFoo; in the setter calls the setter again, which results in an endless recursion. The same is true for getters. (MDC about getters and setters)

The mutator:

Class.Mutators.Exposes = function(self, exposes){
  if (!exposes) return;
  for (method in self) {
    var match = method.match(/^(get|set)([A-Z])(\w*)$/);
    if (match) {
      var prop = match[2].toLowerCase() + match[3];
      self[(match[1] == 'get') ? '__defineGetter__' :
          '__defineSetter__'](prop, self[method]);
    }
  }
};

The mutator iterates over all attributes and if one begins with set or get followed by an uppercase letter it sets it as an attribute setter or getter respectively using __defineGetter__ and __defineSetter__.

A slightly more complex Exposes mutator which accepts a list of attributes to convert is available here.

To see the usage I'll make an example. Say we have a Person with a first, last and full name. The full name being a combination of the last and first name.

var Person = new Class({
  Exposes: true,
 
  initialize: function(first, last){
    if (!last) {
      // last name not given, first argument is the full name
      // using the setter to set the full name
      this.name = first;
    } else {
      this.first = first;
      this.last = last;
    }
  },
 
  getName: function(){
    return this.first + " " + this.last;
  },
 
  setName: function(name){
    name = name.split(' ');
    this.first = name[0];
    this.last = name[1];
  },
 
  getInitials: function(){
    return this.first[0] + ". " + this.last[0] + ".";
  }
});

The class should be pretty self explanatory. We can't just update the initials without changing the name, hence only a getter for initials.

With the Exposes mutator there is no need now to call the setter and getters by hand and we can just do things like:

var me = new Person("Jahn Kassens");
// oops, someone misspelled my first name, let's fix that
me.first = "Jan";
alert(me.name); // Jan Kassens
alert(me.initials); // J. K.
 
var test = new Person("Max", "Mustermann");
alert(test.name); // Max Mustermann
test.name = "John Doe";
alert(test.last) // Doe

Another new feature of MooTools 1.2 is the toElement method you can add to any of your classes (or objects). This method is inspired by the Prototype framework which added it recently. I considered it very useful in streamlining classes so I adopted it and added it to the core.

Note: its not yet documented but its already in the 1.2.0 version.

toElement is supposed to return an Element which represents the object in some way. Consider a User class for example. Wouldn't it be cool, if you can inject a user in the page like userList.grab(joe); or $(joe).inject(userList);?

All we need to get this functionality is to add a toElement to our user class. Whenever an object is passed to $ it will try to call its toElement method to get an element representation.

Now enough of this theory and lets have a look at an example.

var User = new Class({
 
  initialize: function(name){
    this.name = name;
  },
 
  toElement: function(){
    if (!this.element) {
      this.element = new Element('div', {'class': 'user'});
      var avatar = new Element('img', {
        src: '/avatars/' + this.name + '.jpg'
      });
      var description = new Element('div', {
        'class': 'username',
        'text': this.name
      });
      this.element.adopt(avatar, description);
    }
    return this.element;
  }
 
});
 
window.addEvent('domready', function(){
  var alice = new User('Alice');
  var bob = new User('Bob');
 
  $(alice).inject('header', 'after');
  // let's inject bob after alice
  $(bob).inject(alice, 'after');
});

I think this code is pretty self-explanatory. Only one thing is probably worth mentioning: toElement doesn't create a new element each time it's called, but stores the element in this.element and only creates it if it's not already created.

Update
JMG pointed out that the element wont update when the user instance is changed. Say we want to be able to change the name of the user. We can do this by adding a method to the User class:

var User = new Class({
  // code from above
 
  setName: function(name){
    // store it to the class
    this.name = name;
 
    // we're done when the element is not yet created.
    if (!this.element) return;
 
    // update the element:
    this.element.getElement('div').set('text', name);
    this.element.getElement('img')
      .set('src', '/avatars/' + name + '.jpg');
  }
 
});
 
bob.setName('bobby');

What the average developer eye should see is the duplication for setting the element values. We could create a method to update the element values or store the description and image elements to the element. (Since we probably have more attributes than just a name). I've left that out for the sake of simplicity.

When writing a Class you often want to bind a class method to an event and access this as the instance of the class. You could say this isn't a big deal using .bind(). That's right until it comes to removing the event again, since Function::bind works in that way that it returns a new function wrapping the old one. Hence you need to store that very function when you want to remove it again (without removing all events from that element, which isn't good inside a portable class).

What I've seen a couple of times is an object holding all bound functions and created in the constructor, example:

var MyClass = new Class({
 
   initialize: function(){
      this.bound = {
         sayHello: this.sayHello.bind(this),
         sayGoodbye: this.sayGoodbye.bind(this)
      }
      // now only using this.bound.sayHello and
      // this.bound.sayGoodbye inside the class
   },
 
   sayHello: function() { /* ... */ },
 
   sayGoodbye: function() { /* ... */ }
 
});

I wasn't quite happy with this solution, because it's too verbose: why always use this.bound.myFn when I always want the bound one? Secondly, I don't want to do the binding of all these functions by hand. After some discussions on different solutions this is what I come up with as the optimum between speed (don't worry its faster than the solution above) and usability.

A new so called "class mutator" named Binds. Most of you probably didn't hear of class mutators before, but you sure have used a class mutator before when you've written one or another class. Built in mutators are Implements and Extends and here is the code of the Binds mutator:

Class.Mutators.Binds = function(self, methods) {
 
   $splat(methods).each(function(method){
      var fn = self[method];
      self[method] = function(){
         return fn.apply(self, arguments);
      };
   });
 
};

What it does is overriding all methods passed to it as a string with a version bound to the instance. Binds: 'foo' would just bind foo to the class, Binds: ['foo', 'bar'] binds foo and bar. Pretty simple, huh?

Now let's see how the class can be simplified using the Binds mutator:

var MyClass = new Class({
 
   Binds: ['sayHello', 'sayGoodbye'],
 
   initialize: function(){
      // now only using this.sayHello and
      // this.sayGoodbye inside the class
   },
 
   sayHello: function() { /* ... */ },
 
   sayGoodbye: function() { /* ... */ }
 
});

I hope you learned a bit again or can find use of it.

If you have any wishes or ideas for further articles let me know.