ExtJs源码分析与学习—ExtJs核心代码（三）

来源：互联网发布：白人警察枪杀黑人知乎编辑：程序博客网时间：2024/06/06 09:00

Ext为javascript的一些对象进行了扩展，主要有String、Array和Function，以下只介绍Ext.js中提到的方法，其他的后续再介绍

Ext为String扩展了方法 format，该方法为String的静态方法(类方法)，可以把字符串中特殊写法({0},{1})用指定的变量替换

Js代码  
//定义带标记的字符串，并用传入的字符替换标记。每个标记必须是唯一的，而且必须要像{0},{1}...{n}  
 //这样地自增长。  
 //var cls = 'my-class', text = 'Some text';  
 //var s = String.format('{0} '  '{1}', cls, text);  
    //s现在是字符串：s now contains the string: 'my-class'   'Some text'  
  
    format : function(format){  
        var args = Ext.toArray(arguments, 1);  
        return format.replace(/\{(\d+)\}/g, function(m, i){  
            return args[i];  
        });  
    }  

Ext为Array扩展了方法 indexOf 和remove，这两个方法分别实现了索引和根据子元素删除对应的该元素

Js代码  
Ext.applyIf(Array.prototype, {  
    /** 
     * Checks whether or not the specified object exists in the array. 
     * @param {Object} o The object to check for 
     * @param {Number} from (Optional) The index at which to begin the search 
     * @return {Number} The index of o in the array (or -1 if it is not found) 
     */  
    indexOf : function(o, from){  
        var len = this.length;  
        from = from || 0;  
        from += (from < 0) ? len : 0;  
        for (; from < len; ++from){  
            if(this[from] === o){  
                return from;  
            }  
        }  
        return -1;  
    },  
  
    /** 
     * Removes the specified object from the array.  If the object is not found nothing happens. 
     * @param {Object} o The object to remove 
     * @return {Array} this array 
     */  
    remove : function(o){  
        var index = this.indexOf(o);  
        if(index != -1){  
            this.splice(index, 1);  
        }  
        return this;  
    }  
});  

编者在实际开发中经常会用到以下两个方法，也很实用

Js代码  
/** 
  * 数组插入元素 
  * @param {} index 插入位置 
  * @param {} o 插入元素 
  * @return {} 
  */  
 insert : function (index,o){  
  if(index <= 0){  
            return this.unshift(o);//插入到首元素  
        }  
        if(index >= this.length){  
            return this.push(o);//插入到末元素  
        }  
        var sub = this.slice(index, this.length);  
        this.length = index;  
        this.push(o);  
        for(var i = 0; i < sub.length; i++){  
         this.push(sub[i]);  
        }  
        return this;  
 },  
   
 /** 
  * 删除数组中指定的元素 
  * @param {} index 
  * @return {} 
  */  
 removeAt : function(index){  
        if(index != -1){  
            this.splice(index, 1);  
        }  
        return this;  
    }  

以下扩展String方法也很有用

Js代码  
Ext.applyIf(String,{  
   
 /** 
  * 把驼峰格式的字符串转换为-格式 
  * alert(<span style="font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; line-height: 18px; white-space: normal;">humpToConnector</span>('aaaBbbCcc','-')); //return aaa-bbb-ccc 
  * @param {} str 
  * @param {} conj 
  * @return {} 
  */  
    humpToConnector : function(str, conj){  
  //str = !str ? str : String(str);  
  var index = str.search(/[A-Z]/);  
  if (index >= 0) {  
   var c = str.charAt(index);  
   return String.humpToConnector(str.substring(0, index) + conj  
       + c.toLowerCase() + str.substring(index + 1), conj);  
  } else {  
   return str;  
  }  
 }  
});  

Ext对Function的扩展

createInterceptor方法

