DataTables.js 的 CDN 回退

Question

我正在尝试为 datatables.min.js 编写 CDN 回退——不知何故，我在 Google 或 datatables.net 上找不到任何内容。看完这篇 and this DataTables post，我想到了这篇未成功的文章（甚至尝试了各种表达方式如图所示）：

<script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        document.write('<script src="~/scripts/datatables.min.js"><\/script>');            
        //document.write('<script src="~/scripts/datatables.min.js">\x3C/script>'); //same
        //document.write('\x3Cscript src="~/scripts/datatables.min.js"\x3E\x3C/script\x3E'); //same
    }
</script>

为了排除故障，我直接加载了 datatables.min.js 并得到了这两个令人困惑的结果：

1/ 我从中得到 undefined (BAD):

<script>
    document.write('<script src="~/scripts/datatables.min.js"><\/script>');
</script>
<script>
    alert(typeof jQuery.fn.dataTable);
</script>

2/ ... 但不知何故我从中得到 function (GOOD):

<script src="~/scripts/datatables.min.js"></script>
<script>
    alert(typeof jQuery.fn.dataTable);
</script>

这对我来说看起来是一样的，特别是因为 document.write 使用同步加载。我也尝试了一种纯粹的 DOM 方法，但没有成功。

document.write我错过了什么？

Answer 1

试试这个

    <script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        $.getScript(baseURL + '/scripts/datatables.min.js?' + Math.random(), function () {
            //do stuff here
            alert(typeof jQuery.fn.dataTable);
        });
    }
    </script>

Answer 2

在您的代码中 document.write 和警报将同时处理，请注意警报将在 "database.min.js" 可用时完成。

使用 $(document).ready() 或 winidow.onload 你会看到预期的结果。

虽然在执行此操作之前先阅读此处的最佳实践、优缺点 -

http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/

我会推荐使用 RequireJS 来有效地执行此操作，正如 Scott Hanselman 所描述的那样，请在尝试之前阅读下面的内容 link，因为他详细讨论了 CDN 回退并涵盖了它的各个方面 -

http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

希望它能对您有所帮助，并为您找到正确的方向打下坚实的基础。

Answer 3

遵循公认的回退做法的 DataTables 的正确 CDN 回退是：

<script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        document.write('\x3Cscript src="/scripts/datatables.min.js"\x3E\x3C/script\x3E');
        //document.write('<script src="/scripts/datatables.min.js"><\/script>');
    }
</script>

或者干脆

<script>window.jQuery.fn.dataTable || document.write('\x3Cscript src="/scripts/datatables.min.js"\x3E\x3C/script\x3E')</script>

src="" 中的 tilda / 相对路径是问题所在，正如@ParthTrivedi 所建议的（参见评论）。根据此 post，“在脚本中，路径相对于显示的页面”。

DataTables.js 的 CDN 回退

CDN fallback for DataTables.js

javascript

jquery

datatables

cdn

fallback