【連載】Bootstrap開發漂亮的前端界面之插件開發

首先，來看看我們一般是如何使用jQuery，第一種方式：$.trim(" hello world ")，直接使用jQuery中方法，第二種方式：$("#myinput").val()，擷取頁面中的元素，然後使用jQuery對象中方法。兩種的差別在于，第一種方式調用方法一般不涉及DOM，而第二種方式需要先擷取頁面中元素，然後再進行方法調用，方法的執行圍繞着DOM元素。trim、val方法都是jQuery原生提供的，其實我們也可以編寫自己的方法，而我們自己寫的方法一般被稱為jQuery的插件。

相關文章：

1.《教你用Bootstrap開發漂亮的前端界面》

2.《Bootstrap開發漂亮的前端界面之實作原理》

3.《Bootstrap開發漂亮的前端界面之自定義右鍵菜單》

什麼是jQuery插件？

　首先，來看看我們一般是如何使用jQuery，第一種方式：$.trim(" hello world ")，直接使用jQuery中方法，第二種方式：$("#myinput").val()，擷取頁面中的元素，然後使用jQuery對象中方法。兩種的區 别在于，第一種方式調用方法一般不涉及DOM，而第二種方式需要先擷取頁面中元素，然後再進行方法調用，方法的執行圍繞着DOM元素。trim、val方 法都是jQuery原生提供的，其實我們也可以編寫自己的方法，而我們自己寫的方法一般被稱為jQuery的插件。

　　　　現在我們先編寫兩個入門的插件:

　　　　需求一：擷取字元串路徑的中檔案名；需求不涉及到任何的DOM，是以我們可以采用方式一模式來編寫我們的插件。

　　　　$本來一個函數，在javascript中一切皆對象，是以$也是一個對象，那麼向jquery對象中添加新的方法也是可以行的。

<script type="text/javascript">
    //jQuery對象添加自定義方法
    $.getFileName=function(path){
        if(!path){
            return;
        }
        //使用正規表達式擷取路徑中的檔案名部分
        return  /(?!.*\/).*/.exec(path+"")[0];
    }
    //調用自定義插件
    var fileName = $.getFileName("f:/abc/源代碼教育絕密資料.txt");
    console.debug(fileName);
</script>      

　　　　第一個簡單插件就應經完成了，當然如果你的需求很複雜，你的代碼可能會更多。　

　　　　　　　

　　　　需求二:擷取頁面中元素的元素的名字;需求中需要先有DOM元素，然後才能擷取DOM元素的名字。

　　　　首先通過$(選擇器)擷取頁面中元素對象，其實$(選擇器)函數的傳回值傳回的就是一個jQuery執行個體對象，JS中每個對象都有自己的原 型對象，jQuery執行個體對象的原型對象為jQuery.prototype或者$.fn，如果不知道”原型對象“是什麼的童鞋自己百度一下，這個JS高 手必備的知識。（你可以嘗試執行： $.fn={};然後再去調用jquery對象的方法，你會發現都無法使用了）

//jQuery 執行個體對象的原型對象添加自定義方法
$.fn.tagName=function(){
    return this[0].nodeName;
};
    
$(function(){
    //調用自定義插件
    console.debug($("#mydiv").tagName());    
});      

　　　　  第二個插件的功能主要涉及到了DOM元素的通路；

 　　　　 右鍵菜單插件開發，本插件是以《Bootstrap開發漂亮前端界面之自定義右鍵菜單》為基礎，是以右鍵菜單的細節，不會在本文中描述。

　　　　 

　　　　仔細比對插件代碼與非插件代碼細微的差别，其實就是把以前寫死的東西使用this進行替換；

$(function(){
        //調用代碼
        $("#contextMenu").contextmenu();
 });