您的位置：首页 > 其它

一个普通的 Zepto 源码分析（二） - ajax 模块

2017-08-13 16:16 766 查看

一个普通的 Zepto 源码分析（二） - ajax 模块

普通的路人，普通地瞧。分析时使用的是目前最新 1.2.0 版本。

Zepto 可以由许多模块组成，默认包含的模块有 zepto 核心模块，以及 event 、 ajax 、 form 、 ie ，其中 ajax 模块是比较重要的模块之一，我们可以借助它提供的方法去做一些网络请求，还可以监听它的生命周期事件。

Zepto 基本模块之 ajax 模块

我们都已经知道 Zepto 插件的一般形式是把

Zepto

对象传入给

形参，那么可以先搜索

$.

开头的代码段，从暴露的函数入手来分析整个代码结构。

代码结构与分析

删减出外形：

;(function($){
// Number of active Ajax requests
$.active = 0

$.ajaxJSONP = function(options, deferred){...}

$.ajaxSettings = {...}

$.ajax = function(options){...}

$.get = function(/* url, data, success, dataType */){...}

$.post = function(/* url, data, success, dataType */){...}

$.getJSON = function(/* url, data, success */){...}

$.fn.load = function(url, data, success){...}

$.param = function(obj, traditional){...}
})(Zepto)

另由静态分析可知：

$.get()

、

$.post()

、

$.getJSON()

、

$.fn.load()

均调用了

$.ajax()

和

parseArguments()

，说明
$.ajax()
才是我们主要分析的目标，后者则是处理函数参数的关键；

$.param()

、

$.ajax()

、

$.ajaxJSONP()

均调用了

$.isFunction()

，这个倒是没有什么好纠结的，就是用了 Zepto 核心定义的一个判断传入参数是否为函数的函数；

$.ajax()

操作、返回的是一个原生的 xhr 对象，调用了很多 ajax 开头的内部函数来完成生命周期的控制封装。

参数规格化与 MIME

先来看看

parseArguments()

都干了些什么：

// handle optional data/success arguments
function parseArguments(url, data, success, dataType) {
// 参数重载
if ($.isFunction(data)) dataType = success, success = data, data = undefined
if (!$.isFunction(success)) dataType = success, success = undefined
// 返回规格化对象
return {
url: url
, data: data
, success: success
, dataType: dataType
}
}

它的参数覆盖了我们之前提到的四个调用者的参数。

在前两行我们可以看到，它做了一个顺移来完成对重载调用格式的支持。比如

$.get(url, function(data, status, xhr){ ... })

。这个是简单判断参数是否为函数来完成的，有两个缺点，一是会重复判断

success

，二是当只传两个参数时会做冗余赋值。

那么这个函数的作用就是参数规格化。然而.. 在 Zepto 文档上并没有看到对

dataType

的说明，略坑？

我们已知

$.ajaxSettings

里有一个

accepts

属性，文档上说是根据

dataType

来请求服务器的，而代码注释里则说这是一个 Mapping ；另外根据对

$.ajax()

的静态分析，我们还有一个

mimeToDataType()

，它根据输入的 MIME 字符串来输出内部定义的 dataType ：

var scriptTypeRE = /^(?:text|application)\/javascript/i,
xmlTypeRE = /^(?:text|application)\/xml/i,
jsonType = 'application/json',
htmlType = 'text/html'

$.ajaxSettings = {
// MIME types mapping
// IIS returns Javascript as "application/x-javascript"
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json:   jsonType,
xml:    'application/xml, text/xml',
html:   htmlType,
text:   'text/plain'
}
}

