给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滚动条回到顶部的代码
Dec 06 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
YII路径的用法总结
2014/07/09 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
javascript消除window.close()的提示窗口
2015/05/20 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
如何利用python生成MD5并去重
2020/12/07 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
Exception类的常用方法
2012/06/16 面试题
中学生学雷锋演讲稿
2014/04/26 职场文书
考试保密承诺书
2014/08/30 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
mysql数据库实现设置字段长度
2022/06/10 MySQL