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。我把分析都详细的写到了代码里，所以大家可以耐心的好好读一下，我相信一定有不少收获。

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[n], 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;

};

从我的角度出发，我觉得核心应该写得更加精简，当然这个度是需要数据去说话的，mootools目前这个Core我觉得Hash和Array的扩展是没有必要放到Core.js里的，这样相关的$H也可以去掉，还觉得$chk和$defined写得有点部份重复，浪费代码空间。微核心的好处是能让上面的扩展能更加灵活，从服务于产品的角度就是可以更小，因为可以按需build更小的js，昂贵的流量也就节约了，用户的等待也会减少。同时如果framework服务的业务异常复杂，也可以更灵活的产生少数合理的分枝。这就可以解决framework维护成本和本生性能的矛盾。

转自：http://blog.csdn.net/siren0203/archive/2010/12/29/6105084.aspx