如何写一个简单的jquery插件

我们在写前端js代码的时候，对于一些通用性的功能模块，我们往往会以插件的形式提供，下面我就以当年我做的一个实际项目为例子，简单地演示一下，怎么编写一个具有回调功能的jquery插件。

 

项目背景：

     我们知道，当前端一次性提交大量数据交给后台处理时，如果后台设置的一次请求允许处理的时间不是很长的话，很容易出现处理超时的问题，这时候就需要我们在前端做分批处理了。

 

下面之间上代码了

;（function($){

      var sendDailog;

      var batchProcess={

              total:""',//总共多少条数据

              loop:"",//循环次数

              num:"",//处理到第几个循环

              options:{

                     prepareUrl:"/index.php",//数据准备url

                     processUrl:"",//数据处理url

                     data:"",//外部传过来的数据参数，可以传 一个json对象

                     tip:"",提示语

                     callSuccess:'"",//成功时的回调函数

                     callError:"",//失败时的回调函数

                     retryNum: 3 //出错时的重试次数

              },

             init:function(options){

                     $.extend(this.options,options||{}),

                     batchProcess.prepare(); 

             },

             prepare:function(){

                    var rs=confirm(""+batchProcess.options.tips);

                     if(rs){

                          $.ajax({

                               type:"post",

                               url:batchProcess.options.prepareUrl,

                               dataType:"json",

                               data:batchProcess.options.data,

                               success:function(res){

                                   if(res.error){

                                      batchProcess.callbackFunc(this.options.callError,res);//失败时回调

                                      return false;

                                  }

                                   batchProcess.total=res.total;

                                   batchProcess.loop=res.loop;

                                   batchProcess.num=res.num;

                                   batchProcess.process();//调用处理函数

                               },

                               error:function(){

                                

                               }

                          });

                     }

           },

            process:function(){

                     if((batchProcess.num>0)&&( batchProcess.num<batchProcess.loop)){

                            

                          $.ajax({

                               type:"post",

                               url:batchProcess.options.prepareUrl,

                               dataType:"json",

                               data:batchProcess.options.data,

                               success:function(res){

                                      if(res.error){

                                           batchProcess.callbackFunc(this.options.callError,res);//失败时回调

                                            return false;

                                      }

                                      if(res.finish){

                                          batchProcess.callbackFunc(this.options.callSuccess,res);//失败时回调

                                      }else{

                                          batchProcess.process(); 

                                      }   

                                  }

                              },

                              error:function(){

                                

                               }

                        });

                        batchProcess.num=batchProcess.num+1;

                     }else{

                         batchProcess.callbackFunc(this.options.callSuccess,"处理完毕");

                     } 

                     return false; 

            }, 

           

          callbackFunc:function(func,result){

                  if(func == undefined){

                       return false;

                 }  

                 if(typeof func == function"){

                           func(result);//在这里进行回调

                 } 

           }             

      

   };

   $.fn.batchProcess=function(options){

      batchProcess.init(options);                                

   };

}）(jquery);

 

具体调用方式：

   $（"#test"）.click(function(){

       $(this).batchProcess({

              

                     prepareUrl:"/index.php",//数据准备url

                     processUrl:"/index.php",//数据处理url

                     data:{nMessageID:12,nType:2},//外部传过来的数据参数，可以传 一个json对象

                     tip:"你确定要操作这些数据吗",提示语

                     callSuccess:function(result){

                         /成功时的回调函数

                     },

                     callError:function(result){

                          //失败时的回调函数

                    }

       });

});

不知各位看官懂了没，(*^__^*)