Js代码  
createInterceptor : function(fcn, scope){  
        var method = this;  
        return !Ext.isFunction(fcn) ?  
                this :  
                function() {  
                    var me = this,  
                        args = arguments;  
                    fcn.target = me;  
                    fcn.method = method;  
                    return (fcn.apply(scope || me || window, args) !== false) ?  
                            method.apply(me || window, args) :  
                            null;  
                };  
    },  

该方法实现了类似拦截器的功能，传递的参数fcn在原函数之前调用。如果fcn的返回值为false，则原函数不会被调用。即函数fcn拦截时，如果fcn返回false，将被拦截，true则执行。以下说明方法中的部分语句。

var method = this，因为是给Function.prototype扩展，因此其prototype上挂的所有的函数，函数内的this都是Function，即函数自身。看下面例子

Js代码  
Function.prototype.test = function(){  
    alert(this);  
};  
function fn(){return 'test';}  
fn.test();  

结果输出

function fn() {

return "test";

}

即this就是fn函数本身

!Ext.isFunction(fcn)，这个条件表明如果所传参数fcn不是一个function，那么将直接返回this，this即函数自身。或者说这时没有进行任何拦截，原样返回了该函数自身。

当fcn为一个function时，将执行 “：”后的分支，此时给fcn添加了两个属性target，method。target是me，me是this。

此时的this是什么呢？多数情况下是window，但整个function如果作为对象属性存在时，this则是该对象。谁调用了createInterceptor，method就是谁。如：

Js代码  
function oldFn(){  
    alert('test');  
}  
function ret(){  
    return false;  
}  
var newFn = oldFn.createInterceptor(ret);  
newFn();  

oldFn继承了createInterceptor方法，且调用了它，参数是ret。这时createInterceptor内部的method, fcn.method就是oldFn；me，fcn.target则为window对象。改成如下，me，fcn.target则为obj了

Js代码  
function oldFn(){  
    alert('test');  
}  
function ret(){  
    return false;  
}  
var obj = {name:'jack'};  
obj.method = oldFn.createInterceptor(ret);  
obj.method();  

(fcn.apply(scope || me || window, args) !== false)，所传参数fcn被执行，执行上下文优先是scope，其次是me，最后是window。返回结果不等于false才执行method。method执行上下文先为me，me不存在则是window。

现把官方例子贴出来

Js代码  
var sayHi = function(name){  
    alert('Hi, ' + name);  
}  
  
sayHi('Fred'); // alerts "Hi, Fred"  
  
// create a new function that validates input without  
// directly modifying the original function:  
var sayHiToFriend = sayHi.createInterceptor(function(name){  
    return name == 'Brian';  
});  
  
sayHiToFriend('Fred');  // no alert  
sayHiToFriend('Brian'); // alerts "Hi, Brian"  

该例子在createInterceptor中 fcn.apply(scope || me || window, args) 相当于直接执行

function(name){

return name == 'Brian';

}

只是将函数绑定到另外一个对象上（scope || me || window）去运行

method 实际为sayHi

createCallback方法

Js代码  
//创建一个回调函数，该回调传递参数的形式为：arguments[0],...  
    createCallback : function(/*args...*/){  
        // make args available, in function below  
        var args = arguments,  
            method = this;  
        return function() {  
            return method.apply(window, args);  
        };  
    },  

这个方法非常有用，实现简单。返回一个新函数，新函数内执行method，会把外面的参数给传进来。
初学者经常纠结于给事件handler传参数。createCallback 解决了给DOM事件handler(监听器)传参问题。
createCallback 不仅用在DOM事件handler上你完全可以自定义事件，设计一套属于自己的观察者模式 API。即每个类有自己的事件，如 LTMaps ，除了拥有属性，方法还有许多事件，如移动地图(move)，缩放地图(zoom)。Ext的众多UI组件也都是这种模式，Ext.Panel 具有afterlayout，close等事件。

在给这些事件添加hanlder，又想传参或许也会用到 createCallback。

createDelegate 方法

