DataTable源碼分析（二）

DataTable源碼分析（二）

DataTable函數分析

DataTable做爲整個插件的入口，完成了整個表格的數據初始化、表格展示等等操做。本人採用比較笨的辦法，逐行的研究這個函數，看看這裏究竟作了什麼。固然，因爲本人對於JavaScript也是隻知其一;不知其二，不少時候，須要配合瞭解JavaScript的語法才能真正瞭解具體的函數用法，下面也會一一講解。

整體概覽

函數從代碼的90多行開始，一直到1300多行結束，看起來不算長的函數內部，其實調用了不少函數外部定義的api函數，這些函數在DataTable()外部定義，以_fn開頭，整個源碼包主要就是由這些函數組成的。

而DataTable()函數又由兩部分組成：前半部分主要是定義DataTable的函數，這些函數定義爲this.函數名，例如：

this.fnDeleteRow = function( target, callback, redraw )
{
  ...
}

看到這樣的定義方法，結合DataTable源碼分析（一）中描述的，經過頁面的元素（table）的JQuery對象來調用DataTable()函數，這時，函數中的this就指向了頁面元素（table）的JQuery對象，這其實也就是向這個頁面的元素（table）的JQuery對象中，添加了方法。這樣，就能夠經過下面的方法來訪問DataTable函數中定義的這些方法了，也就是api

$('#exampe').fnDeleteRow(...)

DataTable()函數在最後返回了this，也就是說咱們也能夠經過下面的方法來調用這些api函數

var oTable = $('#example').dataTable();
oTable.fnDeleteRow(...)

這也是每一個函數開始的註釋中給出的用法示例。這樣看來，咱們也能夠用這樣的辦法來自定義咱們本身的插件的api，使咱們的插件附加在原生的html元素上，卻又有不少自定義的方法，是否是很cool？

寫到這裏，想來上面的第一種調用api的方法，應該是有問題的，由於JQuery每次經過選擇器獲得對象時，都是一個新的實例，而這裏的this是把函數定義到了當前的實例，因此執行過dataTable()函數後，再使用$('#example'),獲得的是一個新的實例，也就不具有上面說的api函數了，調用會失敗。

DataTable()函數的下半部分是實際執行的內容從849行左右開始，直到函數結束，這裏完成了數據的初始化，和頁面的展現等功能

DataTable函數的執行

略過DataTable對api函數的定義，下面重點分析DataTable()函數的執行過程，看看這個函數是怎麼把一個表格呈現出來的。

開始，程序定義了一些變量，這裏引用了_ext，這個對象定義在代碼的13827行左右。

DataTable.ext = _ext = {
  ...
}

這裏定義了不少屬性，同時這個屬性也被定義在DataTable.ext上。這裏從單詞的含義能夠理解爲擴展的屬性和方法，或是是插件，這裏暫時略過具體的內容。

以後，對於this進行遍歷，這個遍歷是考慮了this下面包含多個table的狀況，也就是說明這個插件支持一次對多個table進行操做，而不只僅是針對一個table的管理。

接下來，是在循環遍歷中的代碼。程序首先對當前對象的節點名字進行了判斷，若是不是‘table’函數直接返回。而後，調用_fnCompatOpts和_fnCamelToHungarian對defaults和defaults.column進行處理。

這裏的_fnCompatOpts和_fnCamelToHungarian是幹什麼的？去查源碼就會發現，_fnCompatOpts函數是用來將default中一部分屬性改個名字，而後再加入default中。這其實就是給對象的屬性創建了一個別名，從註釋和函數名來看，這個聽說是爲了保證向後的兼容，多是之後的版本中會使用新的屬性名稱吧。

_fnCamelToHungarian是一個更加詭異的函數，他的做用是對傳入參數的屬性名進行修改，若是是駝峯表示法就改爲匈牙利表示法。這裏的駝峯和匈牙利也是這個插件裏的一種說法，自己插件內部的命名規則也不太屬於標準的匈牙利表示法。因此，咱們說的駝峯和匈牙利都以插件代碼的表示法爲依據，代碼中的駝峯就是形如「tableBody」這樣的變量名，而匈牙利則是「oTableBody」，其中的o表明了變量的類型是一個對象（object）。也就是說，匈牙利表示法用一個前綴來表示變量或熟悉的類型，而駝峯則沒有類型的前綴，只是以小寫字母開始，以後的代詞首字母大寫。這個函數會根據傳入的第一個參數的匈牙利表示法的屬性名，創建一個駝峯表示法的對應表。例如，一個屬性名是aoDataTable（表示對象數組），則在對應表中就是一個dataTables,aoDataTable的對應關係（key，value).而後再對比第二個參數的屬性，若是屬性在這個對應表中，匹配到了key，說明這個屬性是一個駝峯表示法定義的屬性，這時，在第二個參數對象中增長一個屬性，是這個駝峯表示法對應的匈牙利表示法的屬性，值仍然是本屬性的值。這個函數實際上是把第一參數做爲模板，來轉換第二參數，也就是隻能轉換第一個參數中包含的屬性。

這裏的兩個函數的調用是，先調用_fnCompatOpts，而後調用_fnCamelToHungarian。例如，先調用_fnCompatOpts( defaults );,而後調用_fnCamelToHungarian( defaults, defaults, true );。爲何在_fnCamelToHungarian( defaults, defaults, true );傳入相同的參數？我想多是因爲_fnCompatOpts( defaults );``向defaults中增長了新的屬性，調用_fnCamelToHungarian函數儘可能使新增長的屬性，具備匈牙利表示法的別名。
setting
還要注意的一點是，參數defaults和defaults.column這個是在插件中定義的對象，內部包含了大量的預設的值，用來在建立表格式做爲默認的設置。

而後，程序繼續調用了_fnCamelToHungarian( defaults, $.extend( oInit, $this.data() ) );，這裏關鍵的是經過$.extend將定義在table上的"data-"屬性合併到oInit中，注意oInit是在表格建立中很是重要的一個對象，包含了全部的初始化信息。這裏首先把附件在table上的用戶自定義的數據合併到oInit,因爲一般咱們不會再table上設置「data-」屬性，因此到目前爲止，oInit內容仍是{}。

揭下來，程序對於DataTable對象定義的另一個屬性setting進行處理，主要是用來判斷重複初始化的狀況，因爲咱們大多數狀況是第一次初始化，因此當前的DataTable.setting爲空，不會進入後面的循環。

再往下，是對sId的判斷，sId在前面的代碼中獲得，就是table的id屬性，若是爲空，程序會生成一個「DataTables_Table_」開頭的id，設置到table上。