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

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

 

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

 

//定义带标记的字符串，并用传入的字符替换标记。每个标记必须是唯一的，而且必须要像{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，这两个方法分别实现了索引和根据子元素删除对应的该元素

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;
    }
});

 

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

 

/**
  * 数组插入元素
  * @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方法也很有用

Ext.applyIf(String,{
 
 /**
  * 把驼峰格式的字符串转换为-格式
  * alert(humpToConnector('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方法

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，即函数自身。看下面例子

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就是谁。如：

 

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了

 

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。

 

现把官方例子贴出来

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方法

 

//创建一个回调函数，该回调传递参数的形式为：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 方法

 

//创建一个委派对象（就是回调），该对象的作用域指向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事件对象)

<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在最后

<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为数字时将指定自定义参数的位置

<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 方法

 

/**
     * 延迟调用该函数
     * @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;
    }