我的模块加载系统 v24
针对网友提出的直接加载jQuery等不按照AMD的规范编写的JS文件的需求,紧急发布一个版本。其实思路很简单,就是如果存在依赖时,让依赖先加载,然后再用普通方式加载jQuery,然后从window中取得jQuery这个对象,放到用户回调里。
function loadJSCSS(url, parent, ret, shim) { //1. 特别处理ready标识符 if (/^(mass|ready)$/.test(url)) { return url; } //2. 转化为完整路径 if ($.config.alias[url]) { ret = $.config.alias[url]; if (typeof ret === "object") { shim = ret; ret = ret.src; } } else { //略 } var src = ret.replace(/[?#].*/, ""), ext; if (/\.(css|js)$/.test(src)) { // 处理"http://113.93.55.202/mass.draggable"的情况 ext = RegExp.$1; } if (!ext) { //如果没有后缀名,加上后缀名 src += ".js"; ext = "js"; } //3. 开始加载JS或CSS if (ext === "js") { if (!modules[src]) { //如果之前没有加载过 modules[src] = { id: src, parent: parent, exports: {} }; if (shim) {//这里用于直接加载jQuery等库 require(shim.deps || "", function() { loadJS(src, function() { modules[src].state = 2; modules[src].exports = window[shim.exports]; checkDeps(); }); }); } else { loadJS(src);//这里是加载按照AMD规范编写的模块的 } } return src; } else { loadCSS(src);//这里是加载CSS文件 } }
用法:
+function() { var path = "https://files.cnblogs.com/shuicaituya/" require.config({ alias: { "jquery": { src: path + "jquery.js", deps: [],//没有依赖可以不写 exports: "jQuery" //要从全局作用域抽取的数据 } } }); require("jquery,ready", function($) { alert($) alert("回调调起成功"); alert($("body").length) //这里不用domReady了 }) }()
不过,需要留意的是,如果按照AMD的写法,无论你是加载多少个库或插件,始终在全局暴露两个函数,define与require两个函数。如果想偷懒,就惨了,需要它是帮你搞定了依赖的问题,但无法阻止命名冲突的隐患。
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年