JQuery源码解析（十）

时间：2023-03-09 09:36:48
JQuery源码解析（十）

默认回调对象设计

不传入任何参数，调用add的时候将函数add到内部的list中，调用fire的时候顺序触发list中的回调函数：

function fn1(val) {

  console.log('fn1 says:' + val);

}

function fn2(val) {

  console.log('fn2 says ' + val);

}

var cbs = $.Callbacks();

cbs.add(fn1);

cbs.fire('foo');

console.log('........')

cbs.add(fn2);

cbs.fire('bar')

结果就是按照顺序叠加触发，如下列表：

　　

fn1 says:foo

………………………

fn1 says:bar

fn2 says bar

这种就是最简单的处理了，可以直接模拟，代码如下：

function Callbacks() {

  var list = [];

  var self;

  self = {

    add: function(fn) {

      list.push(fn)

    },

    fire: function(args) {

      list.forEach(function(fn) {

        fn(args);

      })

    }

  }

  return self;

}

代码：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>

</head>

<body>

<script type="text/javascript">

function Callbacks() {

  var list = [];

  var self;

  self = {

    add: function(fn) {

      list.push(fn)

    },

    fire: function(args) {

      list.forEach(function(fn) {

        fn(args);

      })

    }

  }

  return self;

}

function fn1(val) {

  show('fn1 says:' + val);

}

function fn2(val) {

  show('fn2 says ' + val);

}

var cbs = Callbacks();

cbs.add(fn1);

cbs.fire('foo');

cbs.add(fn2);

cbs.fire('bar')

</script>

</body>

</html>

once的设计

once的作用确保回调列表只执行（.fire()）一次(像一个递延 Deferred)，如下代码：

function fn1(val){

    console.log('fn1 says ' + val);

}

var cbs = $.Callbacks('once');

cbs.add(fn1);

cbs.fire('foo');

cbs.fire('foo');

结果你会发现cbs.fire('foo')只执行了一次。

fn1 says foo  //只显示一次

once定义是很明确的，确保这个回调列表只执行（ .fire() ）一次(像一个递延 Deferred)，所以针对这种once的处理可以有多种不同的途径实现。

1、add的时候抛弃

2、在fire的时候抛弃多个。

但是jQuery是在执行第一个fire的时候直接给清空list列表了，然后在add的地方给判断下list是否存在，从而达到这样的处理。

function Callbacks(options) {

  var list = [];

  var self;

  self = {

    add: function(fn) {

      list.push(fn)

    },

    fire: function(args) {

      if (list) {

        list.forEach(function(fn) {

          fn(args);

        })

        if (options === 'once') {

          list = undefined;

        }

      }

    }

  }

  return self;

}

在fire之后，判断参数是否为once，直接把list给清理掉，所以之后的所有fire都被抛弃掉了，而从达到了once的效果。

jQuery.Callbacks的处理

在fire中调用了 self.disable(); 方法

// 禁用回调列表中的回调。

disable: function() {

    list = stack = memory = undefined;

    return this;

},

实例代码：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>

</head>

<body>

<script type="text/javascript">

function Callbacks(options) {

  var list = [];

  var self;

  self = {

    add: function(fn) {

      list.push(fn)

    },

    fire: function(args) {

      if(list){

        list.forEach(function(fn) {

          fn(args);

        })

        if(options === 'once'){

          list = undefined;

        }

      }

    }

  }

  return self;

}

function fn1(val) {

  show('fn1 says:' + val);

}

function fn2(val) {

  show('fn2 says ' + val);

}

var cbs = Callbacks('once');

cbs.add(fn1);

cbs.fire('foo');

cbs.fire('foo');

</script>

</body>

</html>

memory的设计

memory：保持以前的值，将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred)。

回调函数是从异步队列Deferred分离出来的，所以很多的接口设计都是为了契合Deferred接口，memory用的很多，这个缓存的设计这里提及一下

主要是用来实现deferred的异步收集与pipe管道风格的数据传递的，具体在Deferred有详解，这里大概了解下作用范围。

memory这个有点不好理解，我们还是通过列子说明下，看下面的代码：

var cbs = Callbacks('once');

cbs.add(fn1);

cbs.fire('foo');

cbs.fire('foo');

function fn1(val) {

  console.log('fn1 says ' + val);

}

function fn2(val) {

  console.log('fn2 says ' + val);

}

