每个开 Blog 的兄弟都会时刻关注 Blog 上的留言，上次已经说道如何 使用 Gtalk 追踪网站的留言 。

在使用 Google 工具条时发现其实 Google 工具条本身也开放了 API 供用户调用。第一步要做的就是将用户留言做成 RSS 格式的输出（其实也就是 XML 格式，Wordpress 已经有这样的功能了）。

然后我们再写个针对 Google 工具条的 XML 文件即可。格式如下

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    <button>
       <site>在这里设置点击按钮以后进入的网址</site>
       <title>我是按钮的标题</title>
       <description>我是按钮的描述</description>
       <feed refresh-interval="1800">RSS 地址</feed>
       <icon mode="base64" type="image/x-icon">
           base64 以后的 ico 文件内容
       </icon>
    </button>
</custombuttons>

具体的例子可以 参看这里 ，其中 title 与 description 不言而喻，是标题以及描述，最为重要的是 feed 标签。feed 的值就是任何的 RSS 链接，针对本文就是其留言的 RSS 地址。refresh-interval 属性是刷新的间隔时间，单位是秒。

然后我们可以根据 Google 工具栏提供的链接将我们已经做好的 XML 格式的按钮添加到 Google 工具条中。格式为

http://toolbar.google.com/buttons/add?url=<XML 文件 URL 地址>

访问这个生成的链接就可以加入到 Google 工具条了，效果如图上所示。比如

点击这里将 Gracecode.com 的文章加入 Google 工具条

最后，有关多的信息，可以参看 Google 工具条的 中文 API 文档 。

首先要道个歉，距离 上次 的「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++ 的区别。比如经典的论述就是

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 ，虽然这点的优化非常的小。

最后，感谢 小马 的指出。