Javascript 多个html页面一个js文件？

我的网站中有多个html页面和滑块

我正在使用Bxslider和 有些页面也有Owl旋转木马，但我不想让多个.js文件在每个页面上调用不同的滑块

我可以只制作一个js文件，并在所有页面上使用上述代码。像这样，在一个.js文件中调用所有滑块

$(document).ready(function(){
  $('.bxslider').bxSlider();
  $("#owl-example").owlCarousel();
});

我不想在每个不需要它的页面中同时包含这两个插件（OWLCarousel和bxslider）js文件

在没有滑块的页面上调用滑块是否会影响性能

---

谢谢

在调用函数之前，检查页面是否有滑块：

$(document).ready(function(){
    if($('.bxslider').length > 0)
    {
        $('.bxslider').bxSlider();
    }
    if($('#owl-example').length > 0)
    {  
        $('#owl-example').owlCarousel();
    }
});

---

在调用函数之前，请检查页面是否具有滑块：

$(document).ready(function(){
    if($('.bxslider').length > 0)
    {
        $('.bxslider').bxSlider();
    }
    if($('#owl-example').length > 0)
    {  
        $('#owl-example').owlCarousel();
    }
});

---

这样做很好，而且不会影响性能，因为当您这样做时

$("#owl-example").owlCarousel();

没有与#owl示例选择器匹配的内容，它不会返回任何元素，因此不会调用owlCarousel（）

---

因此，您不仅可以在一个js文件上使用这些通用调用来实现这一点，我还鼓励您这样做，因为这是实现这一点的最佳方式—这样，如果您需要更改旋转木马功能，它就可以在一个地方实现。

这样做很好，而且不会影响性能，因为当您这样做时

$("#owl-example").owlCarousel();

没有与#owl示例选择器匹配的内容，它不会返回任何元素，因此不会调用owlCarousel（）

---

因此，您不仅可以在一个js文件上使用这些通用调用，我还鼓励您这样做，因为这是最好的方法—如果您需要更改旋转木马功能，这一切都在一个地方。

在未加载的页面上调用插件会导致语法错误。您可以在

try catch

block中包装该代码。在未加载的页面上调用插件会导致语法错误。您可以在

try catch

block中包装该代码block@SevanD. 如果不需要插件，我不会加载它们……只要检查这些元素是否存在，就像我的回答一样，这样你就不会不必要地加载不需要的javascript文件（插件）。@SevanD。如果不需要插件，我不会加载它们……只要检查这些元素是否存在，就像我的回答那样，这样你就不会不必要地加载不需要的javascript文件（插件）。