mootools 源码分析之 Core.js

本早就想写一篇这样的博客，也许是mootools的一个系列吧，不过估计最近不会有充足的时间，所以说系列就太挖坑了。感兴趣的同学可以继续，我觉得从mootools的源码出发，可以写出一本不错的Javascript的中级的教材，如果我有时间我会就会发出系列的口号的。
这次我分析的是mootools的核心，Core.js。我看的版本是1.2.4dev，是从github上clone下来的。git clone git://github.com/mootools/mootools-core.git。Core.js最核心的就是Native函数了，然后还有一些常用的工具，以及对于Object和Array的简单实用扩展，其中Object的扩展类名为Hash。我把分析都详细的写到了代码里，所以大家可以耐心的好好读一下，我相信一定有不少收获。

[javascript]
var MooTools = {
'version': '1.2.4dev',
'build': '%build%'
};
// Native是mootools的绝对核心，所有的类的构造都会由Native函数完成
var Native = function(options){
// 如果没有任何配置，就是一个初始的空的对象
options = options || {};
// 从配置指定类名
var name = options.name;
// 用于对内置对象包装时，保留的原内置对象
var legacy = options.legacy;
// 是否防止原对象的prototype中的方法被覆盖
var protect = options.protect;
// 类需要添加的属性或方法，如果generics不是false就在prototype里添加，同时静态化
// 这里methods表明作者希望options.implement传入的都是方法
var methods = options.implement;
// 是否把对象的所有属性和方法静态化，如果不想静态化，只能设置为false值本身
var generics = options.generics;
// 初始化方法
var initialize = options.initialize;
// 用于add方法的后续操作
var afterImplement = options.afterImplement || function(){};
// 如果没有提供initialize方法就使用内置对象作为原型
var object = initialize || legacy;
// 只用generics恒等为false时取false，其它情况都作true处理
generics = generics !== false;
// 设置类的构造器
object.constructor = Native;
// 统一类对象的静态属性$family对象的name值为native，$type函数不会使用这个值
object.$family = {name: 'native'};
// 继承legacy的原型
if (legacy && initialize) object.prototype = legacy.prototype;
object.prototype.constructor = object;
if (name){
// 类型名统一为小写
var family = name.toLowerCase();
// 写入原型链，这样修改原型就可以让所有实例的$family变化，这在调整父类名称时很有用
// 这个原型链的$family是$type函数真正要用到的
object.prototype.$family = {name: family};
// 使object.type(someObject)能判断object与someObject是否为同一类型
Native.typize(object, family);
}
// 为对象添加属性或方法的函数（在prototype，以及根据generics同时为object添加成静态属性或方法 ）
// 参数名method，表明作者希望add的都是方法
var add = function(obj, name, method, force){
// 仅当不受保护或者强制覆盖或者对象prototype中不存在该属性或方法时添加
if (!protect || force || !obj.prototype[name]) obj.prototype[name] = method;
// 静态化
if (generics) Native.genericize(obj, name, protect);
// 添加方法后的操作
afterImplement.call(obj, name, method);
return obj;
};
// 给类对象中的属性或方法取别名
object.alias = function(a1, a2, a3){
// 如果为object.alias('forEach', 'each')
if (typeof a1 == 'string'){
var pa1 = this.prototype[a1];
// 如果pa1有值，也就是a1是prototype中的一个属性或者方法
if ((a1 = pa1)) return add(this, a2, a1, a3);
}
// 如果a1是一个集合，那就批处理
// 如：object.alias({func1: 'functionOne', func2: 'functionTwo'})
for (var a in a1) this.alias(a, a1[a], a2);
// 支持链式操作
return this;
};
// 对类对象进行扩展（增加属性和方法）
object.implement = function(a1, a2, a3){
if (typeof a1 == 'string') return add(this, a1, a2, a3);
for (var p in a1) add(this, p, a1[p], a2);
// 支持链式操作
return this;
};
// 添加配置中指定的扩展实现（增加属性和方法）
if (methods) object.implement(methods);
// 返回类对象
return object;
};
// 静态化类对象的属性或方法
// check为true则不会覆盖已有的静态同名属性或方法
Native.genericize = function(object, property, check){
if ((!check || !object[property]) && typeof object.prototype[property] == 'function') object[property] = function(){
var args = Array.prototype.slice.call(arguments);
// 参数列表的第一个参数做为原实例方法的this引用传入
return object.prototype[property].apply(args.shift(), args);
};
};
// 同时对多个对象进行扩展（增加属性和方法）
Native.implement = function(objects, properties){
for (var i = 0, l = objects.length; i < l; i++) objects[i].implement(properties);
};
// 让类实例增加type类型判断方法，利用$type判断是否为同一类或者继承自同一父类
Native.typize = function(object, family){
if (!object.type) object.type = function(item){
return ($type(item) === family);
};
};
(function(){
// 让Javascript的核心内置对象Native化，即加入一些方便以后扩展的属性和方法，已存在的不会被 覆盖
var natives = {'Array': Array, 'Date': Date, 'Function': Function, 'Number': Number, 'RegExp': RegExp, 'String': String};
for (var n in natives) new Native({name: n, initialize: natives
, protect: true});
// 让Boolean、Native和Object对象实例具有type方法，可以做类型判断
var types = {'boolean': Boolean, 'native': Native, 'object': Object};
for (var t in types) Native.typize(types[t], t);
// 将Array和String的实例方法静态化到Array和String本身
var generics = {
'Array': ["concat", "indexOf", "join", "lastIndexOf", "pop", "push", "reverse", "shift", "slice", "sort", "splice", "toString", "unshift", "valueOf"],
'String': ["charAt", "charCodeAt", "concat", "indexOf", "lastIndexOf", "match", "replace", "search", "slice", "split", "substr", "substring", "toLowerCase", "toUpperCase", "valueOf"]
};
for (var g in generics){
for (var i = generics[g].length; i--;) Native.genericize(natives[g], generics[g][i], true);
}
})();
var Hash = new Native({
// 指定类名，用于$type方法的类型判断
name: 'Hash',
initialize: function(object){
// 如果object是Hash对象，则复制一个干净的副本，
// 先使用getClean方法得到object对象本身的属性和方法（不包括其prototype的），
// 再使用$unlink方法解除属性中值为对象的引用
if ($type(object) == 'hash') object = $unlink(object.getClean());
// 开始复制
for (var key in object) this[key] = object[key];
return this;
}
});
Hash.implement({
// 遍历Hash实例的属性和方法，执行fn函数，第一参数是属性或者方法的值，第二个参数是key名称
forEach: function(fn, bind){
for (var key in this){
if (this.hasOwnProperty(key)) fn.call(bind, this[key], key, this);
}
},
// 得到一个干净的拷贝，不会拷贝继承的属性或方法
getClean: function(){
var clean = {};
for (var key in this){
if (this.hasOwnProperty(key)) clean[key] = this[key];
}
return clean;
},
// 得到Hash实例的属性和方法的总数量，不包括继承的属性和方法
getLength: function(){
var length = 0;
for (var key in this){
if (this.hasOwnProperty(key)) length++;
}
return length;
}
});
// 取Hash类的forEach方法别名为each
Hash.alias('forEach', 'each');
Array.implement({
// 遍历Array实例，执行fn函数，第一参数是值，第二个参数是数组下标
forEach: function(fn, bind){
for (var i = 0, l = this.length; i < l; i++) fn.call(bind, this[i], i, this);
}
});
// 取Array类的forEach方法别名为each
Array.alias('forEach', 'each');
// 把传入的迭代对象转换为数组Array
function $A(iterable){
// 如果是DOM集合
if (iterable.item){
var l = iterable.length, array = new Array(l);
while (l--) array[l] = iterable[l];
return array;
}
return Array.prototype.slice.call(iterable);
};
// 返回一个函数，这个函数返回它接受的参数列表的第i项
function $arguments(i){
return function(){
return arguments[i];
};
};
// 检查对象的属性或方法是否已定义或者变量是否已赋值或者是否为0
function $chk(obj){
return !!(obj || obj === 0);
};
// 通用计时器清除方法，如果timer不存在也不会报错
function $clear(timer){
clearTimeout(timer);
clearInterval(timer);
return null;
};
// 检查对象的属性是否已定义或者变量是否已赋值
// 即对象不是undefined
function $defined(obj){
return (obj != undefined);
};
// 迭代对象，对里面的所有属性或在方法执行fn(value, key)
function $each(iterable, fn, bind){
// 获取迭代对象的类型名称
var type = $type(iterable);
// 如果为arguments、collection或者array中的一种，则执行Array的each方法，
// 其它情况则执行Hash的each方法
((type == 'arguments' || type == 'collection' || type == 'array') ? Array : Hash).each(iterable, fn, bind);
};
// 空函数
function $empty(){};
// 通过浅拷贝实现original的扩展，注意不会解除引用
function $extend(original, extended){
for (var key in (extended || {})) original[key] = extended[key];
return original;
};
// 实例化Hash对象的快捷方式
function $H(object){
return new Hash(object);
};
// 如果传入一个函数，就返还这个函数，如果传入的是一个其它值，则生成一个返回这个值的函数
function $lambda(value){
return ($type(value) == 'function') ? value : function(){
return value;
};
};
// 递归合并参数列表中的所有对象，后出现的属性或者方法会覆盖前面出现的，
// 为深拷贝，会利用$unlink解除引用
function $merge(){
// 转换arguments为真的Array对象，从而可以使用unshift等Array的方法
var args = Array.slice(arguments);
// 在数组最前面插入一个空对象
args.unshift({});
return $mixin.apply(null, args);
};
// 递归合并所有参数列表中的对象的属性和方法，后面的会覆盖前面的
// 这里的mix就是上面插入的{}空的对象，也是参数列表的第一个参数
function $mixin(mix){
for (var i = 1, l = arguments.length; i < l; i++){
var object = arguments[i];
// 只对object对象才处理，$merge的参数必须要对象才会启作用
if ($type(object) != 'object') continue;
for (var key in object){
var op = object[key], mp = mix[key];
mix[key] = (mp && $type(op) == 'object' && $type(mp) == 'object') ? $mixin(mp, op) : $unlink(op);
}
}
return mix;
};
// 获取传入参数列表中从左至右第一个定义赋值过的对象属性或方法，
// 或者第一个赋值过的变量的值
// 即第一个不为undefined的值
function $pick(){
for (var i = 0, l = arguments.length; i < l; i++){
if (arguments[i] != undefined) return arguments[i];
}
return null;
};
// 在min和max之间取一个伪随机数
function $random(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
// 把传入的对象转换为一个数组包裹，如果本身就是数组则直接返回该数组，undefined的则返回空数组
function $splat(obj){
var type = $type(obj);
return (type) ? ((type != 'array' && type != 'arguments') ? [obj] : obj) : [];
};
// 返回当前的时间戳，相当于new Date().getTime()
var $time = Date.now || function(){
// 如果没有Date.now函数，则直接获取new Date对象的valueOf值，这里的+号就起了这个转换作用
return +new Date;
};
// 在简单的try-catch中依次执行参数列表中的所有函数调用
function $try(){
for (var i = 0, l = arguments.length; i < l; i++){
try {
return arguments[i]();
} catch(e){}
}
return null;
};
// 判断实例对象是什么类型
function $type(obj){
if (obj == undefined) return false;
// NaN或正无穷或负无穷也会返回false
if (obj.$family) return (obj.$family.name == 'number' && !isFinite(obj)) ? false : obj.$family.name;
// 如果是DOM单个节点
if (obj.nodeName){
switch (obj.nodeType){
//Element元素
case 1: return 'element';
//文本节点
case 3: return (//S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
}
} else if (typeof obj.length == 'number'){
if (obj.callee) return 'arguments';
// DOM集合（HTMLElements collection）
else if (obj.item) return 'collection';
}
return typeof obj;
};
// 解除对象的引用，使其独立，返回的对象被修改而不会影响原来的对象
function $unlink(object){
var unlinked;
switch ($type(object)){
case 'object':
unlinked = {};
for (var p in object) unlinked[p] = $unlink(object[p]);
break;
case 'hash':
// Hash里本身又会调用$unlink
unlinked = new Hash(object);
break;
case 'array':
unlinked = [];
for (var i = 0, l = object.length; i < l; i++) unlinked[i] = $unlink(object[i]);
break;
default: return object;
}
return unlinked;
};
[/javascript]
从我的角度出发，我觉得核心应该写得更加精简，当然这个度是需要数据去说话的，mootools目前这个Core我觉得Hash和Array的扩展是没有必要放到Core.js里的，这样相关的$H也可以去掉，还觉得$chk和$defined写得有点部份重复，浪费代码空间。微核心的好处是能让上面的扩展能更加灵活，从服务于产品的角度就是可以更小，因为可以按需build更小的js，昂贵的流量也就节约了，用户的等待也会减少。同时如果framework服务的业务异常复杂，也可以更灵活的产生少数合理的分枝。这就可以解决framework维护成本和本生性能的矛盾。