百度前端js库分析

百度前端js库tangram已经开源一年多了。自己也一直在使用这个工具库，这个工具库使用起来是很方便的

 百度对性能要求是很好的。它对常见的操作都做些了封装和拆分，比如数组，ajax提交，dom操作，方法的操作，事件等的操作，每个函数都是静态的方法，对其他的方法没有依赖关系，可以很方便的对其中的某些功能抽取出来单独使用，同时提供了方法定义和自动抽取的工具，这个都是可以实现的。我觉得对方法的操作，语言层面的封装，事件的封装，dom的操作都挺好的，下面来着重来分析下这些方法的实现方式。

 

1）对方法的封装。提供baidu.fn这个对象

（1）定义了抽象方法abstractMethod 

 baidu.fn.abstractMethod = function() {

    throw Error('unimplemented abstract method');

};

（2）为对象绑定方法和作用域baidu.fn.bind，利用这个方法可以很容易的将某个方法和作用域绑定在对象上。

baidu.fn.bind = function(func, scope) {

    var xargs = arguments.length > 2 ? [].slice.call(arguments, 2) : null;

    return function () {

        var fn = baidu.lang.isString(func) ? scope[func] : func,

            args = (xargs) ? xargs.concat([].slice.call(arguments, 0)) : arguments;

        return fn.apply(scope || fn, args);

    };

}; 

（3）定义了一个空函数blank，主要用于作用域链被污染的情况。

（4） 将一个静态方法变成一个对象的方法，使他成为这个对象的方法，使其第一个参数了this或者this[attr]

baidu.fn.methodize = function (func, attr) {

    return function(){

        return func.apply(this, [(attr ? this[attr] : this)].concat([].slice.call(arguments)));

    }; 

};

（5）函数集化的方法 multize

 baidu.fn.multize = /**@function*/function (func, recursive, joinArray) {

    var newFunc = function(){

        var list = arguments[0],

            fn = recursive ? newFunc : func,

            ret = [],

            moreArgs = [].slice.call(arguments,0),

            i = 0,

            len,

            r;

        if(list instanceof Array){

            for(len = list.length; i < len; i++){

                moreArgs[0]=list[i];

                r = fn.apply(this, moreArgs);

                if (joinArray) {

                    if (r) {

                        //TODO: 需要去重吗？

                        ret = ret.concat(r);

                    }

                } else {

                    ret.push(r);

                }

            }

            return ret;

        }else{

            return func.apply(this, arguments);

        }

    }

    return newFunc;

}; 

 

 

未完待续，明天继续。