【連載】Bootstrap開發漂亮的前端介面之外掛程式開發

標籤：

相關文章：

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; } //使用Regex擷取路徑中的檔案名稱部分 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(); });

【連載】Bootstrap開發漂亮的前端介面之外掛程式開發