function mimeToDataType(mime) {
if (mime) mime = mime.split(';', 2)[0]
return mime && ( mime == htmlType ? 'html' :
mime == jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml' ) || 'text'
}

其中

mime.split(';', 2)

限定了只能用一个分号分成两部分，但我质疑它的效果.. 显然限定为 1 是更好的。

get 与 post

接下来就可以来看 get/post 方法了：

$.get = function(/* url, data, success, dataType */){
return $.ajax(parseArguments.apply(null, arguments))
}

$.post = function(/* url, data, success, dataType */){
var options = parseArguments.apply(null, arguments)
options.type = 'POST'
return $.ajax(options)
}

$.getJSON = function(/* url, data, success */){
var options = parseArguments.apply(null, arguments)
options.dataType = 'json'
return $.ajax(options)
}

嗯，没什么好分析的，

apply

也是很常见的用法。但是我们确定之前是没有

type

属性的，那么可以猜测

$.ajax()

还会对

options

作进一步处理，比如合并

$.ajaxSettings

中的设置等等。

load()

函数

这是挂到原型上的，我们已知 Zepto 调用原型函数前都会把自己弄成一个类数组，也就是自己定义的集合 Collection 。

文档上说这个方法可以给一个集合的元素用 GET Ajax 加载给定 URL 的 HTML 内容，还可以同时指定一个 CSS 选择器，使其只加载符合这个选择器的内容。而指定了选择器以后，加载内容中的 script 则不会被执行。来看看是怎么做的：

$.fn.load = function(url, data, success){
if (!this.length) return this
var self = this, parts = url.split(/\s/), selector,
options = parseArguments(url, data, success),
callback = options.success
if (parts.length > 1) options.url = parts[0], selector = parts[1]
options.success = function(response){
self.html(selector ?
$('<div>').html(response.replace(rscript, "")).find(selector)
: response)
callback && callback.apply(self, arguments)
}
$.ajax(options)
return this
}

这个

callback

操作好像挺迷的，前面多传了

success

进去，多做了一次赋值。

同样也没多少好分析的，就是给 Ajax 添加了一个成功回调，用来设置元素的内容，并代理了传入的回调。至于

.find()

是跟 jQuery 一样的实现，当在一个集合上调用时，就筛出元素。

param()

函数

这个函数的扇入扇出也是比较少的，可以先分析。那么这个方法也是一个序列化函数，可以把一个（狭义的）对象序列化成编码 URL 字符串，当然也可以接收一个数组，但只接收

serializeArray

格式的。

var escape = encodeURIComponent

function serialize(params, obj, traditional, scope){
var type, array = $.isArray(obj), hash = $.isPlainObject(obj)
$.each(obj, function(key, value) {
type = $.type(value)
// 关注点 4 （递归进来）
if (scope) key = traditional ? scope :
scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']'
// 关注点 2 （初始入口）
// handle data in serializeArray() format
if (!scope && array) params.add(value.name, value.value)
// 关注点 3
// recurse into nested objects
else if (type == "array" || (!traditional && type == "object"))
serialize(params, value, traditional, key)
else params.add(key, value)
})
}

$.param = function(obj, traditional){
var params = []
// 关注点 2
params.add = function(key, value) {
if ($.isFunction(value)) value = value()
if (value == null) value = ""
this.push(escape(key) + '=' + escape(value))
}
// 关注点 1
serialize(params, obj, traditional)
return params.join('&').replace(/%20/g, '+')
}

这次就不从

serialize()

开始看了，当然是从短的开始看啦！我说的短，不是代码有多少行，而是除去赋值操作后，把字面量压成一行后等等，还能剩下多短的结构。

那么我们可以看到

$.param()

里做了一个临时数组

params

用于存放每个键值对的序列化结果，最后 join 到一起做修补替换。关键点在

add()

函数，如果

value

是一个函数，则调用并获得其返回值。但是.. 如果其返回值或者本来就是

null

或

undefined

应该返回空值吗？这点我不敢苟同，就算不会解析错误，空键不如干脆不要。至于改写

escape

看起来也没什么必要.. 最多就是提醒写插件的开发者.. 直接调用就好了哇..

接下来就是看起来很长的

serialize()

函数啦。初步目测是一个递归，用于处理嵌套情况。那么三个局部变量一个是拿到小写的常见类型名，后两个是布尔值，相信不陌生。文件内搜索发现只有来自

$.param()

的引用，那么可以断定第二个 if 才是初始入口，这里是处理

serializeArray

的键值对象格式。而如果是普通对象 k-v 对的值是数组或对象的话，就进入递归调用把子结构也序列化，否则直接把 k-v 对加入

params

数组中。

要注意的是，如果设置为传统的浅序列化模式，嵌套对象值会被无情抛弃成

[object Object]

也就是

%5Bobject+Object%5D

。而数组的 key 则是不带方括号的表示形式，在 Zepto 上是无论嵌套多少层数组，都会处理成同 key 而不同 value 的多个键值对，但 jQuery 更新了其实现，它是无论嵌套多少层放在同一个键值对中，用英文逗号隔开，如下：

decodeURIComponent($.param({a:1,b:[1,[2,22,[3,33,[4]]],5]},true))
// jQuery, "a=1&b=1&b=2,22,3,33,4&b=5"
// Zepto,  "a=1&b=1&b=2&b=22&b=3&b=33&b=4&b=5"

至于带方括号的非传统模式实现也比较简单，每次递归更新 key 就好了。

Ajax 生命周期及事件

一共 7 个，都可以在官方文档找到说明的。其中

ajaxStart

和

ajaxStop

事件只有设置为

global: true

才会在 document 上被激发，其余则都是全局事件，在 document 或指定 DOM 节点上激发并冒泡。至于怎么捕获事件，相信熟悉的人都不陌生（好像是废话）

// trigger a custom event and return false if it was cancelled
function triggerAndReturn(context, eventName, data) {
var event = $.Event(eventName)
$(context).trigger(event, data)
return !event.isDefaultPrevented()
}

// trigger an Ajax "global" event
function triggerGlobal(settings, context, eventName, data) {
if (settings.global) return triggerAndReturn(context || document, eventName, data)
}
// 关注点 1
// Number of active Ajax requests
$.active = 0

function ajaxStart(settings) {
// 关注点 2
if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')
}
function ajaxStop(settings) {
// 关注点 2
if (settings.global && !(--$.active)) triggerGlobal(settings, null, 'ajaxStop')
}

维护了一个

active

变量，在第一次发起 Ajax 或最后一次结束中被检查为 0 而触发事件，若事件没有被抑制则开始冒泡。没有用设计模式，应该也没必要。

// triggers an extra global event "ajaxBeforeSend" that's like "ajaxSend" but cancelable
function ajaxBeforeSend(xhr, settings) {
var context = settings.context
if (settings.beforeSend.call(context, xhr, settings) === false ||
triggerGlobal(settings, context, 'ajaxBeforeSend', [xhr, settings]) === false)
return false

triggerGlobal(settings, context, 'ajaxSend', [xhr, settings])
}
function ajaxSuccess(data, xhr, settings, deferred) {
var context = settings.context, status = 'success'
settings.success.call(context, data, status, xhr)
if (deferred) deferred.resolveWith(context, [data, status, xhr])
triggerGlobal(settings, context, 'ajaxSuccess', [xhr, settings, data])
ajaxComplete(status, xhr, settings)
}
// type: "timeout", "error", "abort", "parsererror"
function ajaxError(error, type, xhr, settings, deferred) {
var context = settings.context
settings.error.call(context, xhr, type, error)
if (deferred) deferred.rejectWith(context, [xhr, type, error])
triggerGlobal(settings, context, 'ajaxError', [xhr, settings, error || type])
ajaxComplete(type, xhr, settings)
}
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
function ajaxComplete(status, xhr, settings) {
var context = settings.context
settings.complete.call(context, xhr, status)
triggerGlobal(settings, context, 'ajaxComplete', [xhr, settings])
ajaxStop(settings)
}

剩下的 5 个事件在 4 个生命时期被激发。可以看到在

ajaxBeforeSend

里允许回调或事件被抑制，这时就会返回 false 进一步取消该 Ajax 。否则就触发

ajaxSend

事件了——不过显然，这个时候其实还没有真正地 send 出去，只是先激活了事件。同时我们也能看到，无论 Ajax 请求成功还是失败，最终都触发完成事件，最后“标志性”地终止——当它是最后一个 Ajax 时就会触发

ajaxStop

事件。

此外我们还可以知道， Ajax 回调是先于事件发生的；而如果是 Promise ，那么只有当

ajaxError

时才会 reject 。

$.ajax()

函数分析

终于到了重头戏了。至于剩余的其他边角函数可以一眼扫光，用到再说吧~

其实大部分代码都用来处理

settings

了，然而还是可以大致分为几部分的。

配置项的合并

$.ajax = function(options){
var settings = $.extend({}, options || {}),
deferred = $.Deferred && $.Deferred(),
urlAnchor, hashIndex
for (key in $.ajaxSettings) if (settings[key] === undefined) settings[key] = $.ajaxSettings[key]

ajaxStart(settings)
...
}

首先是浅复制

options

参数，接着继承

$.ajaxSettings

中的属性。同样是浅复制，后者不能覆盖用户传入的

options

参数.. 不过..

var settings = $.extend({}, $.ajaxSettings)
settings = $.extend(settings, options || {})

总感觉这是一样的，哈哈。毕竟 for...in 能检出原型上的属性，而反正

$.extend()

浅复制时内部实现也是纯 for...in ，好像没毛病。要是支持 ES5 的话直接

Object.create()

好像也.. 没毛病？

完成了设置项的初始化后，激发

ajaxStart

事件，开始做进一步的处理..

配置项的处理

var originAnchor = document.createElement('a')
// 关注点 1
originAnchor.href = window.location.href

$.ajax = function(options){
...
if (!settings.crossDomain) {
// 关注点 3
urlAnchor = document.createElement('a')
urlAnchor.href = settings.url
// cleans up URL for .href (IE only), see https://github.com/madrobby/zepto/pull/1049 urlAnchor.href = urlAnchor.href
// 关注点 2 （自动处理出的 protocol 和 host）
settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host)
}
...
}

