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 我的博客,来看吧!
如果有错误,请留言修改下 哦!