[javascript]  

插件源码 jquery.callback.js
插件开源地址:

插件源码 jquery.callback.js
插件开源地址:

本文实例讲述了jQuery插件扩展的方法。分享给大家供大家参考,具体如下:

1.引言

今天在学习《jQuery基础教程》在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性。对回调函数很陌生。研究了一下给的示例程序。感觉对回调函数有了基本的了解。记录下来,以备后用。

/** 

复制代码 代码如下:

复制代码 代码如下:

<script language="javascript" type="text/javascript">
function doSomething(callback) {
  // … 
  // Call the callback
  callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量
}
function foo1(a, b, c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes here
var foo2 = function(a,b,c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(function(a,b,c){
  alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here
});
</script>

2.定义

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法。

 * @fileOverview
本插件用于给jQuery方法添加回调函数,可在类方法或实例方法添加任何自定义的回调函数而不影响原方法的行为 

/**
* @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];//寄存原来的类方法

/**
* @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];//寄存原来的类方法

callback这个参数必须是函数才有效。才能起到回调的作用。

3.代码

JS代码

 1 (function($){
 2     $.fn.shadow = function(opts){
 3         //定义的默认的参数
 4         var defaults = {
 5             copies: 5,
 6             opacity:0.1,
 7             //回调函数
 8  copyOffset:function(index){
 9                 return{x:index,y:index};
10             }
11         };
12         //将opts的内容合并到default中。
13         var options = $.extend(defaults,opts);
14         return this.each(function(){
15             var $originalElement  = $(this);
16             //设置参数对象
17             for(var i=0;i<options.copies;i++)
18             {
19                 var offset = options.copyOffset(i);
20                 $originalElement
21                 .clone()
22                 .css({
23                     position:'absolute',
24                     left:$originalElement.offset().left + offset.x,
25                     top:$originalElement.offset().top + offset.y,
26                     margin:0,
27                     zIndex:-1,
28                     //设置参数对象
29                     opacity:options.opacity
30                 })
31                 .appendTo('body');
32             }
33         });
34     };
35 })(jQuery);
36 $(document).ready(function(){
37     $('h1').shadow({
38         copies:5,
39         copyOffset:function(index){
40         return {x:-index,y:-2 * index};
41         }
42     });
43 });

 * @dependency jQuery1.7+ 

$[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);

$[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);

<script language="javascript" type="text/javascript">
function doSomething(callback) {
  // … 
  // Call the callback
  if(typeof callback === 'function'){
    callback('stuff', 'goes', 'here'); // 给callback赋值,callback是个函数变量
  }else{
    alert('jb51.net');
  }
}
function foo1(a, b, c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes here
var foo2 = function(a,b,c) {
  // I'm the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(function(a,b,c){
  alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here
});
var foo3 = 'a';
doSomething(foo3);
</script>

4.分析

通过这段代码调试的时候进入的顺序,便可理解回调函数的机制。通过对黄背景的四段代码加入断点。程序将会以以下的顺序运行

39:先跑第39行,当DOM加载完毕后运行了shadow(),跑完39行并不会直接跑40行。而是直接调到了shadow()函数定义的地方。在这里只是声明了copyOffset的函数指针。

2:这时候查看opts里面的内容Object { copies=5, copyOffset=function()}从这里可以看出来copyOffset只是一个function(),

8:开始走默认参数的copyOffset,与39行一样,不会直接进入回调函数里面的内容。

19:走到这里时,需要将对CopyOffset发出请求并传入了i作为参数。这时候i就是回调函数的参数index。

40:由于13行的”var options =
$.Extend(defauflts,opts)”。opts的属性会覆盖掉default的属性,所以不会走9行默认的参数中的回调函数的执行方法,而是走了第40行的回调函数的方法。

 * @author huhai 

用法实例:
HTML

用法实例:
HTML

foo3不是函数的时候,弹出jb51.net

5.总结

从上面的分析可以看出,回调函数在参数中声明时,相当于只是声明了一个委托。等到用到这个参数的时候才会真正的执行回调函数里面的内容。

 * @since 2013-01-21 

复制代码 代码如下:

复制代码 代码如下:

jQuery实例

6.附html代码

图片 1图片 2

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4   <head>
 5     <meta charset="utf-8">
 6     <title>Developing Plugins</title>
 7 
 8     <link rel="stylesheet" href="08.css" type="text/css" />
 9     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
10 
11     <script src="jquery.js"></script>
12     <script src="jquery-ui-1.10.0.custom.min.js"></script>
13     <script src="08.js"></script>
14   </head>
15   <body>
16     <div id="container">
17       <h1>Inventory</h1>
18       <table id="inventory">
19         <thead>
20           <tr class="two">
21             <th>Product</th>
22             <th>Quantity</th>
23             <th>Price</th>
24           </tr>
25         </thead>
26         <tfoot>
27           <tr class="two" id="sum">
28             <td>Total</td>
29             <td></td>
30             <td></td>
31           </tr>
32           <tr id="average">
33             <td>Average</td>
34             <td></td>
35             <td></td>
36           </tr>
37         </tfoot>
38         <tbody>
39           <tr>
40             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
41             <td>4</td>
42             <td>2.50</td>
43           </tr>
44           <tr>
45             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
46             <td>12</td>
47             <td>4.32</td>
48           </tr>
49           <tr>
50             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
51             <td>14</td>
52             <td>7.89</td>
53           </tr>
54         </tbody>
55       </table>
56     </div>
57   </body>
58 </html>

Html代码

 

 */  

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”” 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”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”” 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”>

