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

当看到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源码有感3的更多相关文章

  1. 读jQuery源码有感

    读之前的预备工作: 1.基础的js知识,以及html和css知识,和正则表达式知识.可以参考妙味课堂的基础js,html和css大纲. 2.JavaScript核心指南的知识http://www.cn ...

  2. 读jQuery源码有感2

    那么就来读读jQuery源码的Callbacks部分. 一上来看原版源码 jQuery.Callbacks = function( options ) { // Convert options fro ...

  3. 【读jQuery源码有感系列一】callee

    <script type="text/javascript"> /*调用自身*/ function calleeDemo() { try{ } catch (error ...

  4. 读jQuery源码 - Deferred

    Deferred首次出现在jQuery 1.5中,在jQuery 1.8之后被改写,它的出现抹平了javascript中的大量回调产生的金字塔,提供了异步编程的能力,它主要服役于jQuery.ajax ...

  5. 读jQuery源码之整体框架分析

    读一个开源框架,大家最想学到的就是设计的思想和实现的技巧.最近读jQuery源码,记下我对大师作品的理解和心得,跟大家分享,权当抛砖引玉. 先附上jQuery的代码结构. (function(){ / ...

  6. 【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度

    申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话 ...

  7. 读jQuery源码 - Callbacks

    代码的本质突出顺序.有序这一概念,尤其在javascript——毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是 ...

  8. 读jQuery源码释疑笔记2

    本释疑笔记是针对自己在看源码的过程中遇到的一些问题的解答,对大众可能不具有参考性,不过可以看看有没有你也不懂得地方,相互学习,相互进步. 1.函数init <div id="one&q ...

  9. 读jQuery源码释疑笔记

    本释疑笔记是针对自己在看源码的过程中遇到的一些问题的解答,对大众可能不具有参考性,不过可以看看有没有你也不懂得地方,相互学习,相互进步.  1.each的用法 之前对each的用法一直迷迷糊糊,这次终 ...

随机推荐

  1. LUA笔记之表

    表据说是LUA的核, 呵呵, 看例子吧, 看上去, 跟java的list很像, 又有点像json: a = {} -- create a table and store its reference i ...

  2. windows cmd color setup

    设置颜色的话,一般可定会有foreground和background color设置:(其实color /?直接看一下就好了) Color Background Foreground Black 0 ...

  3. redis make test报错 Test replication partial resync: ok psync

    更改 tests/integration/replication-psync.tcl 文件: vi tests/integration/replication-psync.tcl 把对应报错的那段代码 ...

  4. Volley的基本用法

    1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行H ...

  5. 【PHP设计模式 01_DuoTai.php】多态的说明

    <?php /** * [多态] * 定义一个抽象类:Tiger,有两个子类:XTiger 和 MTiger */ header("Content-type: text/html; c ...

  6. JAVA 值传递

    Java里方法的参数传递方式只有一种:值传递 值传递:当系统开始执行方法时,系统为形参执行初始化,就是把实参变量的值赋给方法的形参变量,方法的操作的并不是实际的实参变量 引用型变量:系统复制的是变量, ...

  7. smb.conf

    [home]comment = All Printerspath = /homevalid users = yorkwriteable=yespublic=yesbrowseable = yescre ...

  8. 2015 AlBaath Collegiate Programming Contest A

    Description Tamer is traveling with his brother on a long highway. He sees a traffic light at a dist ...

  9. 深入理解C语言中的指针与数组之指针篇

    转载于http://blog.csdn.net/hinyunsin/article/details/6662851     前言 其实很早就想要写一篇关于指针和数组的文章,毕竟可以认为这是C语言的根本 ...

  10. java获取指定时间的年月日

    作者:Night Silent链接:http://www.zhihu.com/question/35650798/answer/63983440来源:知乎著作权归作者所有,转载请联系作者获得授权.1. ...