Ruby's Louvre

每天学习一点点算法

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

我的模块加载系统 v23

我的模块加载系统 v23发布,主要改进以下

  1. 支持动态添加加载器,正确取得加载器所在的节点的路径
  2. 修正IE6加态加载模块的BUG
  3. 对parseURL进行优化,减少对正则的依赖,提高性能。
  4. 对跨域的容错更强,减少对top的访问,因为如果加载器是放在iframe中,而iframe与套嵌它的父页面不同域,就会抛错。

目前重构文档中,为了总是指向正确的路径,不得不使用document.write,这时原来的最后一个script标签的方式就会出错!

<script>
    window.$$path = location.protocol + "//" + location.host;
    document.write('<script src="' + $$path + '/mass.js"><\/script>')
    document.write('<script src="' + $$path + '/doc/scripts/common.js"><\/script>')
</script>

我们想得到包含“/mass.js”这节点的路径,原来的取法为:

(function(scripts) {
    var cur = scripts[scripts.length - 1],//★★★★★★
        url = (cur.hasAttribute ? cur.src : cur.getAttribute("src", 4)).replace(/[?#].*/, ""),
        kernel = $.config;
    basepath = kernel.base = url.slice(0, url.lastIndexOf("/") + 1);
    kernel.nick = cur.getAttribute("nick") || "$";
    kernel.alias = {};
    kernel.level = 9;
})(DOC.getElementsByTagName("script"));

看星星处,绝对大数加载库都是这样取,但在上述场合中,它就有很大可能取得“/doc/scripts/common.js”这个节点。

因此我复用了内部的getCurrentScript方法,改为:

(function() {
    var cur = getCurrentScript(true)
    var url = cur.replace(/[?#].*/, "");
    kernel = $.config;
    basepath = kernel.base = url.slice(0, url.lastIndexOf("/") + 1);
    var scripts = DOC.getElementsByTagName("script");
    for (var i = 0, el; el = scripts[i++]; ) {
        if (el.src === cur) {
            kernel.nick = el.getAttribute("nick") || "$";
            break;
        }
    }
    kernel.alias = {};
    kernel.level = 9;
})();

至于动态加载,网友在IE6提出了一个BUG,经过一番调戏,发现它竟然没有进入checkDeps方法。现在默认至少进入一次checkDeps,就可以避开这BUG。

按需加载模块,点击时才继续加载。这个是seajs很难实现的,需要用到seajs.async,但现在好像已经移除了。

require("/doc/scripts/loadtest/aaa,/doc/scripts/loadtest/bbb,ready", function(a, b, $) {
    var node = $("#loadasync");
    node.append(a);
    node.append(b);
    $("#asynctest").click(function() {
        require("/doc/scripts/loadtest/ccc,/doc/scripts/loadtest/ddd", function(c, d) {
            node.append(c);
            node.append(d);
        });
    });
});

如果嫌/doc/scripts/loadtest/这些太长太乱了,还可以利用别名机制。

var path = location.protocol + "//" + location.host +"/doc/scripts/loadtest/"
require.config({
    alias: {
      "aaa": path+"aaa.js",
      "bbb": path+"bbb.js",
      "ccc": path+"ccc.js",
      "ddd": path+"ddd.js"
   }
})
require("aaa,bbb,ready", function(a,b,$) {
    var parent = $("#loadasync2")
    parent.append(a);
    parent.append(b);
   $("#asynctest2").click(function(){
         require("ccc,ddd", function(c, d) {
               parent.append(c);
               parent.append(d);
         })
    })
});

加载库下载地址

顺便说一下,mass Framework已经朝着移动库的方向发展。在移动端,zepto只支持webkit系,对IE10,firefox移动版支持不良。目前,最好用的库还是Sencha Touch,不过太大了。决定自己动手丰衣足食。

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(2941)  评论(5编辑  收藏  举报

编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
历史上的今天:
2010-04-01 解读rightjs的继承机制2
2010-04-01 jQuery和MooTools的真正区别
2010-04-01 我的类库功能预览 ruby风格的继承机制
点击右上角即可分享
微信分享提示