DataTables.js 的 CDN 后备答案

【问题标题】：CDN fallback for DataTables.jsDataTables.js 的 CDN 后备
【发布时间】：2016-04-05 02:33:20
【问题描述】：

我正在尝试为datatables.min.js 编写一个 CDN 后备——不知何故，我在 Google 或 datatables.net 上找不到任何内容。在阅读了这个StackOverflow post和这个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 缺少什么？

【问题讨论】：

您正在将script 插入到script 中的<script> document.write('<script src="~/scripts/datatables.min.js"><\/script>'); </script> 中
使用$.getScript('~/scripts/datatables.min.js?' + Math.random(), function () { });动态加载脚本。
document.write 方法已被普遍使用和推荐 - 例如请参阅 jQuery 的 CDN 后备 (stackoverflow.com/questions/5257923/…)。我认为这不是问题。
@ParthTrivedi - 我试过 $.getScript 但它也不起作用。它甚至返回一个新的404 Not Found 错误。
"~/scripts/datatables.min.js" 路径可能有问题。它找不到它并获取404。能否请您验证路径。

标签： javascript jquery datatables cdn fallback

【解决方案1】：

遵循公认的回退做法的 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>

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

【讨论】：

【解决方案2】：

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

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

尽管在此之前阅读最佳实践、优缺点 -

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

我会推荐使用 RequireJS 来有效地做到这一点，正如 Scott Hanselman 所描述的那样，请在尝试之前先浏览下面的链接，因为他详细讨论了 CDN 回退并涵盖了它的各个方面 -

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

希望它会有所帮助，并为您找到正确的方向提供坚实的基础。

【讨论】：

我不同意你说document.write 和alert() 同时处理。 document.write 是同步加载并在脚本之外执行。之后，处理alert()，因此在执行document.write 之后。因此，$(document).ready() 不是加载插件的方法，因为它会在加载页面时丢失并产生错误。 document.write 是一种接受和推荐的 CDN 后备方法 - 请参阅上面的参考资料。
同意，Scott Hanselman 按照我在上面的回答中的帖子中概述的方式提供了它。虽然你可能会喜欢他的帖子以获取替代方案和其他关于性能的观点。

【解决方案3】：

试试这个

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

【讨论】：

这不起作用并返回404 Not Found 错误，后跟undefined。
我有更改网址。请检查。尝试提供完整的 URL 路径。相对 url "~/" 可能有问题。
不错的收获！根据stackoverflow.com/questions/2188218/…，“在脚本中，路径是相对于显示页面的...” Tilda / 相对 URL 在脚本中不起作用。您的解决方案有效，但与更正的 document.write 技术相比存在延迟。
@Alfred 这个答案对你有帮助吗？然后投票。