当前位置: 代码迷 >> Web前端 >> 读Ext之三(原形扩展)
  详细解决方案

读Ext之三(原形扩展)

热度:98   发布时间:2012-11-07 09:56:10.0
读Ext之三(原型扩展)

续上篇,

Ext.ns = Ext.namespace;

?

有了一个简写的namespace。整个匿名函数执行完了。接下来

Ext.ns("Ext.util", "Ext.lib", "Ext.data");
Ext.elCache = {};

?

分别为Ext添加了util,lib,data,elCache属性,默认都是空的对象。

Ext.apply(Function.prototype, {
	createInterceptor : function(){
		// ...
	},
	createCallback : function(){
		// ...
	},
	createDelegate : function(){
		// ...
	},
	defer : function(){
		// ...
	}
});
?

Ext.apply在第一篇已经讲到,这里用来扩展Function,为其增加了四个方法createInterceptor、createCallback、createDelegate、defer。
众多流行的JS库都不同程度的“污染”了原生JS,最典型的如Prototype ,Mootools 。JQuery则完全例外,一个匿名函数执行后便诞生了集所有API为一身的强大 $ .
虽然如此,JQuery的事件对象则不是DOM中事件对象,它完全重写了一个兼容IE,DOM3的事件对象。这里的污染加了双引号,不赞同的就理解成扩展吧。

?

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

Interceptor顾名思义,拦截器。它却不是Strust2中的拦截器,但还是有部分相似之处。这里是利用所传函数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.prototype添加了一个test方法,定义函数fn,fn会自动继承test方法,fn.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。

整个createInterceptor方法就看完了,下面是一个具体例子:

function sayName(name){
	alert('hello, ' + name);
}
function rule(name){
	return name == 'snandy';
}
var sayName2 = sayName.createInterceptor(rule);
sayName2('zhangsan'); // -> no alert
sayName2('snandy');   // -> "hello, snandy"

?

createCallback 方法

createCallback : function(/*args...*/){
    // make args available, in function below
    var args = arguments,
        method = this;
    return function() {
        return method.apply(window, args);
    };
},

?

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

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

再看createDelegate方法,创建一个代理函数

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>

?

此外,method的执行上下文应该增加this,这样实用一些了。

return method.apply(obj || this || window, callArgs);

?

接着看defer,指定函数在多少毫秒后执行

defer : function(millis, obj, args, appendArgs){
    var fn = this.createDelegate(obj, args, appendArgs);
    if(millis > 0){
        return setTimeout(fn, millis);
    }
    fn();
    return 0;
}

?

内部实用了刚刚提到的createDelegate方法,指定函数的执行上下文及参数设定。如果millis是正数则延迟执行返回setTimeout的返回值(一个数字),有必要可用clearTimeout终止。否则立即执行,返回0。

?

好了,以上是对Function.prototype的扩展。接下来是对String,Array的扩展。使用Ext.applyIf,第一篇 已提到Ext.applyIf不会覆盖已有的方法。

Ext.applyIf(String, {
    format : function(format){
        var args = Ext.toArray(arguments, 1);
        return format.replace(/\{(\d+)\}/g, function(m, i){
            return args[i];
        });
    }
});

?

给String添加静态方法(类方法)format,可以把字符串中特殊写法({0},{1})用指定的变量替换。如

var href = 'http://www.sina.com.cn', text = '新浪';
var s = String.format('<a href="{0}">{1}</a>', href, text);
alert(s); // --> <a href="http://www.sina.com.cn">新浪</a>

?

有点类似于JSP的EL表达式。

?

对Array扩展,

Ext.applyIf(Array.prototype, {
    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;
    },
    remove : function(o){
        var index = this.indexOf(o);
        if(index != -1){
            this.splice(index, 1);
        }
        return this;
    }
});

?

indexOf 再熟悉不过了吧,String早有了。用来查找元素是否在数组中,如果有则返回该元素在数组中的索引,否则返回-1。该方法在 ECMAScript 5 中已经引入,各浏览器的新版本都实现了。

reomve 删除指定元素,如果存在该元素则删除,返回数组自身。

?

好了,以上3篇是整个Ext-core的Ext.js。

?

?

?

1 楼 pfans 2010-10-09  
写的不错,楼主研读源码的精神值得学习。
2 楼 atian25 2010-10-09  
createDelegate是居家旅行必备良药
3 楼 zzhonghe 2010-10-12  
确实,Ext除了文档中提到的组件,还有很多很实在的工具藏在源代码里面。

我就特别喜欢用Ext对于时间处理的扩展方法。
  相关解决方案