zoukankan      html  css  js  c++  java
  • 百度前端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;
    }; 

    未完待续,明天继续。

  • 相关阅读:
    C++基础学习1: C++布尔类型
    Hadoop-Yarn-框架原理及运作机制
    mapreduce shuffle 和sort 详解
    线程生命周期
    JVM 内存模型及垃圾回收
    利用Hive分析nginx日志
    mysql 30大优化策略
    hive 分组排序,topN
    Java核心卷笔记(一)
    Java 核心卷学习笔记(一)
  • 原文地址:https://www.cnblogs.com/yupeng/p/2381194.html
Copyright © 2011-2022 走看看