您的位置：首页 > Web前端 > JQuery

读jQuery源码有感3

2013-12-15 17:25 375 查看

这次的主题是，具体的库和抽象的思路。

当看到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用来干什么，就可以使用了。

方便是方便，但用多了，唯恐不知道其原理。

如果你知道其原理，然后再依据需求（如同营养），一步一步使库枝繁叶茂。

那么，拈花飞叶，便可伤人。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航