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 alertsayHiToFriend('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; }??
?
?
