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

当看到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. php防盗链,php ci在control里面控制除了自己站内的链接点击跳转，其他来源的都跳到站内页面

    php防盗链,php ci在control里面控制除了自己站内的链接点击跳转,其他来源的都跳到站内页面 $route['jump/(:any)/(:any)'] = "index/jump/ ...

  2. C#:将子Form加入父Form中

    实现的功能:已建立了多个子Form界面,在父Form界面左面,点击不同标题的链接文本,父Form界面右面显示不同的子界面内容. 具体如下: 1.加入split拆分器控件 2.在splitControl ...

  3. Shell 字符串比较

    转自网络 Shell字符串比较 收藏 Shell 中整数比较方法及字符串的比较方法,如等于,不等于,大于,大于等于,小于,等等. 二元比较操作符,比较变量或者比较数字.注意数字与字符串的区别. --- ...

  4. [UML]转：UML类图集中关系的总结

    转:http://blog.csdn.net/dragonpeng2008/article/details/6836448 在UML类图中,常见的有以下几种关系: 泛化(Generalization) ...

  5. String类方法

    1.charAt(int index)  返回指定索引处的 char 值. 2. length() 返回此字符串的长度. 3.String replace(char oldChar, char new ...

  6. c#窗体传志

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. 哈夫曼树-Fence Repair 分类： 树 POJ 2015-08-05 21:25 2人阅读 评论(0) 收藏

    Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 32424 Accepted: 10417 Descri ...

  8. c#代码画图

    说明:此示例代码在我做的一个项目中  不过还是可以学习一下 一:直角坐标系显示数据 先看效果图:

  9. libevent安装及使用

    一.安装libevent 官网:http://libevent.org/ 选择最新版本下载,我选择的是libevent-2.0.22-stable.tar.gz,然后安装README文件中描述的方法编 ...

  10. 本地计算机上的MSSQLSERVER服务启动后又停止了。一些服务自动停止，如果它们没有什么可做的

    本地计算机上的MSSQLSERVER服务启动后又停止了.一些服务自动停止,如果它们没有什么可做的 笔者ASP运行环境:操作系统为Windows XP SP2,IIS的版本为默认的5.1,数据库为SQL ...