Js代码  
//创建一个委派对象（就是回调），该对象的作用域指向obj。对于任何函数来说都是可以直接调用的。  
    //obj : Object （可选的） 自定义的作用域对象。(optional) The object for which the scope is set   
    //args : Array （可选的） 覆盖该次调用的参数列表。（默认为该函数的arguments）。(optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)   
    //appendArgs : Boolean/Number（可选的） 如果该参数为true，将args加载到该函数的后面，如果该参数为数字类型，则args将插入到所指定的位置。  
    //顺便说一下Array.prototype.slice(start,end)的用法，返回选定的所有元素的数组，start,end可选参数，默认为返回所有元素  
    createDelegate : function(obj, args, appendArgs){  
        var method = this;  
        return function() {  
            var callArgs = args || arguments;  
            if (appendArgs === true){  
                callArgs = Array.prototype.slice.call(arguments, 0);  
                callArgs = callArgs.concat(args);  
            }else if (Ext.isNumber(appendArgs)){  
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first  
                var applyArgs = [appendArgs, 0].concat(args); // create method call params  
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in  
            }  
            return method.apply(obj || window, callArgs);  
        };  
    },  

createDelegate 比 createCallback 更强大，除了能解决回调函数传参问题。还能控制：
1，自定义参数是否覆盖默认参数(如 DOM事件对象作为handler第一个参数)
2，自定义参数的位置

内部实现：取自身(var method=this)，返回一个新function，该function调用自身(method.apply)，同时指定上下文(obj||window)及参数(callArgs)。就这么简单，细节之处在于对参数的控制。

1，只传obj和args时将覆盖回调函数默认参数(DOM事件对象)

Js代码  
<a href="#" id="aa">SINA</a>  
<script type="text/javascript">  
    var aa = document.getElementById('aa');  
    function sayName(name){  
        alert('hello, ' + name);  
    }  
    var sayName2 = sayName.createDelegate(aa,['jack']);  
    aa.onclick = sayName2;  
</script>  

2，三个参数都传，appendArgs为true时，默认参数(DOM事件对象)位置不变(第一个)，自定义参数args在最后

Js代码  
<a href="#" id="aa">SINA</a>  
<script type="text/javascript">  
    var aa = document.getElementById('aa');  
    function sayName(){       
        alert('实际参数长度：' + arguments.length);  
        alert('hello, ' + arguments[0]);  
        alert('hi, ' + arguments[1]);  
    }  
    var sayName2 = sayName.createDelegate(aa,['jack'],true);  
    aa.onclick = sayName2;  
</script>  

3，三个参数都传，appendArgs为数字时将指定自定义参数的位置

Js代码  
<a href="#" id="aa">SINA</a>  
<script type="text/javascript">  
    var aa = document.getElementById('aa');  
    function sayName(name){       
        alert('实际参数长度：' + arguments.length);  
        alert('hello, ' + arguments[0]);  
        alert('hi, '+ arguments[1]);  
        alert('hi, '+ arguments[2]);  
    }  
    var sayName2 = sayName.createDelegate(aa,['jack','lily'],0);  
    aa.onclick = sayName2;  
</script>  

defer 方法

Js代码  
/** 
     * 延迟调用该函数 
     * @param {} millis 延迟时间，以毫秒为单位（如果是0则立即执行） 
     * @param {} obj （可选的） fcn的作用域（默认指向原函数或window） 
     * @param {} args （可选的） 覆盖原函数的参数列表（默认为该函数的arguments） 
     * @param {} appendArgs （可选的）如果该参数为true，将args加载到该函数的后面，如果该参数为数字类型，则args将插入到所指定的位置 
     * @return {Number} 
     */  
    defer : function(millis, obj, args, appendArgs){  
        var fn = this.createDelegate(obj, args, appendArgs);  
        if(millis > 0){  
            return setTimeout(fn, millis);  
        }  
        fn();  
        return 0;  
    }  