我的模块加载系统 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,不过太大了。决定自己动手丰衣足食。
如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码


机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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风格的继承机制