MooTools Class.Mutators 如何建立一个我们自己的Mutator
Mutator是一个可以改变你的类的结构的一个很特殊的函数，它们是产生特别功能和优雅化继承和掺元的的有力工具。MooTools有两个内建的Mutators: Extends和Implements：Extends Mutator取得传给它的类的名字，然后直接继承它；而Implements取得传给它的掺元类(Mixin Class)的名字后，把那些类的方法添加到新类中。这两个Mutator如何使用可参看前面的博文MooTools Class 使用、继承详解。
Mootools把Mutators储存在Class.Mutators对象中，新建一个Mutator就是为Class.Mutators对象添加一个键，键名为Mutator的关键字(既Mutator的名字)，键值为Mutator的实际函数。
在MooTools中Mutators是基于key-to-key对应的方式进行工作的，MooTools在构建一个新类时，会检查传送给新类的构造函数的对象的每一个键，在Class.Mutators对象中是不是有mutator函数的对应的名字在里面。如果找到了，它就调用这个函数并且把键的值传给它做处理。所以为了使你新建的Class中使用一个Mutator，你必须在传送给类的构造函数的对象上有一个与这个mutator相同名字的一对键值(例如，要使用Extends Mutator来实现类的继承，必须在你的类的声明对象上写Extends:ParentClassName，这个比较好理解)。
这里有两点需要注意：
首先，MooTools提供了两个Mutators: Extends和Implements，如果你使用MooTools-More的话，还有一个Binds Mutator。你新建的Mutator的关键字不能与上面三个Mutator重名，那样的后果简直无法想象，呵呵......
其次，你新建一个Mutator时不能使用对象字面量的方式建立，看看下面代码：
View Code
Class.Mutators = {
Keyword1: function (argus) {
...
},
Keyword2: function (argus) {
...
}
};
为什么？因为这样语法，相当于以对象字面量形式创建了一个新的对象然后在赋予Class.Mutators，本质上完全重写了Class.Mutators，这样MooTools提供的Mutators(包括你之前建立的)都会消失不见，还想要继承？还想要掺元？呵呵......正确的代码是这样：
View Code
Class.Mutators.Keyword1 = function (argus) {
...
};
Class.Mutators.Keyword2 = function (argus) {
...
};
好了说了那么多，只是为了明白Mutators运行原理，接下来介绍几个比较实用的Mutators：
Statics Mutator
在MooTools Class 使用、继承详解中我们讲解了怎样使用extend方法为类添加静态成员。首先你要先建立一个类，然后才能调用类的extend方法添加静态成员，这样两段代码是分离的，来看下面代码：
View Code
var Person = new Class({
initialize: function (name, age) {
this.name = name;
this.age = age;
},
log: function () {
console.log(this.name + ',' + this.age);
}
});
// 添加静态成员
Person.extend({
count: 0,
addPerson: function () {
this.count += 1;
},
getCount: function () {
console.log('Person count: ' + this.count);
}
});
// 建立一个Person类的实例
var mark = new Person('Mark', 23);
mark.log();
// 访问Person类的静态方法
Person.addPerson();
Person.getCount(); // returns: 1
我如果想在传送给类的构造函数的对象中为类添加静态成员呢？我们建立一个简单的Mutator就可以了，来看下面代码：
View Code
Class.Mutators.Static = function (items) {
this.extend(items);
};
var Person = new Class({
// 添加静态成员
Static: {
count: 0,
addPerson: function () {
this.count += 1;
},
getCount: function () {
console.log('Person count: ' + this.count);
}
},
initialize: function (name, age) {
this.name = name;
this.age = age;
},
log: function () {
console.log(this.name + ',' + this.age);
}
});
// 建立一个Person类的实例
var mark = new Person('Mark', 18);
mark.log();
// 访问Person类的静态方法
Person.addPerson();
Person.getCount(); // returns: 1
当MooTools在解析Person的构造函数时，会发现传递给它的对象中的键名字:Satatic。因为我们有一个有相同名字的新的Mutator，Class就调用这个Mutator函数并且把键值传给它（在这个例子中是一个有属性和方法的对象)。我们的Static Mutator非常简单，使用this.extends把传过来的的对象的属性和方法变成Class的属性和方法(Mutator函数总是绑定到class本身上的，因此this指向你的类)。
GetterSetter Mutator
之前我们讲过，在JavaScript中没有私有成员的概念，所有对象的属性都是共有的。那么我们需要为Class添加私有变量进行属性封装怎么实现呢，前面在MooTools Class 使用、继承详解中我们介绍了使用静态私有变量的方法，但这种方法所建立的私有变量是为类的所有实例共享的。所以一般情况下我们只能通过命名规范来区别私有属性，MooTools的风格是在类的属性名前加一'$'标识符来表示这是一个私有变量。
通常在MooTools下实现属性封装是这样实现的，看代码示例：
View Code
var Person = new Class({
$name: '',
$age: 0,
$occupation: '',
setName: function (name) {
this.$name = name;
return this;
},
getName: function () {
return this.$name;
},
setAge: function (age) {
this.$age = age;
return this;
},
getAge: function () {
return this.$age;
},
setOccupation: function (occupation) {
this.$occupation = occupation;
return this;
},
getOccupation: function () {
return this.$occupation;
}
});
var mark = new Person();
mark.setName('Mark');
mark.setAge(23);
mark.setOccupation('JavaScript Developer');
console.log(mark.getName() + ', ' + mark.getAge() + ': ' + mark.getOccupation());
// 'Mark, 23: JavaScript Developer'
通过这种方式来实现封装，如果属性少的话还好，属性一多你的代码长度就客观了，呵呵，在《Pro JavaScript with MooTools》一书中介绍了一个巧妙的Mutator，减少我们书写的代码量：
View Code
Class.Mutators.GetterSetter = function (properties) {
var klass = this; // 缓存this对象，这里指向的是Class本身，如果不缓存会怎样？$%#&^@#......
Array.from(properties).each(function (property) {
var captProp = property.capitalize(), // 把要添加的属性名第一个字母变为大写
$prop = '$' + property; // 为属性名添加'$'标识符，表明这个属性为私有变量
// setter method
klass.implement('set' + captProp, function (value) {
this[$prop] = value;
return this;
});
// getter method
klass.implement('get' + captProp, function (value) {
return this[$prop];
});
});
};
var Person = new Class({
GetterSetter: ['name', 'age', 'occupation']
});
var mark = new Person();
mark.setName('Mark');
mark.setAge(23);
mark.setOccupation('JavaScript Developer');
console.log(mark.getName() + ', ' + mark.getAge() + ': ' + mark.getOccupation());
// 'Mark, 23: JavaScript Developer'
看看设计一个类实现同样的功能，使用GetterSetter Mutator是不是减少很多代码呢。等等，这时有看官可能会说了，我们为什么要对属性进行封装呢，如果只是实现上面的功能直接为Class添加name、age、occupation三个属性，然后直接对它们进行访问不就得了。嗯呐，这个嘛，上面的代码的确体现不出封装的好处。如果我们需要对类的某个私有变量进行一些逻辑控制，比如在setter方法中对值进行校验、属性值改变后我们需要触发一个事件来应对值的改变等功能，这样上面的GetterSetter Mutator就不能胜任了，我们就必须对他进行扩展，还好在MooTools Forge中我找到了这样一个插件Class.Attributes，已经提供了这些功能，这样我们只需要'拿来主义'就可以了，呵呵。这个源代码进行了稍稍的修改：
View Code
Class.Mutators.Attributes = function (attributes) {
var $setter = attributes.$setter,
$getter = attributes.$getter;
delete attributes.$setter;
delete attributes.$getter;
this.implement({
/**
* @property $attributes
* @description storage for instance attributes
*/
$attributes: attributes,
/**
* @method get
* @param name {String} - attribute name
* @description attribute getter
*/
get: function (name) {
var attr = this.$attributes[name];
if (attr) {
// valueFn()对属性的值进行初始化，不需要任何参数
if (attr.valueFn && !attr.initialized) {
attr.initialized = true;
attr.value = attr.valueFn.call(this);
}
// 优先执行属性中定义的getter方法来获取属性的值
if (attr.getter) {
return attr.getter.call(this, attr.value);
} else {
return attr.value;
}
} else {
// 如果get的属性没有定义，则通过$getter方法来取得属性值
// $getter方法通过使用name的值if或switch扩展更多的属性，不过这些属性的readOnly,validator等方法需要自己在$getter中定义
return $getter ? $getter.call(this, name) : undefined;
}
},
/**
* @method set
* @param name {String} - attribute name
* @param value {Object} - attribute value
* @description attribute setter
*/
set: function (name, value) {
var attr = this.$attributes[name];
if (attr) {
// 首先判断是不是只读属性
if (!attr.readOnly) {
// 先缓存旧的属性值
var oldVal = attr.value, newVal;
// 判断属性的校验函数存不存在，如果存在则通过校验函数确认可不可以赋值
if (!attr.validator || attr.validator.call(this, value)) {
// 优先使用属性中定义的setter方法为属性赋值
if (attr.setter) {
newVal = attr.setter.call(this, value);
} else {
newVal = value;
}
attr.value = newVal;
// #region - Extended by 苦苦的苦瓜 -
/**
# 如果新旧属性值一样，则不触发事件
**/
if (oldVal !== value) {
// 触发自定义事件
this.fireEvent(name + 'Change', { newVal: newVal, oldVal: oldVal });
}
// #endregion
}
}
} else if ($setter) {
// 如果属性没有定义
if ($setter) { $setter.call(this, name, value); }
}
},
/**
* @method setAttributes
* @param attributes {Object} - a list of attributes to be set to the instance
* @description set passed attributes passing it through .set method
*/
setAttributes: function (attributes) {
Object.each(attributes, function (value, name) {
this.set(name, value);
}, this);
},
/**
* @method getAttributes
* @description returns a key-value object of all instance attributes
* @returns {Object}
*/
getAttributes: function () {
var attributes = Object.clone(this.$attributes);
return attributes;
},
/**
* @method addAttributes
* @param attributes {Object} - a list of new attributes to be added to the instance
* @description adds list of attributes to the instance
*/
addAttributes: function (attributes) {
Object.each(attributes, function (value, name) {
this.addAttribute(name, value);
}, this);
},
/**
* @method addAttribute
* @param name {String} - new attribute name
* @param value {Object} - new attribute value
* @description adds new attribute to the instance
*/
// 这里的value属性是一个对象，可以包含下面这些属性方法value, valueFn()，getter(), setter(), readOnly, validator()
addAttribute: function (name, value) {
var attr = this.$attributes[name];
// #region - Extended by 苦苦的苦瓜 -
/**
# 如果属性已经存在则不覆盖前属性
**/
if (!attr) {
attr = value;
}
// #endregion
return this;
}
});
};
功能多多，好处多多，呵呵，下面是示例代码：
View Code
var Product = new Class({
Implements: [Options, Events],
Attributes: {
hmkhan: {
valueFn: function () {
return 'my name is HmKhan';
}
},
brand: {
validator: function (val) {
return val.trim().length > 1;
}
},
model: {
validator: function (val) {
return val.trim().length > 1;
}
},
name: {
readOnly: true,
getter: function () {
return this.get('brand') + ' ' + this.get('model');
}
},
price: {
getter: function (val) {
return val * (100 - this.get('discount')) / 100
}
},
discount: {
value: 0 // Default value
}
},
initialize: function (attributes) {
this.setAttributes(attributes);
}
});
var product = new Product({
brand: 'Porsche',
model: '911',
price: 100000,
discount: 5
});
console.log(product.get('name'));
console.log(product.get('price'));
product.addEvent('discountChange', function (event) {
console.log("New discount: {newVal}% instead of {oldVal}%!".substitute(event));
});
product.set('discount', 30); // -> alerts "New discount: 30% instead of 5!"
console.log(product.get('discount'));
product.addAttribute('model', { value: '110' });
console.log(product.get('model'));
console.log(product.get('hmkhan'));
Binds Mutator
MooTools More提供了一个Mutator:Binds，用来绑定类的方法的作用域(至于为什么要绑定方法的作用域还有mootools中bind方法介绍这里略过不说了，你懂的......)。来看下它的源代码，很简单：
View Code
Class.Mutators.Binds = function (binds) {
// 如果传送给新类的构造函数的对象中没有定义initialize方法，则为新类定义一个空的initialize方法。
if (!this.prototype.initialize) {
this.implement('initialize', function () { });
}
// 把定义的Binds键值与类中已定义的Binds(继承自父类)属性值合并为一个数组
return Array.from(binds).concat(this.prototype.Binds || []);
};
// 绝妙的构思，把initialize定义为一个Mutator，这里传递过来的参数就是类构造函数中的initialize(初始化)方法
Class.Mutators.initialize = function (initialize) {
// 返回闭包作为类的initialize方法
return function () {
// 绑定Binds属性中包含的每个方法的作用域，替代原方法
Array.from(this.Binds).each(function (name) {
var original = this[name];
if (original) { this[name] = original.bind(this); }
}, this);
// 执行类设计时构造函数中定义的initialize方法
return initialize.apply(this, arguments);
};
};
为什么要把它拿出来单独说一下呢，大家看看代码，其实它是由两个Mutators组成的：Binds和initialize。Binds Mutator把需要绑定作用域的方法名称保存到类的Binds属性中；initialize Mutator就耐人寻味了，我们定义一个新类时一般需要为它定义一个initialize(初始化)方法，那么他们两个是什么关系呢？还记得前面我们所说的“会检查传送给新类的构造函数的对象的每一个键，在Class.Mutators对象中是不是有mutator函数的对应的名字在里面。如果找到了，它就调用这个函数并且把键的值传给它做处理”，所以这时类构造函数中的initialize方法就作为参数传递给initialize Mutator，initialize Mutator所做的工作就是生成并返回一个闭包，这个闭包执行的操作先是绑定Binds属性中存储的方法的作用域，然后再执行最初定义的initialize方法，MooTools会把这个返回的闭包在赋给initialize成员，实际上就是重写构造函数的对象中定义的initialize方法。先看看下面的示例代码：
View Code
var MyClass = new Class({
Binds: ['say'],
initialize: function (element, message) {
this.el = $(element);
this.message = message;
},
monitor: function () {
this.el.addEvent('click', this.say); //say is already bound to 'this'
},
stopMonitoring: function () {
this.el.removeEvent('click', this.say);
},
say: function () {
alert(this.message);
}
});
var my = new MyClass('btnSay', 'this is a test.');
my.monitor();
Binds Mutator是在MyClass定义时就执行的，作用于定义的MyClass本身，为MyClass的原型添加了一个Binds属性，值为包含'say'的一个数组，initialize Mutator也是在MyClass定义时就执行的，但它这时只是重写了initialize方法，并没有开始执行绑定方法作用域的操作，这些操作需要在initialize方法运行时才会执行的，也就是建立MyClass类的实例my时才执行的，作用的是my对象，也就是说在执行绑定时，say方法绑定的是my对象。
看到这儿，大家应该对Mutators的运行和设计有了一个比较全面的了解了，MooTools Class设计必备利器啊......
下一篇我们介绍一下在MooTools中接口的实现。
苦苦的苦瓜 2011-10-18