function fn3(val) {

  console.log('fn3 says ' + val);

}

var cbs = $.Callbacks('memory');

cbs.add(fn1);

cbs.fire('foo');

console.log('..........')

cbs.add(fn2);

cbs.fire('bar');

console.log('..........')

cbs.add(fn3);

cbs.fire('aaron');

结果可以看出，我们在执行cbs.add(fn2);的时候，此时除了把fn2添加到了回调队列之外而且还立刻执行了这个方法，唯一的区别就是，参数是用的之前的。所以解释就叫“保持以前的值”。　

fn1 says foo

..........

fn2 says foo

fn1 says bar

fn2 says bar

..........

fn3 says bar

fn1 says aaron

fn2 says aaron

fn3 says aaron

所以这个memory设计需要解决的问题就是：

1：如何取到上一个参数

2：add后如何执行

看看我们实现的代码：

function Callbacks(options) {

  var list = [];

  var self;

  var firingStart;

  var memory;

  function _fire(data) {

    memory = options === 'memory' && data;

    firingIndex = firingStart || 0;

    firingStart = 0;

    firingLength = list.length;

    for (; list && firingIndex < firingLength; firingIndex++) {

      list[firingIndex](data)

    }

  }

  self = {

    add: function(fn) {

      var start = list.length;

      list.push(fn)

      if (memory) {

        firingStart = start; //获取最后一值

        _fire(memory);

      }

    },

    fire: function(args) {

      if (list) {

        _fire(args)

      }

    }

  }

  return self;

}

首先add之后要能触发fire的动作，所以我们把fire作为内部的一个私有方法实现_fire，比较合逻辑，这样外部的fire只是一个门面方法的调用。

私有变量memory缓存这上一个参数的属性，我们靠firingStart用来定位最后通过add增加的回调数据的索引。在遍历的时候直接通过firingStart的起始索引定位，然后传递memory的参数，而且实现这种“保持以前的值”的设计。

实例代码：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>

</head>

<body>

<script type="text/javascript">

function Callbacks(options) {

  var list = [];

  var self;

  var firingStart;

  var memory;

  function _fire(data) {

    memory = options === 'memory' && data;

    firingIndex = firingStart || 0;

    firingStart = 0;

    firingLength = list.length;

    for (; list && firingIndex < firingLength; firingIndex++) {

      list[firingIndex](data)

    }

  }

  self = {

    add: function(fn) {

      var start = list.length;

      list.push(fn)

      if (memory) {

        firingStart = start; //获取最后一值

        _fire(memory);

      }

    },

    fire: function(args) {

      if (list) {

        _fire(args)

      }

    }

  }

  return self;

}

function fn1(val) {

  show('fn1 says ' + val);

}

function fn2(val) {

  show('fn2 says ' + val);

}

function fn3(val) {

  show('fn3 says ' + val);

}

var cbs = Callbacks('memory');

cbs.add(fn1);

cbs.fire('foo');

cbs.add(fn2);

cbs.fire('bar');

cbs.add(fn3);

cbs.fire('aaron')

</script>

</body>

</html>

unique的设计

Unique：确保一次只能添加一个回调(所以在列表中没有重复的回调)

function fn1(val) {

  console.log('fn1 says ' + val);

}

var callbacks = $.Callbacks( "unique" );

callbacks.add( fn1 );

callbacks.add( fn1 ); // repeat addition

callbacks.add( fn1 );

callbacks.fire( "foo" );

结果：过滤了相同的add操作

fn1 says foo

过滤重复的比较简单，因为是数组的保存方式，我们可以在入口处通过indexOf判断即可

function Callbacks(options) {

  var list = [];

  var self;

  var firingStart;

  var memory;

  function _fire(data) {

    memory = options === 'memory' && data;

    firingIndex = firingStart || 0;

    firingStart = 0;

    firingLength = list.length;

    for (; list && firingIndex < firingLength; firingIndex++) {

      list[firingIndex](data)

    }

  }

  self = {

    add: function(fn) {

      var start = list.length;

      if (options == 'unique') {

        if (-1 === list.indexOf(fn)) {

          list.push(fn)

        }

      } else {

        list.push(fn)

      }

      if (memory) {

        firingStart = start; //获取最后一值

        _fire(memory);

      }

    },

    fire: function(args) {

      if (list) {

        _fire(args)

      }

    }

  }

  return self;

}

