JQuery自定義插件開(kāi)發(fā)(二)

JQuery全局函數(shù)定義

   下面為JQuery定義一個(gè)全局函數(shù)globalfunction用于彈出一個(gè)對(duì)話框：
 

jQuery.globalfunction=function(){  
   alert("myplugin");  
} 

    在頁(yè)面上我們可以通過(guò)$.glabalfunction來(lái)調(diào)用
    JQuery還允許我們同時(shí)定義多個(gè)全局函數(shù)，這可以通過(guò)JQuery的extend方法或者通過(guò)擴(kuò)展JQuery全局對(duì)象的方式來(lái)實(shí)現(xiàn)。由于使用extend方法有可能會(huì)出現(xiàn)函數(shù)重名的問(wèn)題，這里以擴(kuò)展全局對(duì)象為例：
    下面為JQuery擴(kuò)展全局對(duì)象myPlugin,在myPlugin中定義兩個(gè)函數(shù)
 

jQuery.myPlugin={  
  functionOne:function(){  
    alert("functionOne");  
  },  
  functionTwo:function(param){  
    alert("functionTwo and param"+param);  
  }  
} 

     在頁(yè)面上我們可以通過(guò)$.myPlugin.functionOne()來(lái)調(diào)用函數(shù)1，
     通過(guò)$.myPlugin.functionTwo(param)來(lái)調(diào)用函數(shù)2

JQuery對(duì)象函數(shù)定義

     JQuery對(duì)象函數(shù)的強(qiáng)大在于在JQuery插件方法的內(nèi)部，this引用的都是當(dāng)前的JQuery對(duì)象，因而可以在this上面調(diào)用任何內(nèi)置的JQuery方法，或者提取它包含的DOM節(jié)點(diǎn)并操作該節(jié)點(diǎn)。
    通過(guò)上一篇日志我們知道JQuery實(shí)例對(duì)象繼承的是JQuery對(duì)象的原型，因此擴(kuò)展JQuery對(duì)象函數(shù)需要在JQuery.fn上進(jìn)行操作。下面我們?yōu)镴Query實(shí)例對(duì)象添加方法myMethod彈出對(duì)話框。

jQuery.fn.myMethod=function(){  
    alert("myMethod");  
} 
  

    我們可以通過(guò)$("#id").myMethod來(lái)進(jìn)行調(diào)用。
    下面演示在JQuery對(duì)象函數(shù)內(nèi)部this的作用。首先在頁(yè)面上我們添加如下組件：

<form name=fm> 
           <ul> 
              <li class="this">標(biāo)題</li> 
              <li class="that">樣式1</li> 
              <li class="this">樣式2</li> 
            </ul> 
            <input type="button" value="改變樣式" id="swapClass"/> 
    </form> 

    添加樣式

.this{  
     font-style: normal;  
   }  
   .that{  
     font-style: italic;  
   }   

    我們需要的效果是點(diǎn)擊改變樣式后將使用this樣式的元素樣式改為that,使用that樣式的元素樣式改為this。
    現(xiàn)在我們通過(guò)添加JQuery對(duì)象函數(shù)來(lái)實(shí)現(xiàn)
    添加JQuery對(duì)象函數(shù)

jQuery.fn.swapClass=function(class1,class2){  
    this.each(  
       function(){  
        var $element=jQuery(this)       
        if($element.hasClass(class1)){  
            $element.removeClass(class1).addClass(class2);  
        }else if($element.hasClass(class2)){  
            $element.removeClass(class2).addClass(class1);  
        }  
     });      
} 

   為按鈕綁定此方法

<script type="text/javascript">  
            window.onload=function(){  
                $("#swapClass").click(function(){  
                   $("li").swapClass("this","that");  
                });   
                showBox();   
             }   
    </script>    

   這樣就可以實(shí)現(xiàn)此效果了。
   需要注意的是在定義插件的方法中this的運(yùn)用，this.each中的this為實(shí)例化的JQuery對(duì)象，在此處即為所有的"li"標(biāo)簽，而在每一次this.each方法體中的this則是一個(gè)DOM元素。

   在網(wǎng)上我們經(jīng)常能夠看到這樣的定義JQuery對(duì)象函數(shù)的方法：

(function($) {  
    $.fn.myPluginName = function() {  
        // your plugin logic  
    };  
})(jQuery); 

  通過(guò)這種方式在自定義插件方法內(nèi)部可以使用$關(guān)鍵字來(lái)代替JQuery關(guān)鍵字。那么這種寫(xiě)法會(huì)不會(huì)有人覺(jué)得比較陌生呢，下篇日志將插入一段題外話介紹一下JavaScript的匿名函數(shù)和閉包。