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

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