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

当看到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. Python 进阶（五）定制类

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAF/CAIAAACUs6uhAAAgAElEQVR4nOzdZXubx7ov8PPV9tlrt0 ...

  2. CasperJS基于PhantomJS抓取页面

    CasperJS基于PhantomJS抓取页面 Casperjs是基于Phantomjs的,而Phantom JS是一个服务器端的 JavaScript API 的 WebKit. CasperJS是 ...

  3. split function of Perl,Python,Awk

    使用中常用到Perl,Python,AWK,R, 虽然Java,C,C++,Vala也学过但是就是不喜欢,你说怎么办. 看来一辈子脚本的命. Perl @rray = split /PATTERN/, ...

  4. 【Pro ASP.NET MVC 3 Framework】.学习笔记.4.MVC的主要工具-使用Moq

    在之前的例子中,我们创建了FakeRepository类来支持我们的测试.但是我们还没有解释如何穿件一个真实的repository实现,我们需要一个替代品.一旦我们有一个真的实现,我们可能不会再用它, ...

  5. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  6. PHP的Socket通信之UDP篇

    1.创建一简单的UDP服务器 //服务器信息 $server = 'udp://127.0.0.1:9998'; //消息结束符号 $msg_eof = "\n"; $socket ...

  7. oracle进制-10进制跟2进制互转

    CREATE OR REPLACE FUNCTION NUMBER_TO_BIT(V_NUM NUMBER) RETURN VARCHAR IS V_RTN );--注意返回列长度 V_N1 NUMB ...

  8. 每日一九度之 题目1039：Zero-complexity Transposition

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3372 解决:1392 题目描述: You are given a sequence of integer numbers. Zero-co ...

  9. ACM题目————小A的计算器

    Description 以往的操作系统内部的数据表示都是二进制方式,小A新写了一个操作系统,系统内部的数据表示为26进制,其中0-25分别由a-z表示.  现在小A要在这个操作系统上实现一个计算器,这 ...

  10. C++中关于cin、cin.get()、cin.getline()、getline()、gets()等函数的用法

    1.cin>> 用法1:最基本,也是最常用的用法,输入一个数字: 注意:>> 是会过滤掉不可见的字符(如 空格 回车,TAB 等) cin>>noskipws> ...