读jQuery源码有感3

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

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

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

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

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

posted @ 2013-12-15 17:25  草珊瑚  阅读(436)  评论(0)  编辑  收藏  举报