javascript - 包含其他 javascript 文件时 Highcharts javascript 错误

Question

我正在使用 SB admin 2 模板在 laravel 框架中重建我的网站。该模板包含一个名为 frontend.js 的文件，该文件用于菜单等。该文件可以在这里看到:https://github.com/start-laravel/sb-admin-laravel-5/blob/master/public/assets/scripts/frontend.js

在我的旧网站中，我使用了一些 Highcharts，我也想在新网站中使用它们。在旧站点中，我使用了这样的脚本:https://jsfiddle.net/do0gm917/

在标题中我有:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

当我尝试在新网站中执行相同操作时，出现此错误:Uncaught TypeError: $(...).highcharts is not a function

我注意到，当我删除 frontend.js 时，highcharts 工作正常，因此问题不在于 highchart 代码本身，但显然这两个脚本不喜欢一起工作。

我的 Javascript 知识非常有限，而且由于 frontend.js 文件是 15324，我不知道如何调试这个问题。有什么想法吗？

Answer 1

事实 jQuery.fn.jquery 打印版本是一件好事，因为这意味着 jQuery 对象没有被其他库覆盖。

由于您使用的是 1.9.1 并且您正在使用 2.1.3，这意味着您有 2 个 jQuery 版本正在加载，并且 1.9.1 jQuery 对象(包含 highcharts 函数)被 2.1.3 对象覆盖，而 2.1.3 对象又被覆盖也删除了 highcharts 功能。您可以尝试阻止第二个版本的加载，或者如果您不能这样做，则尝试使用 jQuery 无冲突模式，该模式将允许两个版本共存。您可以使用 noconflict，如下所示。

已编辑*

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script>
    var jQuery191 = jQuery.noConflict( true );
</script>

由于 jQuery191 在加载 jQuery-1.9.1 后立即保存，因此它将引用该版本。现在，即使 2.1.3 覆盖 jQuery 对象，它也不会覆盖 jQuery191 对象，因此它仍然可以用于渲染 highcharts，如下所示。

jQuery191.highcharts(...)