原函数

(function($){  

</div>
</body>
<script type=”text/javascript”
src=”./js/test.js”></script>
</html>

</div>
</body>
<script type=”text/javascript”
src=”./js/test.js”></script>
</html>

$.fn.citySelect=function(settings)

    $._callbacks = {};  

js

js

添加回调

    $._callbacks_ = {};  

复制代码 代码如下:

复制代码 代码如下:

$.fn.citySelect=function(settings, changeHandle) // 添加回调函数changeHandle

    $._alias = {};  

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(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())
);
});

给回调函数赋值

    $._alias_ = {};  

运行结果
图片 3

运行结果
图片 4

//选项变动赋值事件
var selectChange = function (areaType) { 
  if(typeof changeHandle === 'function'){ // 判断callback是否是函数
    var prov_id = prov_obj.get(0).selectedIndex;
    var city_id = city_obj.get(0).selectedIndex;
    var dist_id = dist_obj.get(0).selectedIndex;
    if(!settings.required){
      prov_id--;
      city_id--;
      dist_id--;
    };
    if(dist_id<0){
      var data = {
        prov: city_json.citylist[prov_id].p,
        city: city_json.citylist[prov_id].c[city_id].n,
        dist: null
      };
    }else{
      var data = {
        prov: city_json.citylist[prov_id].p,
        city: city_json.citylist[prov_id].c[city_id].n,
        dist: city_json.citylist[prov_id].c[city_id].a[dist_id].s
      };
    }
    changeHandle(data, areaType); // 返回两个处理好的数据
  }
};

  

jquery.callback.js 插件开源地址:
复制代码 代码如下: /** *
@fileOverview 本插件用于给jQuery方法添加回调函数,…

您可能感兴趣的文章:

  • jQuery
    回调函数(callback)的使用和基础
  • 浅谈jquery回调函数callback的使用
  • jQuery回调函数的定义及用法实例
  • 从零学jquery之如何使用回调函数
  • Jquery版本导致Ajax不执行success回调函数
  • jquery
    ajax的success回调函数中实现按钮置灰倒计时
  • jQuery Tips
    为AJAX回调函数传递额外参数的方法
  • jQuery
    AJAX回调函数this指向问题
  • jQuery学习笔记之回调函数

获取省市县数据data以及触发的change事件类型areaType

    $.extend({  

// 选择省份时发生事件
prov_obj.bind("change",function(){
    cityStart();
    selectChange('prov'); // 返回数据
});
// 选择市级时发生事件
city_obj.bind("change",function(){
    distStart();
    selectChange('city'); // 返回数据
});
// 选择区级时发生事件
dist_obj.bind("change",function(){
    selectChange('dist'); // 返回数据
});

  

在各个事件中执行

        /** 

前端使用

         * @decription 给方法添加回调函数 

$("#s_city").citySelect({
  prov: "江苏省",
  city: "宿迁市",
  dist: "宿城区",
  nodata: "none"
},
function(data, type) {
  selectAgent(data.city, data.dist);
});

         * @param funcName : string 需要添加回调的函数名称 

使用回调回来的data数据,用于selectAgent函数中

         * @param callback : function
回调函数(如需移除,不要使用匿名方法) 

function selectAgent(city,district){
    $.ajax({
      type:"POST",
      url:"{sh::U('Index/ajax',array('todo'=>'getagent'))}",
      data:"city="+city+"&district="+district,
      success:function(json){
        json = JSON.parse(json);
        opt_str = "<option value=''>-请选择-</option>"
        if(json.status == 1){
          $.each(json.data,function(index,con){
            opt_str += "<option value="+con.id+">"+con.name+" 电话:"+con.tel+"</option>"
          })
        }
        $('#agent_id').html(opt_str);
      }
    });
}

         * @param static : boolean 是否是类方法,默认为false 

去ajax获取相应的代理商数据。

         */  

改造插件完成。

        addCallback : function(funcName, callback, static){  

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

            if(“string” === typeof(funcName) && $.isFunction(callback)){
 

希望本文所述对大家jQuery程序设计有所帮助。

                if(static === true){  

您可能感兴趣的文章:

  • jQuery回调函数的定义及用法实例
  • 使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
  • 从零学jquery之如何使用回调函数
  • jQuery
    AJAX回调函数this指向问题
  • jQuery Ajax Post
    回调函数不执行问题的解决方法
  • jQuery的load()方法及其回调函数用法实例
  • 浅谈jquery回调函数callback的使用
  • jquery序列化表单以及回调函数的使用示例
  • jquery Deferred
    快速解决异步回调的问题
  • jQuery回调方法使用示例

                    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 

[html]  

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;  

<html xmlns=”” 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

 

[javascript]  

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())  

    );  

  

});  

 

 

运行结果:

 

图片 5

] /** * @fileOverview
本插件用于给jQuery方法添加回调函数,可在类方法或实例方法添加任何自定义的回调函数而不影响原方法的行为…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图