原创作者: damoqiongqiu   阅读:3395次   评论:1条   更新时间:2011-05-26    


原生 Function 类:

         参考手册并没有过多介绍 JS 内建的 Function 对象,只是介绍了如何用 new Function(name,arg…); 这样的方法来创建一个新的函数。

另外,通过其它资料我们还可以了解到,每个被定义的 function 都有 length 属性,它描述这个 function 定义时的实际参数个数。另一个属性就是原型: prototype ,当一个 function 被调用的时候, js 引擎负责创建 function prototype 属性。

有可能内建的 Function 类本身没有什么其它实际可用的属性或方法;另一种可能是 js 不想暴露关于 Function 类的过多细节。因为如果这样做可能带来过度的复杂性。

 

Ext Function 的扩展

         Ext Function 扩展了五个实例方法: createCallback() createDelegate() defer() createSequence() createInterceptor()

         也就是说,在使用 Ext 框架时,对于每个自定义的函数,都可以直接调用这些方法。

         下面来看源码(注释都已翻译成中文)。

/**
 	* @ Function类
	*这些方法对于每个Function对象都有效(任何一个js函数)。
 	*/
Ext.apply(Function.prototype, {
	/*该方法用来创建一个可以传递参数的回调函数。
*该方法可以直接在任何一个function上调用。
*例如:<code>myFunction.createCallback(arg1, arg2)</code>,这样就创建了一个绑定了
*两个参数的方法。
	*如果回调函数需要特定的作用域,请用createDelegate()方法替代。
	*createCallback()方法返回的函数总是在window作用域(顶级作用域)中执行。
*如果你想给一个回调方法传递参数,则需要使用该方法。如果不需要参数,你可以直
*接简单地传递一个函数的引用给需要回调的地方就可以了(例如callback: myFn)。(译者*注:这句话的意思就是说,如果你不需要向回调函数传递参数,就没有必要使用*createCallback()这个方法,直接按照常规的方式写就可以了)。
*然而,(译者注:按照常规的写法的话),如果你尝试向回调函数传递参数,(例如callback: *myFn(arg1, arg2))。那么函数在解析的时候就会被简单地执行。(译者注:而不是你期
*望的在发生某件事情之后再来回调。)
	*createCallback()的示例用法如下:
	<pre><code>
var sayHi = function(name){
    alert('Hi, ' + name);
}

// clicking the button alerts "Hi, Fred"
new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody(),
    handler: sayHi.createCallback('Fred')
});
</code></pre>
     *@返回值 {Function} 新的回调函数。
     */
createCallback : function(/*args...*/){
//使得传递进来的参数在下面的function中可用。(译者注:这里实际上是返回了//一个闭包函数,然后使用window来调用原来的函数,并把需要的参数传递进去。)
        var args = arguments;
        var method = this;
        return function() {
            return method.apply(window, args);
        };
    },

/*创建一个代理(回调)函数,把作用域设置到参数obj上。
	*该函数可以直接再任何函数上调用。例如:<code>this.myFunction.createDelegate(this, *[arg1, arg2])</code>,这将创建一函数并自动把作用域设置到obj上,这样的话,新的*callback函数中的this属性指向obj对象。
	*用法示例:
	* <pre><code>
var sayHi = function(name){
//注意这里的this.text用法。这个函数期望在一个包含text属性的作用域中//执行。在这个例子中,这个’this’属性指向了下面传入createDelegate方法//的btn对象。
    alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}

var btn = new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody()
});

//回调函数将在button实例的作用域中执行。
//点击按钮,将弹出"Hi, Fred. You clicked the ‘Say Hi’ button."

btn.on('click', sayHi.createDelegate(btn, ['Fred']));
</code></pre>
* @参数1 {Object} obj (可选) 需要设置的目标作用域对象。
      * @参数2 {Array} args (可选) 覆盖默认的调用参数。(默认为调用者传递进来的参数。)
      * @参数3 {Boolean/Number} appendArgs (可选) 如果为true,(第二个参数)args被
*添加到调用参数中而不是覆盖。如果为数字,(第二个参数)args将被插入到指定的*位置。
     * @返回值 {Function} 新的函数
     */
    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(typeof appendArgs == "number"){
                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);
        };
    },

	 /*在指定的毫秒数之后调用函数,同时可以指定特定的作用域。
	  *用法示例:
	  * <pre><code>
var sayHi = function(name){
    alert('Hi, ' + name);
}

// 立即执行:
sayHi('Fred');

//2秒后执行:
sayHi.defer(2000, this, ['Fred']);

//有时候这种语法在推迟执行一个匿名的函数的时候非常有用:
(function(){
    alert('Anonymous');
}).defer(100);
</code></pre>
   	 * @参数1 {Number} millis 设置调用setTimeout的毫秒数(如果为0函数立即被调用)。
     * @参数2 {Object} obj (可选) 需要设置的特定作用域
     * @参数2 {Array} args (可选) 覆盖默认的调用参数。(默认为调用者传递进来的参数。)
     * @参数3 {Boolean/Number} appendArgs (可选) 如果为true,(第二个参数)args被
* 添加到调用参数中而不是覆盖。如果为数字,(第二个参数)args将被插入到指定的* 位置。
     * @返回值 {Number} 定时器id,可以用来清除定时器。
     */
    defer : function(millis, obj, args, appendArgs){
        var fn = this.createDelegate(obj, args, appendArgs);
        if(millis){
            return setTimeout(fn, millis);
        }
        fn();
        return 0;
    },

	/*使用原始的函数和传递进来的函数来创建一个组合的函数调用顺序(译者注:这是一*种类似管道式的调用效果,使用第一个函数的参数来调用第二个函数)。
	*最终执行的函数返回原始函数的结果。
	*使用原始函数的参数来调用传递进来的函数。
	*示例用法:
	* <pre><code>
var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); //弹出 "Hi, Fred"

var sayGoodbye = sayHi.createSequence(function(name){
    alert('Bye, ' + name);
});

sayGoodbye('Fred'); //两个alert都会弹出
</code></pre>
     * @参数1 {Function} fcn 需要顺序执行的函数
 *@参数2 {Object} scope (optional) 传递进来函数的作用域 (默认作用域为原始函数的*作用域或window)
     * @返回值 {Function}  新的函数
*/
    createSequence : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            var retval = method.apply(this || window, arguments);
            fcn.apply(scope || this || window, arguments);
            return retval;
        };
    },

    
