不要温柔地走入AMD
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>
不要温柔地走入AMD的更多相关文章
- 不要温柔地走入promise
第一步 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- js模块定义——支持CMD&AMD&直接加载
/* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...
- JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- AMD电脑装完Winsows10后开机蓝屏，报错代码：cdmsnroot_s.sys
背景:今天装了个WIN10,电脑配置:联想 IdeaPad Z485 : AMD A8处理器 .完成安装后电脑没有问题,安装了驱动程序后将 电脑用360 ...
- JavaScript的模块化之AMD&CMD规范
前端开发常常会遇到的问题: 1.恼人的命名冲突: 2.繁琐的文件依赖: 模块化开发的优势: 1.解决命名冲突和依赖管理: 2.模块的版本管理: 3.提高代码的可维护性: 4.前端性能优化: JavaS ...
- Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- CommonJS, AMD 和 RequireJS之间的关系(转载)
先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行, ...
- Can't load IA 32-bit .dll on a AMD 64-bit platform错误的解决
64位的系统,64位的myeclipse,64位的jdk,64位的tomcat,结果报错:Can't load IA 64-bit .dll on a AMD 32-bit platform,简直无语 ...
随机推荐
- jQuery DataTable-JavaScript API
虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表.可以使用以下函数从jQuery.dataTable对象 ...
- sqlite3内存不断增加的原因
数据库是这样设计的:用内存保存数据,以提高增删查改的速度,同时把数据写入磁盘,让数据落地. 如果不删除数据库里的数据,随着数据不断地添加到数据库,数据库越来越大,RES内存也越来越大. 见测试代码a. ...
- HDU 2846：Repository（Trie）
http://acm.hdu.edu.cn/showproblem.php?pid=2846 题意:给出N个模式串,再给出M个文本串,问每一个文本串在多少个模式串中出现. 思路:平时都是找前缀的,这里 ...
- HDU 5787：K-wolf Number（数位DP）
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5787 题意:要求相邻的K个位的数不能相同,在[L,R]区间有多少个这样的数. #inclu ...
- servlet 笔记
Servlet的作用是接收浏览器传给服务端的请求(request),并将服务端处理完的响应(response)返回给用户的浏览器,浏览器和服务端之间通过http协议进行沟通,其过程是浏览器根据用户的选 ...
- destoon 会员整合Ucenter/Discuz!/PHPWind教程
首先进入 Destoon网站后台 -〉会员管理 -〉模块设置 -〉会员整合 假如需要整合的主站地址为 http://www.abc.com 论坛为 http://bbs.abc.com 1.整合Uce ...
- java 打印出99乘法口诀表
public class Mutiplay { /** *实现99乘法表 * @param args */ public static void main(String[] args) { Syste ...
- Chrome开发者工具学习
Chrome开发者工具分为8个大模块,每个模块功能为: 1.Element标签页:用于查看和编辑当前页面中的HTML和CSS元素. 左侧可以看到页面的源码,HTML和CSS元素,双击可以进行修改.右侧 ...
- cookie与localstorage和sessionstorage的区别比较
保存位置: 三者均保存在浏览器端,且同源的. 与服务器的关系: cookie 数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递. sessionStorage ...
- ACM第二站————归并排序
转载请注明出处,谢谢!http://www.cnblogs.com/Asimple/p/5459664.html 归并排序————二分的思想 以中间的数为基准,每次排序都将比其小[升序排](大[降序排 ...