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

当看到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. 【原创】JDK动态代理，此次之后，永生难忘。

    动态代理,这个词在Java的世界里面经常被提起,尤其是对于部分(这里强调“部分”二字,因为有做了一两年就成大神的,实力强的令人发指,这类人无疑是非常懂动态代理这点小伎俩的)做了一两年新人来说,总是摸不 ...

  2. 使用BBCP来提升跨互联网的数据传输速度

    背景介绍: 目前项目在美国东西部以及欧洲都有服务器节点,跨互联网的数据传输速度很不稳定,之前我们主要是通过SCP以及Rsync等方式进行数据传输的. 无意间发现了BBCP这个软件之后,经过测试,效果非 ...

  3. Android TextView中 字体加粗方法

    textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗 textView.getPaint().setFakeBoldT ...

  4. SQL基础教程

    第一范式: 列仅包含原子值: 没有重复的组. 第二范式: 满足第一范式: 非部分函数依赖.(如果组合键中任何一列值改变,将导致非键列的值需要被更新) 那么,主键是一列(不是组合的)满足第二范式:所有列 ...

  5. vim中设置自动匹配括号和引号

    vim ~/.vimrc 在.vimrc中添加一下几行 inoremap ( () <LEFT> inoremap { {} <LEFT> inoremap [ [] < ...

  6. 关于iframe嵌套、动态获取iframe内的url、父页面重定向-2

    经过学习,发现了一种更好的办法 试验如下 1.html的内容如下: (2.html和3.html没有jquery,只有body的222和333) 结果为: 其实最容易搞糊涂的是,什么时候算self,其 ...

  7. protoful进行序列化

    Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台 ...

  8. linux命令总结2

    昨天继续对239进行挖掘,想把运营登录浮层的示例页面放在这台测试机上,供大家使用,结果在配置apache时出现了问题,无论怎样,页面都是403 Forbidden,最后终于被露颖同学经过2个小时的努力 ...

  9. A Plug for UNIX 分类： POJ 图论 函数 2015-08-10 14:18 2人阅读 评论(0) 收藏

    A Plug for UNIX Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14786 Accepted: 4994 Desc ...

  10. oneThink安装出错解决

    在Wampserver3.0.0(apache2.4.17+php5.6.15+mysql5.7.9)版本中oneThink安装用1.1github版,不要用1.1开发版,不然安装的时候数据库导入时b ...