無標題文檔

Javascript 的 MVC 思想

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

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

https://friable.rocks/_/2009_11_05/909145a1d249.jpg

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

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

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

Javascript 的 Array 扩展包

不同版本的 Javascript 提供了不同的 Array 方法。其中有几个方法非常的实用,比如 filterforEachevery 等等。

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

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

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

YUI 读码日记之 YAHOO.util.Get

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

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章