針對網友提出的直接加載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 = "http://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兩個函數。如果想偷懶,就慘了,需要它是幫你搞定了依賴的問題,但無法阻止命名沖突的隱患。