JQuery插件开发示例代码

169 阅读 0 评论 112 点赞

我是靠谱客的博主大胆火，最近开发中收集的这篇文章主要介绍JQuery插件开发示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JQuery 插件开发：
类级别开发，开发新的全局函数
对象级别开发，给Jquery对象开发新方法
一、类级别开发 -定义全局方法

复制代码代码如下:

jQuery.foo = function() {  
    alert('This is a test.');  
}; 

采用命名空间，可以避免命名空间内函数的冲突。

复制代码代码如下:

jQuery.apollo={  
    fun1:function(){  
        console.log('fun1');  
    },  
    fun2:function(){  
        console.log('fun2');  
    }  
}  

二、对象级别开发 -定义jQuery对象方法

复制代码代码如下:

(function($) {     
$.fn.pluginName = function() {   

};   
})(jQuery);  
//插件通过这样被调用：  
$('#myDiv').pluginName();  

接受options参数以控制插件的行为

复制代码代码如下:

(function($){  
    $.fn.fun2=function(option){  
        var defaultOption={  
            param1:'param1',  
            param2:'param2'  
        }  
        $.extend(defaultOption,option);  
        console.log(defaultOption);  
    }  
})(jQuery);  
$(function(){  
    //通过这样调用  
    $("body").fun2({  
        param1:'new Param1'  
    });  
});  

保持私有函数的私有性

复制代码代码如下:

 (function($) {    
  // plugin definition    
  $.fn.hilight = function(options) {    
    debug(this);    
    // ...    
  };    
  // private function for debugging  
  //“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。  
  function debug($obj) {    
    if (window.console && window.console.log)    
      window.console.log('hilight selection count: ' + $obj.size());    
  };    
//  ...    
})(jQuery);  