我的模块加载系统 v23

我的模块加载系统 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，不过太大了。决定自己动手丰衣足食。

 

 

 

标签: javascript, mass