实例代码：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>

</head>

<body>

<script type="text/javascript">

function Callbacks(options) {

  var list = [];

  var self;

  var firingStart;

  var memory;

  function _fire(data) {

    memory = options === 'memory' && data;

    firingIndex = firingStart || 0;

    firingStart = 0;

    firingLength = list.length;

    for (; list && firingIndex < firingLength; firingIndex++) {

      list[firingIndex](data)

    }

  }

  self = {

    add: function(fn) {

      var start = list.length;

      if (options == 'unique') {

        if (-1 === list.indexOf(fn)) {

          list.push(fn)

        }

      } else {

        list.push(fn)

      }

      if (memory) {

        firingStart = start; //获取最后一值

        _fire(memory);

      }

    },

    fire: function(args) {

      if (list) {

        _fire(args)

      }

    }

  }

  return self;

}

function fn1(val) {

  show('fn1 says ' + val);

}

var callbacks = Callbacks( "unique" );

callbacks.add( fn1 );

callbacks.add( fn1 ); // 重复添加

callbacks.add( fn1 );

callbacks.fire( "foo" );

</script>

</body>

</html>

stopOnFalse

stopOnFalse: 当一个回调返回false 时中断调用

function fn1(value) {

  console.log(value);

  return false;

}

function fn2(value) {

  fn1("fn2 says: " + value);

  return false;

}

var callbacks = $.Callbacks("stopOnFalse");

callbacks.add(fn1);

callbacks.fire("foo");

callbacks.add(fn2);

callbacks.fire("bar");

结果虽然fn1被添加到了回调列表，但是因为fn1返回了false，那么意思之后的回调都不会被调用了。如果还有fn3，在f2上返回false，fn3也将不会被调用。

foo

bar

这个设计我们只要控制好函数返回的处理的布尔值，通过这个值用来判断是否需要下一个遍历

if (list[firingIndex](data) === false && options === 'stopOnFalse') {

  break;

}

源码如下：

function Callbacks(options) {

  var list = [];

  var self;

  var firingStart;

  var memory;

  function _fire(data) {

    memory = options === 'memory' && data;

    firingIndex =

      firingStart || 0;

    firingStart = 0;

    firingLength = list.length;

    for (; list && firingIndex < firingLength; firingIndex++) {

      if (list[firingIndex](data) === false && options === 'stopOnFalse') {

        break;

      }

    }

  }

  self = {

    add: function(fn) {

      var start = list.length;

      if (options == 'unique') {

        if (-1 === list.indexOf(fn)) {

          list.push(fn)

        }

      } else {

        list.push(fn)

      }

      if (memory) {

        firingStart = start; //获取最后一值

        _fire(memory);

      }

    },

    fire: function(args) {

      if (list) {

        _fire(args)

      }

    }

  }

  return self;

}

以上是几种单独的处理情况的用法，我们可以看到jQuery都是组合使用的，最常见的就是

jQuery.Callbacks("once memory")的组合了，其实以上的思路都讲解过了，无非就是组合起来的时候要考虑一些判断了。

代码示例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>

</head>

<body>

<script type="text/javascript">

function Callbacks(options) {

  var list = [];

  var self;

  var firingStart;

  var memory;

  function _fire(data) {

    memory = options === 'memory' && data;

    firingIndex =

      firingStart || 0;

    firingStart = 0;

    firingLength = list.length;

    for (; list && firingIndex < firingLength; firingIndex++) {

      if (list[firingIndex](data) === false && options === 'stopOnFalse') {

        break;

      }

    }

  }

  self = {

    add: function(fn) {

      var start = list.length;

      if (options == 'unique') {

        if (-1 === list.indexOf(fn)) {

          list.push(fn)

        }

      } else {

        list.push(fn)

      }

      if (memory) {

        firingStart = start; //获取最后一值

        _fire(memory);

      }

    },

    fire: function(args) {

      if (list) {

        _fire(args)

      }

    }

  }

  return self;

}

function fn1( value ){

    show( value );

    return false;

}

function fn2( value ){

    fn1( "fn2 says: " + value );

    return false;

}

var callbacks = Callbacks('stopOnFalse');

callbacks.add(fn1);

callbacks.fire("foo1");

callbacks.add(fn2);

callbacks.fire("foo2");

</script>

</body>

</html>

相关文章