对跨域属性的处理。这里有个特殊技巧，就是给

标签修改

href

属性后，浏览器会帮我们自动处理出

protocol

和

host

属性，这对判断是否跨域很有用，且不用调用冗长的解析库。

我们知道不跨域的标准是协议相同、主机地址/域名相同、端口号相同，而有人发现在 IE 且 80 端口下需要赋值完整地址才会把

host

解析出来，于是多了一个自赋值的 PR 。

function appendQuery(url, query) {
if (query == '') return url
// 关注点 3
return (url + '&' + query).replace(/[&?]{1,2}/, '?')
}

// serialize payload and append it to the URL for GET requests
function serializeData(options) {
// 关注点 4 （序列化 data 对象）
if (options.processData && options.data && $.type(options.data) != "string")
options.data = $.param(options.data, options.traditional)
// 关注点 5 （默认 GET 的 url 处理）
if (options.data && (!options.type || options.type.toUpperCase() == 'GET' || 'jsonp' == options.dataType))
options.url = appendQuery(options.url, options.data), options.data = undefined
}

$.ajax = function(options){
...
// 关注点 1
if (!settings.url) settings.url = window.location.toString()
// 关注点 2
if ((hashIndex = settings.url.indexOf('#')) > -1) settings.url = settings.url.slice(0, hashIndex)
serializeData(settings)
...
}

