datatables and requireJS 正确使用

官网可以参考我的forums： http://www.datatables.net/forums/discussion/22763/datatables-and-requirejs-work-well。

jquery 有一款很好用的datatables插件，它本身是AMD规范的，由于引入方式不同会导致源码在AMD规范下存在问题，我在看了源码以后，做了AMD方式的修改，使用requireJs引入datatables后，项目正常使用此插件。

首先说明项目的引入方式。

require.config({

paths:{

'jquery':'/loganalytics-frontend/js/lib/jquery-1.8.2.min',

'dataTables' : '/loganalytics-frontend/js/lib/datatable/js/jquery.dataTables',

...

}

})

简单说就是项目中只定义了一个全局对象requireJs，其他js都是按照模块方式引入的。很可惜，这种情况下jquery.datatables.js并不能直接使用，会提示$(...).DataTable is not a function。

下面是分析源码过程。

简化源码结构如下：

(/** @lends <global>
*/function( window, document, undefined ) {

(function( factory ) { ......} (/** @lends <global>
*/function( $ ) { ////这里有一个形参$,注意形参需要传递!!!但是往下看，并没有调用这个function的代码（显式调用or 匿名调用），那么作者的本意是不是想使用全局的$呢？

......

return $.fn.dataTable; //
注意这里，这个func 是想返回一个对象，但是大家都知道func只能在调用后才会返回!

}));//第二层匿名，但是第三层呢？关键的一层匿名没发生！

}(window, document));//第一层匿名函数调用

修改后的源码：

(/** @lends <global>
*/function( window, document, undefined ) {

(function( factory ) { ......} (/** @lends <global>
*/function( ) { //删除参数$

......

return $.fn.dataTable; //

}())); ////第二层匿名，第三层匿名。注意我添加了()

}(window, document));

或者最简单的方式，触发第三层匿名函数调用，保持其他不变（函数使用形参$并非全局的$）。

(/** @lends <global>
*/function( window, document, undefined ) {

(function( factory ) { ......} (/** @lends <global>
*/function($ ) {

......

return $.fn.dataTable; //

}($))); ////第二层匿名，第三层匿名。注意我添加了()

}(window, document));

使用方式：

require(['jquery', 'datatables'], function(){......});



总结：本案例是问题原因是匿名函数导致的，在AMD规范下，使用requireJs引入jquery，那么$并不是一个全局的对象了，那么源码的执行过程在这种场景下就不对了，修改了最内层的匿名函数并自定触发它（可以传参数$,也可以使用全局的$,此全局并非彼全局，因为使用时是这样的：require(['jquery', 'datatables'], function(){......}); 懂AMD的能明白我这里说的$到底是哪个$， 这里的全局是本次require作用域内的全局.）， dt works well。