|
jQuery的delegate机制可以将监听函数注册到父节点上, 子节点上触发的事件会根据selector被自动派发到相应的handlerFn上. 这样一来现在注册就可以监听未来创建的节点.
复制代码 代码如下:$('#myList').delegate('li.trigger', 'click', handlerFn);
最近jQuery1.7中统一了bind, live和delegate机制, 天下一统, 只有on/off.
复制代码 代码如下:$('li.trigger').on('click', handlerFn);nbsp; // 相当于bind
$('#myList').on('click', 'li.trigger', handlerFn);nbsp; // 相当于delegate
nbsp;nbsp;nbsp;
8. 动画队列：全局时钟协调
抛开jQuery的实现不谈, 先考虑一下如果我们要实现界面上的动画效果, 到底需要做些什么#63; 比如我们希望将一个div的宽度在1秒钟之内从100px增加到200px. 很容易想见, 在一段时间内我们需要不时的去调整一下div的宽度, [同时]我们还需要执行其他代码. 与一般的函数调用不同的是, 发出动画指令之后, 我们不能期待立刻得到想要的结果, 而且我们不能原地等待结果的到来. 动画的复杂性就在于:一次性表达之后要在一段时间内执行,而且有多条逻辑上的执行路径要同时展开, 如何协调#63;
伟大的艾萨克.牛顿爵士在《自然哲学的数学原理》中写道:"绝对的、真正的和数学的时间自身在流逝着". 所有的事件可以在时间轴上对齐, 这就是它们内在的协调性. 因此为了从步骤A1执行到A5, 同时将步骤B1执行到B5, 我们只需要在t1时刻执行[A1, B1], 在t2时刻执行[A2,B2], 依此类推.
nbsp;nbsp;nbsp; t1 | t2 | t3 | t4 | t5 ...
nbsp;nbsp;nbsp; A1 | A2 | A3 | A4 | A5 ...
nbsp;nbsp;nbsp; B1 | B2 | B3 | B4 | B5 ...
具体的一种实现形式可以是
nbsp; A. 对每个动画, 将其分装为一个Animation对象, 内部分成多个步骤.
nbsp;nbsp;nbsp;nbsp;nbsp; animation = new Animation(div,"width",100,200,1000,
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; 负责步骤切分的插值函数,动画执行完毕时的回调函数);
nbsp; B. 在全局管理器中注册动画对象
nbsp;nbsp;nbsp;nbsp;nbsp; timerFuncs.add(animation);
nbsp; C. 在全局时钟的每一个触发时刻, 将每个注册的执行序列推进一步, 如果已经结束, 则从全局管理器中删除.
复制代码 代码如下:for each animation in timerFuncs
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; if(!animation.doOneStep())
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; timerFuncs.remove(animation)
解决了原理问题,再来看看表达问题, 怎样设计接口函数才能够以最紧凑形式表达我们的意图#63; 我们经常需要面临的实际问题:
nbsp; A. 有多个元素要执行类似的动画
nbsp; B. 每个元素有多个属性要同时变化
nbsp; C. 执行完一个动画之后开始另一个动画
jQuery对这些问题的解答可以说是榨尽了js语法表达力的最后一点剩余价值.
复制代码 代码如下:$('input')
nbsp;nbsp;nbsp;nbsp; .animate({left:'+=200px',top:'300'},2000)
nbsp;nbsp;nbsp;nbsp; .animate({left:'-=200px',top:20},1000)
nbsp;nbsp;nbsp;nbsp; .queue(function(){
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; // 这里dequeue将首先执行队列中的后一个函数,因此alert("y")
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; $(this).dequeue();
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; alert('x');
nbsp;nbsp;nbsp;nbsp;nbsp; })
nbsp;nbsp;nbsp;nbsp; .queue(function(){
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; alert("y");
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; // 如果不主动dequeue, 队列执行就中断了,不会自动继续下去.
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; $(this).dequeue();
nbsp;nbsp;nbsp;nbsp;nbsp; });
A. 利用jQuery内置的selector机制自然表达对一个集合的处理.
B. 使用Map表达多个属性变化
C. 利用微格式表达领域特定的差量概念. '+=200px'表示在现有值的基础上增加200px
D. 利用函数调用的顺序自动定义animation执行的顺序: 在后面追加到执行队列中的动画自然要等前面的动画完全执行完毕之后再启动.
nbsp;nbsp;
jQuery动画队列的实现细节大概如下所示,
A. animate函数实际是调用queue(function(){执行结束时需要调用dequeue,否则不会驱动下一个方法})
queue函数执行时, 如果是fx队列, 并且当前没有正在运行动画(如果连续调用两次animate,第二次的执行函数将在队列中等待),则会自动触发dequeue操作, 驱动队列运行.
如果是fx队列, dequeue的时候会自动在队列顶端加入"inprogress"字符串,表示将要执行的是动画.
B. 针对每一个属性，创建一个jQuery.fx对象。然后调用fx.custom函数(相当于start)来启动动画。
C. custom函数中将fx.step函数注册到全局的timerFuncs中，然后试图启动一个全局的timer.
timerId = setInterval( fx.tick, fx.interval );
D. 静态的tick函数中将依次调用各个fx的step函数。step函数中通过easing计算属性的当前值，然后调用fx的update来更新属性。
E. fx的step函数中判断如果所有属性变化都已完成,则调用dequeue来驱动下一个方法。
（编辑：温州站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