/*创建一个拦截函数。传入的函数在原始的函数之前执行。如果传入的函数返回false,*就不执行原始的函数。最终函数返回原始函数的执行结果。传递进来的函数使用原始*函数的参数来调用。
	 *用法示例:
	 * <pre><code>
var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); // 弹出 "Hi, Fred"

//创建一个新的函数来校验输入,而不直接去修改原始函数。
var sayHiToFriend = sayHi.createInterceptor(function(name){
    return name == 'Brian';
});

sayHiToFriend('Fred');   //没有弹出
sayHiToFriend('Brian');  // 弹出"Hi, Brian"
</code></pre>
     * @参数1 {Function} fcn 需要在原始函数调用之前被调用的函数
     *@参数2 {Object} scope (可选) 拦截器的作用域(默认为原始函数的作用域或者window)
     * @返回值 {Function} 新的函数
     */
    createInterceptor : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            fcn.target = this;
            fcn.method = method;
            if(fcn.apply(scope || this || window, arguments) === false){
                return;
            }
            return method.apply(this || window, arguments);
        };
    }
});




 


总结 :

         从以上的源码分析可以看出,对原生 Function 类的扩展全部使用了闭包。里面模拟了高级语言里面才有的代理、拦截器 。知道 Java 里面 Spring 的人对这里的代理模式 应该不陌生,知道 Struts2 的人应该很熟悉拦截器 的概念,后面还有模板 (XTemplate) ,相信 C++ fans 读到的时候肯定会很兴奋。一点小小的感慨:对于编程,编程的思想和算法 是可以超越语言、甚至超越所谓的架构而存在的。如果我们能够把这些模式、这些思想烂熟于胸,使用起来收放自如,又何必去在乎何种语言,何必去争论所谓的 C/S 还是 B/S

         我相信,通过仔细阅读 Ext 的源代码,必定能对那些耳熟能详的所谓模式和思想有更进一层的体会。

         Ext 对原生对象的扩展到这里结束。

(今天早上找了一个 Easy CHM ,想把翻译的这些东西压缩成帮助文档,结果搞出来样子非常丑,希望哪位善于制作 CHM 的高手能给我一点帮助,能达到以下这种效果就成了,Ext提供的HTML式的效果就是这样的。这个图片是网上流传比较多的一份 Ext2.0 CHM 文档,没有翻译,好多东西还有错误在里面,后期有时间我想来尝试一遍阅读 2.2 的源码一边翻译这份 API 。练练 E 文,也算帮助一下他人 ^_^ )。


         如你觉得自己 E 文还行,愿意提供帮助,可加 qun 88403922 参与。



评论 共 1 条 请登录后发表评论
1 楼 TheMatrix 2009-07-12 14:09
我觉得我在功力还不够深的情况下不看这类文章了,不然我会很惨的。不过还是得顶楼主啊。

发表评论

您还没有登录,请您登录后再发表评论

文章信息

Global site tag (gtag.js) - Google Analytics