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上。