给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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
js调用flash的效果代码
Apr 26 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue路由教程之静态路由
Sep 03 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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导入Excel到MySQL的方法
2011/04/23 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
聊聊python中的循环遍历
2020/09/07 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
送货司机岗位职责
2013/12/11 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2015中学学校工作总结
2015/07/20 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers