我的模块加载系统 v23
我的模块加载系统 v23
我的模块加载系统 v23发布，主要改进以下
支持动态添加加载器，正确取得加载器所在的节点的路径 修正IE6加态加载模块的BUG 对parseURL进行优化，减少对正则的依赖，提高性能。 对跨域的容错更强，减少对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
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息