对

url

属性的处理。

window.location

的使用是 DOM 基础知识了，前面没用我猜是为了保持一致性？（逃

这里暂时不知道不保留 # 号后部分的作用，只知道 WHATWG 定义其为 URL-fragment ，没有很特别的说明，也许有时间要看看 Node 的解析说明。

搞定了 url 后就可以序列化数据了。根据调用关系，

appendQuery()

有 4 个扇入，唯一亮点就是每次把第一个出现的 & 或 ? 替换成 ? 。我认为这个实现是基于传入

url

是 / 结尾的假设的，那么其实判断最后一个字符来决定使用 & 或 ? 应当比查找要好很多。至于

serializeData

就是两种情况，如果提供的

options.data

不是一个字符串且需要自动序列化，那么就调用之前提到的

$.param()

进行序列化，否则如果是 jsonp 或者默认 GET 则处理进

options.url

里。

// 关注点 1
var dataType = settings.dataType, hasPlaceholder = /\?.+=\?/.test(settings.url)
if (hasPlaceholder) dataType = 'jsonp'
// 关注点 2 （要不要缓存的判断与处理）
if (settings.cache === false || (
(!options || options.cache !== true) &&
('script' == dataType || 'jsonp' == dataType)
))
settings.url = appendQuery(settings.url, '_=' + Date.now())
// 关注点 3 （ jsonp 的判断与处理）
if ('jsonp' == dataType) {
if (!hasPlaceholder)
settings.url = appendQuery(settings.url,
settings.jsonp ? (settings.jsonp + '=?') : settings.jsonp === false ? '' : 'callback=?')
return $.ajaxJSONP(settings, deferred)
}

根据

dataType

对缓存和 jsonp 的处理，也算一小段吧。不使用缓存的处理好理解，就是常见的加入时间参数。

而

hasPlaceholder

则是测试（贪婪匹配）最后一个键值对的值（即 url 中的 callbackName ）是否为 placeholder 即 ? 符。这个实现很奇怪，已经不符合现在的 jQuery 了，现在似乎是不能只在 url 指定

