1.现在看看对JSONP的封装
$.ajaxJSONP = function(options, deferred){
if (!('type' in options)) return $.ajax(options) //不存在type 直接调用$.ajax
var _callbackName = options.jsonpCallback, //回调函数名称
callbackName = ($.isFunction(_callbackName) ?
_callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
script = document.createElement('script'), //创建一个script标签
originalCallback = window[callbackName],
responseData,
//绑定一个错误函数
abort = function(errorType) {
//触发script的 error 时间
$(script).triggerHandler('error', errorType || 'abort')
},
xhr = { abort: abort }, abortTimeout
if (deferred) deferred.promise(xhr)
$(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) //成功
}
window[callbackName] = originalCallback
if (responseData && $.isFunction(originalCallback))
originalCallback(responseData[0])
//清除字段
originalCallback = responseData = undefined
})
//执行开始函数,返回false 则停止
if (ajaxBeforeSend(xhr, options) === false) {
abort('abort')
return xhr
}
window[callbackName] = function(){
//回调函数,这个函数会在后端执行,并传入数据,我们传递给responseDate字段,然后就会去执行 script 加载完成
responseData = arguments
}
//设置请求的地址并且加上回调函数名称
script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName)
document.head.appendChild(script)
//设置超时处理
if (options.timeout > 0) abortTimeout = setTimeout(function(){
abort('timeout')
}, options.timeout)
return xhr
}
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 = 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 */)
get / post / getJson 在 ajax的基础上封装了再次封装了。
zepto基本差不多完成了,
看了之后,不难发现,zepto也就有几大模块: 选择器 , 一些js原生方法的封装 , 事件模型模块 , 再就是 ajax 的封装 。
代码仅供参考,具体功能可以自己扩展。
http://www.cnblogs.com/jiebba/p/6529854.html
http://www.cnblogs.com/jiebba 我的博客,来看吧!
如果有错误,请留言修改下 哦!