这次的主题是，具体的库和抽象的思路。
当看到Deferred这个区块时，觉得jQuery代码设计挺复杂，得用许多脑力才能看明白。
可是把这个峰回路转十八回的代码看懂又如何，是为了使用过程中出现bug后，容易调试吗？还是重新造个轮子？
我觉得需求撑大的库，当你不知道它撑大的历史，而贸然阅读，容易一头雾水。
所以从简单的具体开始，
1.没有参数传递，只有第一个函数有定时器的情况
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>没有参数传递，只有第一个函数有定时器的情况</title> <script type="text/javascript"> var dfd = {}; dfd.resolve = function() { var list = dfd.promise.list; for(var i=0, l= list.length; i < l ; i++){ list[i](); } } dfd.promise = {}; dfd.promise.list = []; dfd.promise.then = function(fn_arg) { dfd.promise.list.push(fn_arg); return dfd.promise; } function f1() { setTimeout(function() { console.log("1"); dfd.resolve(); }, 1000); return dfd.promise; } function f2(){ console.log("2"); } function f3(){ console.log("3"); } f1().then(f2).then(f3); </script> </head> <body> 没有参数传递，只有第一个函数有定时器的情况 </body> </html>
2.没有参数传递，都有定时器的情况
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>没有参数传递，都有定时器的情况</title> <script type="text/javascript"> var dfd = {}; dfd.resolve = function() { var list = dfd.promise.list; list.shift()(); } dfd.promise = {}; dfd.promise.list = []; dfd.promise.then = function(fn_arg) { dfd.promise.list.push(fn_arg); return dfd.promise; } function f1() { setTimeout(function() { console.log("1"); dfd.resolve(); }, 1000); return dfd.promise; } function f2(){ setTimeout(function() { console.log("2"); dfd.resolve(); }, 1000); return dfd.promise; } function f3(){ setTimeout(function() { console.log("3"); }, 1000); } f1().then(f2).then(f3); </script> </head> <body> </body> </html>
3.都有参数传递，都有定时器的情况
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>都有参数传递，都有定时器的情况</title> <script type="text/javascript"> var dfd = {}; dfd.resolve = function(arg) { var list = dfd.promise.list; list.shift()(arg); } dfd.promise = {}; dfd.promise.list = []; dfd.promise.then = function(fn_arg) { dfd.promise.list.push(fn_arg); return dfd.promise; } function f1() { setTimeout(function() { console.log("3"); dfd.resolve(5); }, 1000); return dfd.promise; } function f2(num){ setTimeout(function() { console.log(num); dfd.resolve(7); }, 1000); return dfd.promise; } function f3(num){ setTimeout(function() { console.log(num); }, 1000); } f1().then(f2).then(f3); </script> </head> <body> </body> </html>
至于库的演变过程，你想靠svn，git的提交记录知道，是不大可能。
除非造库的那个人，手把手教你从头开始打造这个库。
或者，每次库的重要变化时，他都用视频记录下来，并且以教程的方式展示。
我觉得，可以适当改变这种以行的方式来敲代码，改为以帧的方式来画代码。
这样，你才能清晰地看到，库的从无到有。
具体的库对外开放api，你只要知道这些个api用来干什么，就可以使用了。
方便是方便，但用多了，唯恐不知道其原理。
如果你知道其原理，然后再依据需求（如同营养），一步一步使库枝繁叶茂。
那么，拈花飞叶，便可伤人。