我的模块加载系统 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两个函数。如果想偷懒,就惨了,需要它是帮你搞定了依赖的问题,但无法阻止命名冲突的隐患。
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
浙公网安备 33010602011771号