由于项目的需要,不得不重新认识一个 Javascript 代码框架, YUI 。在本人印象中,与 jQuery 的「 作用链 」处理方式不同,YUI 更像是 Java 的处理方式 - 由大堆的类封装,并提供调用。

接下来的日子,我会抽空将 YUI 的代码阅读一遍,并作一些摘录。这些笔记就形成了一系列没有「创意的文章」,我称之为「YUI 读码日记」。

首先,开始的是 YAHOO 这个基类。YUI 框架的功能都是以 YAHOO 为基类封装而成,因此 %BUILD%/yahoo/yahoo.js 是理解此框架代码的重头戏。

在阅读代码的过程中,本人对于 YAHOO.lang.later 机制比较感兴趣,它提供的功能是延时运行某个函数(或者是类的方法)。下面是它的介绍(具体的 YAHOO.lang 文档可以从 这里获得 )。

later

void later ( when , o , fn , data , periodic )

Executes the supplied function in the context of the supplied 
object 'when' milliseconds later. Executes the function a single
 time unless periodic is set to true.

Parameters:

    when <int> the number of milliseconds to wait until the fn
 is executed 

    o <object> the context object 

    fn <Function|String> the function to execute or the name 
of the method in the 'o' object to execute 

    data <object> [Array] data that is provided to the function.
 This accepts either a single item or an array. If an array is 
provided, the function is executed with one parameter for each 
array item. If you need to pass a single array parameter, it 
needs to be wrapped in an array [myarray]

    periodic <boolean> if true, executes continuously at supplied 
interval until canceled 

Returns: void
    a timer object. Call the cancel() method on this object to 
stop the timer.

程序员似乎更喜欢看代码去理解上述的功能,代码如下(注, later 是 YAHOO.lang 的一个方法)。

later: function(when, o, fn, data, periodic) {
    // 初始化变量
    when = when || 0; 
    o = o || {};
    var m=fn, d=data, f, r;

    // 如果仅仅提供了 fn 的函数名称,判断 fn 是否
    // 为 o 的一个方法。
    if (YAHOO.lang.isString(fn)) {
        m = o[fn];
    }

    if (!m) {
        throw new TypeError("method undefined");
    }
    
    // 将 data 转换成数据,并供 apply 调用
    if (!YAHOO.lang.isArray(d)) {
        d = [data];
    }

    f = function() {
        m.apply(o, d);
    };

    // 判断是否重复运行
    r = (periodic) ? setInterval(f, when) : setTimeout(f, when);

    // 返回 timer 类,可以使用 cancel 方法取消该定时器
    return {
        interval: periodic,
        cancel: function() {
            if (this.interval) {
                clearInterval(r);
            } else {
                clearTimeout(r);
            }
        }
    };

可以看得出,YAHOO.lang.later 写得非常的明了,并且很容易理解。最后,有关 setTimeout 与闭包的相关应用,可以 参看这里