=?

的，必须设置

dataType: jsonp

才行。另外先补 url 再替换似乎也有些低效。

原生 xhr 对象的 header 设置

首先是对 request header 的设置：

var mime = settings.accepts[dataType],
headers = { }, /* 关注点 1 （暂存 header ） */
setHeader = function(name, value) { headers[name.toLowerCase()] = [name, value] },
xhr = settings.xhr(),
nativeSetHeader = xhr.setRequestHeader

if (deferred) deferred.promise(xhr)

if (!settings.crossDomain) setHeader('X-Requested-With', 'XMLHttpRequest')
// 关注点 2
setHeader('Accept', mime || '*/*')
// 关注点 3 （注意优先级）
if (mime = settings.mimeType || mime) {
if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0]
xhr.overrideMimeType && xhr.overrideMimeType(mime)
}
//关注点 4
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
//关注点 4
if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name])
xhr.setRequestHeader = setHeader

注意到在 v1.1.1 的 commit 记录里写到，为了支持在

beforeSend

生命期中（这个时候 xhr 对象还没 open ）调用

xhr.setRequestHeader()

修改 header ，用自定义的

setHeader()

函数暂存下来，到实际要操作打开 xhr 对象时再去调用原生方法设置 header 。

注意到这一句

setHeader('Accept', mime || '*/*')

， MDN 上是这么说的：

If no Accept header has been set using this, an Accept header with the */* is sent with the request when send() is called.

因此我认为可以改成

mime && setHeader('Accept', mime)

。

而紧接着的 if 具有一定的迷惑性，它其实是要用

accepts[dataType]

或者

mimeType

来重写响应头里的 MIME （赋值的优先级较低，其实完全可以拿出来赋值）。再下来就是针对非 GET 而又有上传数据的请求，将 Content-Type 改为 POST 格式。再下来就是存下自定义的 header 并重写方法了，可以看到自定义 header 会覆盖 Zepto 的默认值。

发送 xhr

$.ajax = function(options){
...
xhr.onreadystatechange = function(){...}
// 关注点 1
if (ajaxBeforeSend(xhr, settings) === false) {
xhr.abort()
ajaxError(null, 'abort', xhr, settings, deferred)
return xhr
}
// 关注点 2 （打开 xhr 对象）
var async = 'async' in settings ? settings.async : true
xhr.open(settings.type, settings.url, async, settings.username, settings.password)

if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]

for (name in headers) nativeSetHeader.apply(xhr, headers[name])
// 关注点 3 （超时的后续处理）
if (settings.timeout > 0) abortTimeout = setTimeout(function(){
xhr.onreadystatechange = empty
xhr.abort()
ajaxError(null, 'timeout', xhr, settings, deferred)
}, settings.timeout)
// 关注点 4
// avoid sending empty string (#319)
xhr.send(settings.data ? settings.data : null)
return xhr
}

先不管

onreadystatechange

回调，里面只有一个完成状态的判断。

这里终于跑到了第二个生命期，准备工作已经做好，触发可以被取消的

ajaxBeforeSend

事件，接着就是打开 xhr 了。这里有一个点是超时的处理，把

onreadystatechange

回调设置为空我认为是一个收尾工作，比如

$.ajax()

返回的 xhr 对象也可以重新打开，这时候显然不希望还是原来的回调。另外不使用原生超时事件的原因应该是 Android 4.4 的浏览器还不支持。

最后

xhr.send()

注释了对 #319 的修补。这个 issue 的大意是当在 Chrome 上 POST 的数据为空字符串时（经过上面的处理，传入的

data

变为了

undefined

），会触发一个 CORS 错误。应该是 11 年 Chrome 上的 BUG ，现在我无法复现了。

onreadystatechange()

回调

;(function($){
var blankRE = /^\s*$/
...
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
xhr.onreadystatechange = empty
clearTimeout(abortTimeout)
var result, error = false
// 关注点 1 （正常状态码的判断）
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'))
// 关注点 2 （响应数据流）
if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob')
result = xhr.response
else {
result = xhr.responseText
// 关注点 3 （ evel() 的间接调用与数据类型判断）
try {
// http://perfectionkills.com/global-eval-what-are-the-options/ // sanitize response accordingly if data filter callback provided
result = ajaxDataFilter(result, dataType, settings)
if (dataType == 'script')    (1,eval)(result)
else if (dataType == 'xml')  result = xhr.responseXML
else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result)
} catch (e) { error = e }

if (error) return ajaxError(error, 'parsererror', xhr, settings, deferred)
}

ajaxSuccess(result, xhr, settings, deferred)
} else {
ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred)
}
}
}
...
}

对于本地文件（即

file:

协议头）浏览器的状态码会是 0 。而如果是浏览器取消了 xhr 请求则触发 abort 类型的

ajaxError

事件，如宿主机的网络连接变化 / 中断了等。

有意思的点是

responseType

属性。两种类型我都没见过，据 MDN 是用于二进制数据传输，由

.response

返回相应的对象。

一个奇怪的技巧是如代码注释所示，使用间接调用的形式

(1,eval)()

来避免污染外层作用域。再吐个槽，对

dataType

的赋值可以放进 try 块里的。

$.ajaxJSONP()

函数

接下来看下最后一个函数和

$.ajax()

相比有哪些不同。在文档上标为废弃，实际上是不建议直接使用。而在上面的代码我们也看到

$.ajaxJSONP()

在

$.ajax()

中的调用是发生在事件

ajaxStart

事件之后、配置项合并完成后、设置 header 之前的。

;(function($){
var jsonpID = +new Date()
...

$.ajaxJSONP = function(options, deferred){
if (!('type' in options)) return $.ajax(options)
// 关注点 2 （回调函数名的处理）
var _callbackName = options.jsonpCallback,
callbackName = ($.isFunction(_callbackName) ?
_callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
script = document.createElement('script'),
originalCallback = window[callbackName],
responseData,
abort = function(errorType) {
$(script).triggerHandler('error', errorType || 'abort')
}, /* 关注点 1 （只有取消方法的 xhr 对象） */
xhr = { abort: abort }, abortTimeout

