给jQuery方法添加回调函数一款插件的应用


Posted in Javascript onJanuary 21, 2013

插件源码 jquery.callback.js
插件开源地址: https://gist.github.com/4580276

/** 
* @fileOverview 本插件用于给jQuery方法添加回调函数,可在类方法或实例方法添加任何自定义的回调函数而不影响原方法的行为 
* @dependency jQuery1.7+ 
 * @author huhai 
* @since 2013-01-21 
*/ 
(function($){ 
$._callbacks = {}; 
$._callbacks_ = {}; 
$._alias = {}; 
$._alias_ = {}; 
$.extend({ 
/** 
* @decription 给方法添加回调函数 
* @param funcName : string 需要添加回调的函数名称 
* @param callback : function 回调函数(如需移除,不要使用匿名方法) 
* @param static : boolean 是否是类方法,默认为false 
*/ 
addCallback : function(funcName, callback, static){ 
if("string" === typeof(funcName) && $.isFunction(callback)){ 
if(static === true){ 
if($[funcName] && $.isFunction($[funcName])){ 
if(!this._callbacks[funcName]){ 
this._callbacks[funcName] = $.Callbacks(); 
} 
this._callbacks[funcName].add(callback); 
if(!$._alias[funcName]){ 
$._alias[funcName] = $[funcName];//寄存原来的类方法 $[funcName] = function(){//代理类方法; 
var result = $._alias[funcName].apply(this, arguments); 
$._callbacks[funcName].fireWith(this, arguments); 
return result; 
}; 
} 
} 
}else{ 
if($.fn[funcName] && $.isFunction($.fn[funcName])){ 
if(!this._callbacks_[funcName]){ 
this._callbacks_[funcName] = $.Callbacks(); 
} 
this._callbacks_[funcName].add(callback); 
if(!$._alias_[funcName]){ 
$._alias_[funcName] = $.fn[funcName];//寄存原来的实例方法 
$.fn[funcName] = function(){//代理实例方法; 
var result = $._alias_[funcName].apply(this, arguments); 
$._callbacks_[funcName].fireWith(this, arguments); 
return result; 
}; 
} 
} 
} 
} 
}, 
/** 
* @decription 移除给方法添加的回调函数 
* @param funcName : string 已添加回调的函数名称 
* @param callback : function 回调函数 
* @param static : boolean 是否是类方法,默认为false 
*/ 
removeCallback: function(funcName, callback, static){ 
if("string" === typeof(funcName) && $.isFunction(callback)){ 
if(static === true){ 
if($[funcName] && $.isFunction($[funcName])){ 
if(this._callbacks[funcName]){ 
this._callbacks.remove(callback); 
} 
} 
}else{ 
if($.fn[funcName] && $.isFunction($.fn[funcName])){ 
if(this._callbacks_[funcName]){ 
this._callbacks_.remove(callback); 
} 
} 
} 
} 
} 
}); 
})(jQuery);

用法实例:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<script type="text/javascript" src="./js/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="./js/jquery.callback.js"></script> 
<script type="text/javascript" src="./js/mustache.js"></script> 
<script type="text/tmpl" id="dataTable"> 
<table> 
<tr> 
<td><a href="javascript:void(0);">11</a></td> 
<td><a href="javascript:void(0);">12</a></td> 
<td><a href="javascript:void(0);">13</a></td> 
<td><a href="javascript:void(0);">14</a></td> 
<td><a href="javascript:void(0);">15</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">21</a></td> 
<td><a href="javascript:void(0);">22</a></td> 
<td><a href="javascript:void(0);">23</a></td> 
<td><a href="javascript:void(0);">24</a></td> 
<td><a href="javascript:void(0);">25</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">31</a></td> 
<td><a href="javascript:void(0);">32</a></td> 
<td><a href="javascript:void(0);">33</a></td> 
<td><a href="javascript:void(0);">34</a></td> 
<td><a href="javascript:void(0);">35</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">41</a></td> 
<td><a href="javascript:void(0);">42</a></td> 
<td><a href="javascript:void(0);">43</a></td> 
<td><a href="javascript:void(0);">44</a></td> 
<td><a href="javascript:void(0);">45</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">51</a></td> 
<td><a href="javascript:void(0);">52</a></td> 
<td><a href="javascript:void(0);">53</a></td> 
<td><a href="javascript:void(0);">54</a></td> 
<td><a href="javascript:void(0);">55</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">61</a></td> 
<td><a href="javascript:void(0);">62</a></td> 
<td><a href="javascript:void(0);">63</a></td> 
<td><a href="javascript:void(0);">64</a></td> 
<td><a href="javascript:void(0);">65</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">71</a></td> 
<td><a href="javascript:void(0);">72</a></td> 
<td><a href="javascript:void(0);">73</a></td> 
<td><a href="javascript:void(0);">74</a></td> 
<td><a href="javascript:void(0);">75</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">81</a></td> 
<td><a href="javascript:void(0);">82</a></td> 
<td><a href="javascript:void(0);">83</a></td> 
<td><a href="javascript:void(0);">84</a></td> 
<td><a href="javascript:void(0);">85</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">91</a></td> 
<td><a href="javascript:void(0);">92</a></td> 
<td><a href="javascript:void(0);">93</a></td> 
<td><a href="javascript:void(0);">94</a></td> 
<td><a href="javascript:void(0);">95</a></td> 
</tr> 
<tr> 
<td><a href="javascript:void(0);">101</a></td> 
<td><a href="javascript:void(0);">102</a></td> 
<td><a href="javascript:void(0);">103</a></td> 
<td><a href="javascript:void(0);">104</a></td> 
<td><a href="javascript:void(0);">105</a></td> 
</tr> 
</table> 
</script> 
<style type="text/css"> 
table{border-collapse: collapse;width:100%;} 
tr.zebra{background: #CCCCCC;} 
td{border:1px solid #000000;height:30px;} 
#queryResults{border:1px solid #CCCCCC;min-height: 200px;} 
</style> 
</head> 
<body> 
<h1>html test</h1> 
<div id="queryResults"> </div> 
</body> 
<script type="text/javascript" src="./js/test.js"></script> 
</html>

js
jQuery(function($){ 
$.addCallback("html", function(){ 
if(this.length == 1 && arguments.length > 0 && "string" === typeof(arguments[0])){ 
if(/<table[^>]*>.*<\/table>/i.test(arguments[0].replace(/\n/g))){ 
console.log("zebra table"); 
$("table:not(table.notZebra): tbody tr:odd", this).addClass("zebra"); 
} 
} 
}); 
$.addCallback("html", function(){console.log("callback 2");}); 
$.addCallback("html", function(){console.log("callback 3");}); 
$("#queryResults").html( 
Mustache.to_html($("#dataTable").html()) 
); 
});

运行结果
给jQuery方法添加回调函数一款插件的应用
Javascript 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 #Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 #Javascript
使用jquery实现图文切换效果另加特效
Jan 20 #Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 #Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 #Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 #Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php字符集转换
2017/01/23 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
YII框架关联查询操作示例
2019/04/29 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Python struct模块解析
2014/06/12 Python
Python中的元类编程入门指引
2015/04/15 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
安全生产月活动总结
2014/05/04 职场文书
运动会演讲稿
2014/05/07 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS