YUI 读码日记之 YAHOO.util.GetApril 24, 2008

首先要道个歉，距离上次的“YUI 读码日记” 更新已经差不多快两个月了。期间可能是工作忙（这算不上是借口），或者是其他事情给耽误了，但无论如何作为名 YUI 的初学者还是要继续坚持下去的。

上次的 跨域调用 问题，最后使用 YAHOO.util.Get 这个组件搞定的。而接下来的几次开发中，也用到了这个组件，所以激起了对其原理窥探的好奇心。

YAHOO.util.Get = function() {
    script: function(url, opts) {
        return _queue("script", url, opts);
    },

    css: function(url, opts) {
        return _queue("css", url, opts); 
    }
}

YAHOO.util.Get 的外部调用只有另个方法，分别载入 Javascript 脚本以及 CSS 样式。究其代码，可以很明显的看到其使用了“队列”机制。

下面详细产看此函数的实现。比较点睛的是清理队列，以及加入 lang.later 两点。

var _queue = function(type, url, opts) {
    var id = "q" + (qidx++);
    opts = opts || {};

    // 当队列到达一定数量时，清理队列（清除已经操作完毕，或者重复的节点）
    //     YAHOO.util.Get.PURGE_THRESH 默认为 20
    if (qidx % YAHOO.util.Get.PURGE_THRESH === 0) {
        _autoPurge();
    }

    // 合并对象，并插入队列
    queues[id] = lang.merge(opts, {
        tId: id,
        type: type,
        url: url,
        finished: false,
        nodes: []
    });

    var q = queues[id];
    q.win = q.win || window;
    q.scope = q.scope || q.win;
    q.autopurge = ("autopurge" in q) ? q.autopurge : 
                  (type === "script") ? true : false;

    // 请考虑为什么使用 later 并延时为 0
    lang.later(0, q, _next, id);

    return {
        tId: id
    };
};

加入外部 CSS 样式，以及 Javascript 的原理非常简单。流程就是使用 createElement 生成节点，然后加入相应的属性，最后插入到文档（document）中（YAHOO.util.Get 是插入到 head 元素中）。

下面看下 YAHOO.util.Get 是如何对元素属性操作的。

var _node = function(type, attr, win) {
    var w = win || window, d = w.document, n = d.createElement(type);

    for (var i in attr) {
        // 判断有其自身的属性，才确定设置
        if (attr[i] && YAHOO.lang.hasOwnProperty(attr, i)) {
            n.setAttribute(i, attr[i]);
        }
    }

    return n;
};

var _linkNode = function(url, win) {
    return _node("link", {
            "id": "yui__dyn_" + (nidx++),
            "type": "text/css",
            "rel": "stylesheet",
            "href": url
        }, win);
};

最后，“精简版”的 getScript 可以这样实现。

var getScript = function (url) {
    var element  = document.createElement('script');
    element.type = 'text/javascript';
    element.src  = escape(url);
    document.getElementsByTagName("head")[0].appendChild(element);   
}

当然，适用性自然不及 YAHOO.util.Get 来得好。

i++ 与 ++i 的性能区别April 21, 2008

很多有关程序设计的书中都会说明 ++i 与 i++ 的区别。比如经典的论述就是

i = 5;
k = i++; // 此时 k 还是 5，但是 i 自增以后已经是 6

而

i = 5;
k = ++i;  // 此时 k 已经是 6，k 是 i 自增以后的值

可能这样的说明还不够直观。总而言之，i++; 是一个右值，而 ++i 是一个左值。

加深印象，上述的两条语句可以用下面两个函数表示。

i++ 为

function () {
    tmp = i;
    i = tmp + 1;
    return tmp;
}

++i 为

function () {
    i = i + 1;
    return i;
}

可以参考这里获知详情。总而言之，i++ 语句需要个临时变量，去存储返回自增前的值。

不要忽略这个变量的意义，了解过 C 等“低级”语言的朋友，可能会了解变量的内部机制（重新祭奠我老去的 C 语言知识）。首先，申请（malloc）一段内存空间，然后将值塞（push，压栈）进去，最后不用了释放（free）。

大家可能在循环中会经常的使用 i++ 这样的操作。在不影响逻辑的前提下，我建议使用 ++i ，虽然这点的优化非常的小。

最后，感谢 小马 的指出。

Slackware Linux 启动图April 21, 2008

Slackware Linux 经典的部分之一，就是其启动脚本（有空写下注释）。看见老外的篇文章，让我重新审视了其启动的详细过程。

使用 Slackware 那么久，尝试着给它做点贡献。于是就有了这张启动图，可能还有很多遗漏或者错误的地方，欢迎随时指正。

最后，大图下载在这里。