几乎所有的程序设计书籍，它们都会或多或少的讲解 MVC 是什么回事 。

有幸收到份来自 jamal 的 PPT，其作者阐述了针对 Javascript 的 MVC 思想。这份不长的 PPT 中，有个图让我思考良久（本人加了些翻译）：

大图可以看这里 ，或者 将此 PPT 以及图片打包下载 。

个人认为， 软件架构模式 也是仁者见仁的事情，这就好比各种不同的 Javascript 开发框架一样，没有孰劣孰优、只有适合不适合。

另外，扩展阅读 此篇同类文章 ，也能收获良多。

不同版本的 Javascript 提供了不同的 Array 方法。其中有几个方法非常的实用，比如 filter 、 forEach 、 every 等等。

但由于存在不同的浏览器版本，加上 Javascript 的实现不一样，所以并不是每个浏览器都能非常良好的支持 Javascript 1.6 以后的 Array 扩展。

在参考了 Tbra 库 以及 Mozilla 官方的文档 以后，再加上 原先编写的些 Array 扩展 ，这样应该能满足日常的开发需要了。

下载 源代码 、 Zip 打包 以及 在线 HTML 阅读 。

首先要道个歉，距离 上次 的「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 来得好。