Question

我在我的网站上使用了几个jquery插件，其中大多数实际上只在某些页面上使用。例如，仅在首页上显示的图像滑块插件。

然后我有一个公共文件“custom.js”，我在其中调用函数，它包含在每个页面上，类似于外部css样式表。我更喜欢将它保存在一个文件中，并且大小不大。

但是因为我不想在页面上包含每个js-plugin文件（有时候很大），所以实际的插件没有显示，我的问题出现了。公共js文件将尝试调用未包含的插件，这些插件会生成js错误消息：例如$("#slider").coinslider is not a function。我该如何解决这个问题？

Answer 1

使用浏览器缓存，这不应该是一个大问题，因为您的脚本只会被加载一次，并且它将在下次从缓存（而不是从服务器）加载。

但是，您想要的功能（自动加载，按需加载或延迟加载）是可能的，但有点复杂。在这里您可以找到更多信息：

希望这会有所帮助。干杯

Answer 2

有几种方法可以做到这一点。最简单的方法是检查'slider'div的存在（假设这个div仅用于你网站上的一个地方，当你加载插件时）：

if($("#slider").length){
    $("#slider").coinslider()
}

您可以改为捕获正在抛出的错误：

try {
    $("#slider").coinslider();
} catch(err){}

但我会推荐第一种方法。

Answer 3

您始终可以使用以下内容封装调用：

if($("#slider").coinslider){$("#slider").coinslider()}

甚至可能会有效：

if($.coinslider){$("#slider").coinslider()}

基本上，在尝试调用之前检查函数是否存在。

当然，如果用于多个元素，请尝试对初始化进行分组，因为每次检查都会产生轻微的性能成本。