给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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
jquery maxlength使用说明
Sep 09 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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并发访问实例代码
2012/09/06 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
建筑工地标语
2014/06/18 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
电力工程合作意向书
2015/05/11 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript