我的模块加载系统 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