使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码


Posted in Javascript onDecember 30, 2010

情景
如何在特定的请求上实现"ajaxStart"的效果?
首先,重写Ajax方法的代价太高,仍然可以利用jQuery自身的Ajax Events。
Ajax触发的全局事件会像一个标准事件一样传播到所有DOM节点上。层级:jQuery Events > Ajax Events > 自定义Ajax事件。
实现

Wo = window.Wo || {}; 
Wo.ajax = { 
spinner : $([]) 
,init : function() { 
var $spinner = this.spinner = $('#ajax-loading'); 
var show = function(e) { 
if(e.namespace === 'Wo') $spinner.show(); 
}; 
var hide = function(e) { 
$spinner.hide(); 
}; 
$spinner.bind({ 
'ajaxStart.Wo' : show 
,'ajaxStop.Wo' : hide 
,'ajaxError.Wo' : hide 
}); 
this.adapt(['getJSON','get','post','ajax']); 
} 
// 预备发送请求 
,_prepare : function() { 
this.spinner.trigger('ajaxStart.Wo'); 
} 
// 接口批量变更 
,adapt : function(fns) { 
var self = this; 
$.each(fns,function(i,fn) { 
Wo[fn] = function() { 
self._prepare(); 
$[fn].apply(this,arguments); 
} 
}); 
} 
};

有两种方法可以判断出触发的事件是否为特定的事件:
确定的命名空间。
在触发时传递额外的参数给事件处理程序。
这里用事件的命名空间来进行触发来源的判断。adapt方法相当于适配器的应用,用一套改善的接口替代了另一套接口。
如果要增加load方法,稍微麻烦一点,因为有可能是ajax方法或者元素的onload事件。
要添加一个代理方法,并进行类型判断:
var _load = $.fn.load; 
$.fn.load = function() { 
$.type(arguments[0]) === 'string' && self._prepare(); 
_load.apply(this,arguments); 
return this; 
};

使用
所有方法参数仍与原先一致:
Wo.post(url, [data,] callback)
Javascript 相关文章推荐
javascript中window.event事件用法详解
Dec 11 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 #Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 #Javascript
js TextArea的选中区域处理
Dec 28 #Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 #Javascript
JS date对象的减法处理实现代码
Dec 28 #Javascript
javascript中检测变量的类型的代码
Dec 28 #Javascript
javascript中的作用域scope介绍
Dec 28 #Javascript
You might like
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
华为c/c++笔试题
2016/01/25 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
毕业生自荐书
2013/12/18 职场文书
护士实习鉴定范文
2013/12/22 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
财务总监管理职责范文
2014/03/09 职场文书
政府信息公开实施方案
2014/05/09 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2015年话务员工作总结
2015/04/29 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python