前言：之前分享了那麼多bootstrap元件的使用經驗，這篇部落客打算研究下JS元件的擴充和封裝，我們來感受下JQuery為我們提供$.Extend的神奇，看看我們怎麼自定義自己的元件，比如我們想擴充一個$("#id").MyJsControl({})做我們自己的元件，我們該如何去做呢，别急，我們慢慢來看看過程。
很多時候，我們使用jquery.ajax的方式向背景發送請求，型如
這種代碼太常見了，這個時候我們有這樣一個需求：在自己調用ajax請求的時候，我們不想每次都寫error:function(e){}這種代碼，但是我們又想讓它每次都将ajax的錯誤資訊輸出到浏覽器讓使用者能夠看到。怎麼辦呢？
要想實作以上效果其實并不難，我們可以将$.ajax({})封裝一層，在封裝的公共方法裡面定義error對應的事件即可。确實，這樣能達到我們的要求，但是并不完美，原因很簡單：1）在jquery的基礎上面再封裝一層，效率不夠高；2）需要改變調用者的習慣，每次調用ajax的時候需要按照我們定義的方法的規則來寫，而不能直接用原生的$.ajax({})這種寫法，這是我們不太想看到。
既然如此，那我們如何做到既不封裝控件，又能達到以上要求呢？答案就是通過我們的$.extend去擴充原生的jquery.ajax。
其實實作起來也并不難，通過以下一段代碼就能達到我們的要求。
如果沒接觸過jquery裡面$.extend這個方法的童鞋可能看不懂以上是什麼意思。好，我們首先來看看jquery API對$.extend()方法是作何解釋的。
什麼意思呢？我們來看官方的兩個例子就知道了
栗子一：
結果：
栗子二：
以上的兩個簡單例子就說明extend()方法作用就是合并另個對象，有相同的則覆寫，沒有相同的則添加。就是這麼簡單。
了解了$.extend()的作用，我們就能大概看懂上面那個擴充jquery.ajax的實作了吧。主要的步驟分為：
1）定義預設的error處理方法。
2）判斷使用者在調用$.ajax({})的時候是否自定了error:function(){}，如果定義過，則使用使用者定義的，反之則用預設的error處理方法。
3）使用$.extend()将error預設處理方法傳入$.ajax()的參數中。我們看options參數時包含$.ajax()方法裡面所有的參數的，然後用預設的fn去擴充它即可。
通過以上三步就能夠實作對$.ajax()方法裡面error預設處理方法。這樣擴充，對于我們使用者來說完全感覺不到變化，我們仍然可以$.ajax({});這樣去發送ajax請求，如果沒有特殊情況，不用寫error處理方法。
使用元件擴充，能夠幫助我們在原有元件上面增加一些和我們系統業務相關的處理需求，而在使用時，還是和使用原生元件一樣去調用，免去了在元件上面再封裝一層的臃腫。
上面通過$.extend()方法擴充了$.ajax()的error事件處理方法。下面我們來封裝一個自己的元件試試，功能很簡單，但比較有說明性。我們就以select這個元件為例，很多情況下，我們的select裡面的option都是需要從資料庫裡面取資料的，是以一般的做法就是發送一個ajax請求，然後在success方法裡面拼html。現在我們就封裝一個select遠端取資料的方法。
先上幹貨吧，将寫好的整出來：
先來看看我們自定義元件如何使用：
首先定義一個空的select
然後初始化它
參數很簡單，就不一一介紹了。很簡單有木有~~
其實對于簡單的select标簽，部落客覺得這裡的getValu和SetValue意義不大，因為直接通過$('#sel_search_plant').val()就能解決的事，何必要再封一層。這裡僅僅是做示範，試想，如果是封裝成類似select2或者multiselect這種元件，getValue和setValue的意義就有了，你覺得呢？
上面的實作代碼，如果您一眼就能看懂，證明您是經常封元件的大蝦了，下面的就不用看了。如果看不懂，也沒關系，我們将代碼拆開詳細看看裡面是什麼鬼。
（1）首先看看我們最常看到的如下寫法：
初初看到這種用法，部落客也是狂抓，這是什麼鬼嘛，四不像啊。使用多了之後才知道原來這就是一個匿名函數的形式。将它拆開來看如下：
也就是說這種寫法就表示先定義一個方法，然後立即調用這個方法，jQuery相當于實參。打開jquery.js的原檔案可以看到，jQuery是這個檔案裡面的一個全局變量。
（2）定義自己的元件的代碼：
習慣這種寫法的應該知道，這個就表示向jquery對象添加自定義方法，比如你想使用文章開始的 $("#id").MyJsControl({}) 這種用法，你就可以這樣定義 $.fn.MyJsControl=function(options){} 。
（3） options = $.extend({}, $.fn.combobox.defaults, options || {}); 這一句，看過上文的朋友應該還記得extend這麼一個方法吧，怎麼樣，又來了你。這句話其實就沒什麼好說的了，合并預設參數和使用者傳進來的參數。
（4）預設參數清單
如果使用者沒有傳參，就用預設的參數清單。如果你夠細心，你會發現部落客之前分享的其他bootstrap元件的js檔案裡面都有這麼一個default參數清單。我們随便找兩個：
bootstrap上傳元件
bootstrap table元件
基本都是這麼些用法。這樣來看，是否也可以自己封一個js元件~~
以上就是部落客對js元件擴充以及封裝用法的認識和總結。當然，都是些比較簡單基礎的封裝，如果想要實作類似bootstrap table的元件，那還差得很遠。不過萬丈高樓平地起，隻要打好基礎，封一個自己的table元件也不是什麼大問題。文中如果有了解不對的地方，歡迎指出，部落客将不勝感激。如果本文能夠對你有絲毫幫助，麻煩擡起你的小手點個推薦，部落客一定繼續努力，将更好的文章分享給大家。