Mootools类定义增强因子
最近研习《Pro Javascript with Mootools》，跟jQuery比起来，Mootools的资料算是少之又少的（Mootools在用户推广和社区建设方面有必要向jQuery学习下）。这本书比较全面的对Mootools-core中各个关键模块做了说明和分析，每章都由原生javascript逐渐引入，总之是本不错的书，虽然现在jQuery在业界大红大紫， 但个人也希望mootools能得到不错的发展。
回到正题，Mootools跟jQuery一个比较显著的差异就是在代码组织方式上，Mootools引入了OOP思想，实现了功能强大的Class类。
Mootools默认内置了两个Class的增强因子，一个是Extends，另外一个是Implements.
有一定Mootools使用经验的园友应该很熟悉这两个扩展，内部都用于实现javascript的prototype链继承（但是不仅仅如此）。
不同的是Extends模拟OOP中子类继承父类的操作，Implements的话可以理解成继承方法（和Java或者C#中实现接口有些不同，接口只是函数声明，没有定义）。
下面个例子：
var Human = new Class({
// 初始化方法
initialize: function(name, gender) {
this.name = name;
this.gender = gender;
},
toString: function() {
return 'name:' + this.name + ',' + 'gender:' + this.gender;
}
});
var Behavior = new Class({
eat: function() {
console.log(this.name + ' wanna grab something to eat');
},
sleep: function() {
console.log(this.name + ' wanna sleep');
},
haveFun: function() {
console.log(this.name + ' wanna have some fun');
}
});
var Developer = new Class({
Extends: Human,
Implements: Behavior,
initialize: function(name, gender, lang) {
this.parent(name, gender); //调用父类中对应的方法
this.lang = 'javascript';
},
toString: function() {
return this.parent() + ',language:' + this.lang;
}
});
var Andrew = new Developer('Andrew', 'male', 'javascript');
console.log(Andrew.toString()); // name:Andrew,gender:male,language:javascript
Andrew.eat(); // Andrew wanna grab something to eat
Andrew.sleep(); // Andrew wanna sleep
Andrew.haveFun(); // Andrew wanna have some fun
从这个例子出应该不难看出Extends和Implements所起到的作用，如果你像我一样对其中的实现细节很感兴趣，可以研究下Mootools中的Class模块，一开始去看源码确实有点困难，硬着头皮多看几遍就慢慢有点思路了。这里有篇园友的随笔，他对Class模块做了一些注释，足够了解其运行机制。点击浏览此文，感谢苦苦的苦瓜。
除了基本的Extends和Implements，我们还可以实现自定义的增强因子，从源码中我们可以看出，Class模块的增强因子通过Class.Mutators进行扩展。下面给出源码，我们可以有个参照。
Class.Mutators = {
Extends: function(parent){
this.parent = parent;
this.prototype = getInstance(parent);
},
Implements: function(items){
Array.from(items).each(function(item){
var instance = new item;
for (var key in instance) implement.call(this, key, instance[key], true);
}, this);
}
};
一下子看不大明白很正常，如果要分析源码，篇幅会很长，这里其实只要搞清一些注意点就行. 结合之前的Developer例子看，Class.Mutators.Extends执行时，其中this指的就是构造类Developer（记得吗，我们通过new Developer来产生一个实例），其中parent就是继承的Human构造类，getInstance(parent)返回Human的实例，这里很明显就是基于prototype的继承实现（但不仅如此，就这块代码而言是这样）。再简单的看下Class.Mutators.Implements，运行时通过其中的implement方法给Developer的prototype扩展方法或属性。
现在来个自定义的例子，我们自己动手干, 来实现一个自动实现属性getter，setter方法:
// mootools Mutator GetterSetter
Class.Mutators.GetterSetter = function(props) {
var klass = this;
Array.from(props).each(function(prop) {
var capProp = prop.capitalize();
klass.implement('set' + capProp, function(value) {
this[prop] = value;
return this;
});
klass.implement('get' + capProp, function(value) {
return this[prop];
});
});
};
如果我们把GetterSetter用于Developer构造类的定义，那么Class.Mutators.GetterSetter执行时，this指的就是Developer。我们看一下each里面的回调，通过闭包klass维持着对Developer的引用，通过implement方法在其prototype上扩展属性的setter，getter方法。这样Developer的实例就自动拥有了类似Java类中的setter，getter。通过扩展Class.Mutators，我们优雅的实现了这个功能。来验证一下:
var Developer = new Class({
Extends: Human,
Implements: Behavior,
GetterSetter: ['name', 'gender', 'lang'],
initialize: function(name, gender, lang) {
this.parent(name, gender);
this.lang = 'javascript';
},
toString: function() {
return this.parent() + ',language:' + this.lang;
}
});
var Andrew = new Developer('Andrew', 'male', 'javascript');
console.log(Andrew.getName()); // Andrew
console.log(Andrew.getGender()); // male
console.log(Andrew.getLang()); // javascript
个人觉得很强大，再来一个实现模拟静态属性(static)的例子:
Class.Mutators.Static = function(props) {
this.extend(props);
};
看起来再简单不过了，不是么?我们再来验证一下:
var Developer = new Class({
Static: {
count: 0,
addCount: function() {
Developer.count++;
}
},
Extends: Human,
Implements: Behavior,
initialize: function(name, gender, lang) {
this.parent(name, gender);
this.lang = 'javascript';
Developer.addCount();
},
toString: function() {
return this.parent() + ',language:' + this.lang;
}
});
var Andrew = new Developer('Andrew', 'male', 'javascript');
var Rocky = new Developer('Rocky', 'male', 'php');
console.log(Developer.count); // 2
我们通过count给实例化的对象计数，或许你会觉得count和addCount就这么暴露给外部是个问题，我们可以用匿名函数来模拟实现private:
var Developer = (function() {
// private variable or function
var count = 0,
addCount = function() {
count++;
};
return new Class({
Static: {
getCount: function() {
return count;
}
},
Extends: Human,
Implements: Behavior,
initialize: function(name, gender, lang) {
this.parent(name, gender);
this.lang = 'javascript';
addCount();
},
toString: function() {
return this.parent() + ',language:' + this.lang;
}
});
})();
var Andrew = new Developer('Andrew', 'male', 'javascript');
var Rocky = new Developer('Rocky', 'male', 'php');
console.log(Developer.count); // undefined
console.log(Developer.addCount()); // undefined
console.log(Developer.getCount()); // 2
注意到，我们利用匿名函数和闭包特性模拟实现了count和addCount的private，对比之前外部可以通过Developer.count或者Developer.addCount直接改变计数显得安全的多了。
最后就jQuery和Mootools，我想再稍微吐糟一下。
jQuery为何如此流行:它起点低，入门简单，不怎么懂javascript的程序员或者设计师，都可以简单上手，而且它的文档做的很不错，用户推广做的好，社区活跃，不可否认jQuery形势一片大好，在结合BackBone等MVC framework的辅助，真是不错。
Mootools虽然几乎和jQuery同时出现，但是其社区规模和受欢迎程度确实没有jQuery高，从github上watch和fork人数就可见一斑。一方面Mootools的上手确实不太适合javascript初学者，另一方面对于很多程序员来讲，貌似并不需要Mootools的对OOP的实现，而jQuery对于DOM操作和特效的实现更为简单...所以，Mootools现在的情况有点小尴尬，不过它依然是一个很好的framework。希望也能很好的发展。
