1.无依赖情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一步步走入AMD</title> <script> var req = {}; /*无依赖*/ req.config = { "a":{ deps:[], fn:function(){ console.log("a"); } }, "b":{ deps:[], fn:function(){ console.log("b"); } }, "c":{ deps:[], fn:function(){ console.log("c"); } }, } var require = function(deps,fn){ var config = req.config, deps_arr = []; // 1.找依赖，生成依赖数组 for(var i=0,l = deps.length; i<l; i++){ var deps_item = deps[i]; deps_arr.push(config[deps_item].fn); } // 2.依赖数组，是入口函数的参数 fn.apply(window,deps_arr); }; require(["a","b"],function(a,b){ a(); b(); }); </script> </head> <body> </body> </html>
2.有依赖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不要温柔地走入AMD</title> <script> var req = {}; /*有依赖*/ req.config = { "a":{ deps:["b"], fn:function(b){ return function(){ console.log("a"); b(); } } }, "b":{ deps:["c"], fn:function(c){ return function(){ console.log("b"); c(); } } }, "c":{ deps:[], fn:function(){ var private_c = "cc" return function(){ console.log("c"); console.log(private_c); } } } } var require = function(deps,fn){ var config = req.config, deps_arr = []; var excute_obj = {}, deps_chain = []; for(var i in config){ deps_chain.push(i); } // 包装各个依赖函数 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], item_fn = function(){ return item["fn"].apply(window,excute_obj[configName]["deps"])(); }; excute_obj[configName] = {}; excute_obj[configName]["fn"] = item_fn; }); // 依赖函数的执行参数生成 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], param_arr = []; item_deps.forEach(function(i){ param_arr.push(excute_obj[i]["fn"]); }); excute_obj[configName]["deps"] = param_arr; }); console.log(excute_obj); deps.forEach(function(configName){ deps_arr.push(excute_obj[configName]["fn"]); }); fn.apply(window,deps_arr); }; // bug：依赖设置错误 require(["a"],function(a){ a(); }); </script> </head> <body> </body> </html>
3.循环依赖判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不要温柔地走入AMD</title> <script> var req = {}; /*有循环依赖*/ req.config = { "a":{ deps:["b","c"], fn:function(b,c){ return function(){ console.log("a"); b(); c(); } } }, "b":{ deps:["c"], fn:function(c){ return function(){ console.log("b"); c(); } } }, "c":{ deps:["a"], fn:function(){ return function(){ console.log("c"); } } } } var require = function(deps,fn){ var config = req.config, deps_arr = []; var excute_obj = {}, deps_chain = []; for(var i in config){ deps_chain.push(i); } console.log(deps_chain); function arrayClone(arr){ var _array = []; for(var i=0,l=arr.length; i<l; i++){ _array.push(arr[i]); } return _array; } function loopDepJudge(currentKey,currentDeps, circleArr){ var check_arr = []; check_arr.unshift(arrayClone(currentDeps) ); var keyChain = [currentKey]; // 开始循环 (function(){ var currentDeps = check_arr[0]; // console.log(currentDeps); if(currentDeps.length > 0){ var nextKey = currentDeps.shift(), nextDeps = circleArr[nextKey]; if(keyChain.indexOf(nextKey) > -1){ keyChain = [false,nextKey,keyChain.pop()]; return; } else{ keyChain.push(nextKey); } if(nextDeps.length > 0){ check_arr.unshift(arrayClone(nextDeps)); } else{ check_arr.shift(); keyChain = [currentKey]; if(check_arr.length == 0){ return; } } } else{ return; } arguments.callee(); })(); return keyChain; } (function(){ // 循环依赖检测 var circle_deps = {}; deps_chain.forEach(function(configName){ circle_deps[configName] = config[configName]["deps"]; }); deps_chain.forEach(function(configName){ var key = configName, deps = arrayClone(circle_deps[key]); var keyChain = loopDepJudge(key,deps,circle_deps); if(keyChain[0] == false){ throw new Error("有循环依赖。他们是"+keyChain[1]+"和" +keyChain[2]); } else{ console.log(keyChain) } }); // var keyChain = loopDepJudge() // 包装各个依赖函数 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], item_fn = function(){ return item["fn"].apply(window,excute_obj[configName]["deps"])(); }; excute_obj[configName] = {}; excute_obj[configName]["fn"] = item_fn; }); // 依赖函数的执行参数生成 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], param_arr = []; item_deps.forEach(function(i){ param_arr.push(excute_obj[i]["fn"]); }); excute_obj[configName]["deps"] = param_arr; }); console.log(excute_obj); })(); deps.forEach(function(configName){ deps_arr.push(excute_obj[configName]["fn"]); }); fn.apply(window,deps_arr); }; require(["a"],function(a){ a(); }); </script> </head> <body> </body> </html>
4.define函数定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不要温柔地走入AMD</title> <script> var req = {}; /*define函数定义*/ req.requireConfig = {}; var define = function(deps,fn){ var protocal = location.protocal, host = location.host, port = location.port, pathName = location.pathname, href = location.href, paths = req.userConfig.paths, baseUrl = req.userConfig.baseUrl || ""; function baseUrlParse(baseUrl){ var str_length = baseUrl.length, newBaseUrl = ""; if(baseUrl.lastIndexOf("/") == str_length -1){ } else{ newBaseUrl = baseUrl + "/"; } return newBaseUrl; } // 不支持IE // 1.获取当前js文件地址 var scriptSrc = document.currentScript.src; for (var i in paths) { var path = paths[i], complete_path = ""; // 2. 生成complete_path var backslash_pos = href.lastIndexOf("/"), slash_href = href.substring(0,backslash_pos+1), complete_path = slash_href + baseUrlParse(baseUrl) + path; // 3. 根据文件地址进行匹配，从而生成req.requireConfig if(scriptSrc == complete_path){ req.requireConfig[i] = { "deps":deps, "fn":fn }; } }; }; var require = function(deps,fn){ function arrayClone(arr){ var _array = []; for(var i=0,l=arr.length; i<l; i++){ _array.push(arr[i]); } return _array; } function loopDepJudge(currentKey,currentDeps, circleArr){ var check_arr = []; check_arr.unshift(arrayClone(currentDeps) ); var keyChain = [currentKey]; // 开始循环 (function(){ var currentDeps = check_arr[0]; // console.log(currentDeps); if(currentDeps.length > 0){ var nextKey = currentDeps.shift(), nextDeps = circleArr[nextKey]; if(keyChain.indexOf(nextKey) > -1){ keyChain = [false,nextKey,keyChain.pop()]; return; } else{ keyChain.push(nextKey); } if(nextDeps.length > 0){ check_arr.unshift(arrayClone(nextDeps)); } else{ check_arr.shift(); keyChain = [currentKey]; if(check_arr.length == 0){ return; } } } else{ return; } arguments.callee(); })(); return keyChain; } var config = req.requireConfig, deps_arr = [], excute_obj = {}, deps_chain = []; for(var i in config){ deps_chain.push(i); } // 循环依赖检测 (function(){ var circle_deps = {}; deps_chain.forEach(function(configName){ circle_deps[configName] = config[configName]["deps"]; }); deps_chain.forEach(function(configName){ var key = configName, deps = arrayClone(circle_deps[key]); var keyChain = loopDepJudge(key,deps,circle_deps); if(keyChain[0] == false){ throw new Error("有循环依赖。他们是"+keyChain[1]+"和" +keyChain[2]); } else{ console.log(keyChain) } }); })();// 包装各个依赖函数 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], item_fn = function(){ return item["fn"].apply(window,excute_obj[configName]["deps"])(); }; excute_obj[configName] = {}; excute_obj[configName]["fn"] = item_fn; }); // 依赖函数的参数数组生成 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], param_arr = []; item_deps.forEach(function(i){ param_arr.push(excute_obj[i]["fn"]); }); excute_obj[configName]["deps"] = param_arr; }); // 主函数的参数数组生成 deps.forEach(function(configName){ deps_arr.push(excute_obj[configName]["fn"]); }); fn.apply(window,deps_arr); }; req.userConfig = { "baseUrl":"", "paths":{ "a":"a.js", "b":"b.js", "c":"c.js" } }; </script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="c.js"></script> <script> require(["a"],function(a){ a(); }); </script> </head> <body> </body> </html>
5.js加载器生成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不要温柔地走入AMD</title> <script> /* 1.暂不支持shim */ var req = {}; req.requireConfig = {}; req.userConfig= {}; // 用来记录js加载的数目 req.jsLoadCount = 0; function baseUrlParse(baseUrl){ var str_length = baseUrl.length, newBaseUrl = ""; if(baseUrl.lastIndexOf("/") == str_length -1){ } else{ newBaseUrl = baseUrl + "/"; } return newBaseUrl; } function getObjSize(obj){ var size = 0; for(var i in obj){ var item = obj[i]; if(item !== null && typeof(item) !== "undefined"){ size++; } } return size; } var define = function(deps,fn){ var protocal = location.protocal, host = location.host, port = location.port, pathName = location.pathname, href = location.href, paths = req.userConfig.paths, baseUrl = req.userConfig.baseUrl || ""; // 不支持IE // 1.获取当前js文件地址 var scriptSrc = document.currentScript.src; for (var i in paths) { var path = paths[i], complete_path = ""; // 2. 生成complete_path var backslash_pos = href.lastIndexOf("/"), slash_href = href.substring(0,backslash_pos+1), complete_path = slash_href + baseUrlParse(baseUrl) + path; // 3. 根据文件地址进行匹配，从而生成req.requireConfig if(scriptSrc == complete_path){ req.requireConfig[i] = { "deps":deps, "fn":fn }; } }; }; var require = function(deps,fn){ // 检测js加载完毕与否 var timer_loader = setTimeout(function(){ if(req.jsLoadCount == 0){ clearTimeout(timer_loader); mainRequire(); } else{ timer_loader(); } },200); function mainRequire(){ function arrayClone(arr){ var _array = []; for(var i=0,l=arr.length; i<l; i++){ _array.push(arr[i]); } return _array; } function loopDepJudge(currentKey,currentDeps, circleArr){ var check_arr = []; check_arr.unshift(arrayClone(currentDeps) ); var keyChain = [currentKey]; // 开始循环 (function(){ var currentDeps = check_arr[0]; // console.log(currentDeps); if(currentDeps.length > 0){ var nextKey = currentDeps.shift(), nextDeps = circleArr[nextKey]; if(keyChain.indexOf(nextKey) > -1){ keyChain = [false,nextKey,keyChain]; return; } else{ keyChain.push(nextKey); } if(nextDeps.length > 0){ check_arr.unshift(arrayClone(nextDeps)); } else{ check_arr.shift(); keyChain = [currentKey]; if(check_arr.length == 0){ return; } } } else{ return; } arguments.callee(); })(); return keyChain; } var config = req.requireConfig, deps_arr = [], excute_obj = {}, deps_chain = []; for(var i in config){ deps_chain.push(i); } console.log(config); // 循环依赖检测 (function(){ var circle_deps = {}; deps_chain.forEach(function(configName){ circle_deps[configName] = config[configName]["deps"]; }); console.log(circle_deps); deps_chain.forEach(function(configName){ var key = configName, deps = arrayClone(circle_deps[key]); var keyChain = loopDepJudge(key,deps,circle_deps); if(keyChain[0] == false){ throw new Error("前方高能，有循环依赖。他们是"+keyChain[1]+"和" +keyChain[2]); } else{ console.log(keyChain) } }); })(); // 包装各个依赖函数 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], item_fn = function(){ return item["fn"].apply(window,excute_obj[configName]["deps"])(); }; excute_obj[configName] = {}; excute_obj[configName]["fn"] = item_fn; }); // 依赖函数的参数数组生成 deps_chain.forEach(function(configName){ var item = config[configName], item_deps = item["deps"], param_arr = []; item_deps.forEach(function(i){ param_arr.push(excute_obj[i]["fn"]); }); excute_obj[configName]["deps"] = param_arr; }); // 主函数的参数数组生成 deps.forEach(function(configName){ deps_arr.push(excute_obj[configName]["fn"]); }); fn.apply(window,deps_arr); } }; require.config = function(config_obj){ req.userConfig = config_obj; req.jsLoadCount = getObjSize(config_obj.paths); function generateScript(url,loadCount){ var _script = document.createElement('script'); _script.type = 'text/javascript'; _script.charset = 'utf-8'; _script.async = true; _script.src = url; _script.onload = function(){ req.jsLoadCount--; }; _script.onerror = function(e){ throw new Error(e); }; var fs = document.getElementsByTagName('script')[0]; fs.parentNode.insertBefore(_script, fs); } var href = location.href, baseUrl = req.userConfig.baseUrl || ""; paths = req.userConfig.paths; for(var i in paths){ var path = paths[i], backslash_pos = href.lastIndexOf("/"), slash_href = href.substring(0,backslash_pos+1), complete_path = slash_href + baseUrlParse(baseUrl) + path; generateScript(complete_path); } } require.config({ "baseUrl":"", "paths":{ "c":"c.js?v=3", "a":"a.js", "b":"b.js" } }); require(["a","b"],function(a,b){ a(); b(); }); </script> </head> <body> </body> </html>