if (deferred) deferred.promise(xhr)

$(script).on('load error', function(e, errorType){...})

if (ajaxBeforeSend(xhr, options) === false) {
abort('abort')
return xhr
}
// 关注点 3 （对自动回调的代理包装，先拿到数据）
window[callbackName] = function(){
responseData = arguments
}
// 关注点 4 （最后一个 xxx=? 的替换）
script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName)
document.head.appendChild(script)

if (options.timeout > 0) abortTimeout = setTimeout(function(){
abort('timeout')
}, options.timeout)

return xhr
}
...
}

这里的 xhr 对象就不是真正的 XMLHttpRequest 实例了，而是一个只带

abort()

方法的 mock 对象。

首先关注

callbackName

，允许字符串，也允许由一个函数返回，或由 Zepto 指定一个值。根据 Zepto 的 make 脚本，几个插件是简单连接到一起的，可以认为这个

jsonpID

的初始值大概是加载执行 Zepto 的时间，有一定的随机效果（时间一般不可逆），且每次自增（原单位是毫秒）保证了每次都会拿到最新版本而不是缓存。

另外有一个

originalCallback

的处理，挂钩我们原来的回调函数，先对响应数据做空值判断，再传回来。当然如果我们没有回调函数，那么就只能在

ajaxSuccess

中得到数据了，因为 Zepto 生成的“函数名”本质上只是个字符串而已。

$(script).on('load error', function(e, errorType){
clearTimeout(abortTimeout)
$(script).off().remove()

if (e.type == 'error' || !responseData) {
ajaxError(null, errorType || 'error', xhr, options, deferred)
} else {
ajaxSuccess(responseData[0], xhr, options, deferred)
}
// 关注点 1 （自动生成的回调名只是字符串）
window[callbackName] = originalCallback
if (responseData && $.isFunction(originalCallback))
originalCallback(responseData[0])
// 关注点 2 （收尾）
originalCallback = responseData = undefined
})

abort()

函数会触发一次

error

事件，而

$(script).off().remove()

不论如何都会移除之前创建的

script

元素（当然也先解绑了回调函数本身）。

本文基于

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议发布，欢迎引用、转载或演绎，但是必须保留本文的署名 BlackStorm 以及本文链接 http://www.cnblogs.com/BlackStorm/p/Zepto-Analysing-For-Ajax-Module.html ，且未经许可不能用于商业目的。如有疑问或授权协商请与我联系。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

一个普通的 Zepto 源码分析（二） - ajax 模块