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

当看到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. UIScrollView的滚动位置设置

    1.如果手动设置滚动异常,可以从最小值到最大值,极限调试.最小值取一个,中间值取n个,最大值取一个.

  2. Ganglia监控MySQL

    1.下载mysql监控脚本: [root@node1 app]# wget http://www.javabloger.com/att/gmetric-mysql.sh 2.修改脚本中的msyql用户 ...

  3. 对于改善 MySQL 数据装载操作有效率的方法是怎样

    多时候关心的是优化SELECT 查询,因为它们是最常用的查询,而且确定怎样优化它们并不总是直截了当.相对来说,将数据装入数据库是直截了当的.然而,也存在可用来改善数据装载操作效率的策略,其基本原理如下 ...

  4. PHP高级架构技术年度大盘点

    2015年1月的最后一个周末,上海的冬季虽不如北方的雪窖冰天,但腊月的寒风也足以让人猫 在家中不愿出门.可是,在华美达酒店的一个会议室中,却人声鼎沸.春意融融,第三期商派技术沙龙正在火热进行,本期沙龙 ...

  5. 【转】SVN 查看历史信息

    转载地址:http://lee2013.iteye.com/blog/1074457 SVN 查看历史信息 通过svn命令可以根据时间或修订号去除过去的版本,或者某一版本所做的具体的修改.以下四个命令 ...

  6. JQuery-遮罩层

    HTML <html> <head> <link href="StyleSheet.css" rel="stylesheet" t ...

  7. Prime Path 分类： 搜索 POJ 2015-08-09 16:21 4人阅读 评论(0) 收藏

    Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14091 Accepted: 7959 Descripti ...

  8. 使用C#写windows服务

    首先,创建一个windows服务项目

  9. The Blacksmith学习的相关资源

    1.Unity官网的Blacksmith主页 https://unity3d.com/pages/the-blacksmith 2.WRINKLE MAPS IN THE BLACKSMITH 褶皱贴 ...

  10. Python静态方法的使用

    class Util(): @staticmethod def Func1(): print "Execute Func1!" def main(): Util.Func1()