读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用来干什么,就可以使用了。

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

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

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

你可能感兴趣的:(jquery)