给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 相关文章推荐
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
微信小程序实现星级评价
Nov 20 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
php Session存储到Redis的方法
2013/11/04 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JavaScript 创建对象
2009/07/17 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js中document.write的那点事
2014/12/12 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vue实现拖拽效果
2019/12/23 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python实现程序的单一实例用法分析
2015/06/03 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
通过python检测字符串的字母
2020/02/18 Python
Python必须了解的35个关键词
2020/07/16 Python
什么是类的返射机制
2016/02/06 面试题
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
财务会计人员岗位职责
2013/11/30 职场文书
初一家长会邀请函
2014/01/31 职场文书
小学总务工作总结
2015/08/13 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
Go语言入门exec的基本使用
2022/05/20 Golang