jQuery 类库的设计(2)_H5之家 - 中国HTML5教程资源分享第一站

$('.a').on('click', fn1);

$('.a').on('blur', fn2);

$('.a').on('focus', fn3);

// 其实DOM元素(.a)并没有直接与fn1、fn2、fn3关联起来，而是通过dispatch进行事件分发

// 用伪代码可以表示如下：

$('.a').on('click blur focus', dispatch);

function dispatch(type) {

var fn;

if(type === 'click') {

fn = fn1;

} else if(type === 'blur') {

fn = fn2;

} else if (type === 'focus') {

fn = fn3;

}

return fn;

}

复制代码

　　4. 2 事件移除

　　当移除事件时，内部方法的调用链为：unbind/undelagate/die()—>.off()—>$.event.remove()—>$._data()/removeEventListener/detachEvent()。事件的移除，也就是从数据存储对象$.cache中移除相应的事件对象，当事件对象events为空时，则移除整个数据缓存对象。

　　4.3 事件手动触发

　　在jquery中，可以手工触发DOM事件或自定义事件。内部方法的调用链为：.trigger/triggerHandler() —> $.event.trigger() — > $.event.dispatch(主监听函数) — >事件的监听函数。

　　还有一个需要关注的问题就是，如何事件事件的冒泡呢？方法其实很简单，就是根据DOM的结构向上查询出元素的祖先元素，一直到window对象，这样就构成了元素的冒泡路径，然后触发这个路径上元素的相应事件。这也是jquery可以模拟focus、blur、change、submit进行事件冒泡的关键环节。

// 寻找冒泡路径

var eventPath = [];

for(;cur; cur = cur.parentNode) {

eventPath.push([cur, type]);

}

// 执行路径上的监听函数

for() {

cur = eventPath[i][0];

type = eventPath[i][1];

hanle = $._data(cur, "events")[type];

hanle.apply(cur);

}

复制代码

　　5. 异步请求ajax

1.jpg (56.19 KB, 下载次数: 0)

下载附件

4 天前上传

　　异步请求是jquery在总体可以分为三部分：核心实现、便捷方法、ajax全局事件。其中该模块依赖于Deferred模块提供的异步编程模块，可以方便进行回调函数的注册，例如：

$(url, options).then(successFn, failFn);

复制代码

　　其中核心方法的实现主要包括以下骤：

参数的设置：在jQuery所有API中，.ajax的参数种类应该是对多的，里面的参数看得人掩护缭乱。但是其中最终的有url、type、dataType、data，尤其是dataType的设置对于结果的应该很长大，所以有大量代码是对这一步的处理。

前置过滤函数处理：主要是对json、jsonp、script三种数据类型的处理，在请求发送前对其进行过滤处理

请求发出：这里请求的发出包括两种方式，分别为依赖于XMLHttpRequest和script标签。如果浏览器允许跨域，则仅需使用XMLHttpRequest就足够了。

回调函数的执行：这里的回调函数包括很多种，请求发出前、开始接受数据、数据接受完成等等。

　　6. 动画解析

1.jpg (31.23 KB, 下载次数: 0)

下载附件

4 天前上传

　　在jQuery中，动画show、hide、fadeIn、fadeOut等均要调用Animation方法，也就是说Animation是最基本的入口函数。在上图中可以看到该入口函数包括了三个过程：参数配置、生成动画函数、动画函数执行。下面展开包括以下细节：

参数配置：主要有三个参数，duration表示动画的执行时间；easing为动画每一帧的变化速度，目前jQuery中仅存在两种帧变化函数：线性(linear)变化、余弦变化(swing)，要用其他变化函数只能修改$.fx.easing对象；complete为动画完成之后需要执行的回调函数。

生成动画函数doAnimation：jQuery会给每一个样式生成一个$.fx对象，该对象用于实现动画效果。默认情况下，每隔13ms会执行一帧动画，然后更新页面的样式。

动画执行：如果动画不需要排队，在生成完动画函数之后，就立即执行动画函数doAnimation；反之，将doAnimation放入队列queue中进行排队。当所有动画均完成之后，就可以执行回调函数complete了。

　　当然，jQuery内部实现比较复杂，考虑了函数暂停、样式临时修改(修改inline元素的width/height时，会临时将其display修改为inline-block)、清空动画队列等操作。