在多个页面上使用多个jQuery插件？

Question

我有一个使用一些JavaScript / jQuery插件的网站，然后我有一个default.js文件，它使用每个不同页面的插件功能。

E.g。我有一些插件包括：

• 自定义滚动条插件
• 幻灯片插件
• 一个cookie插件
• 等

然后在default.js文件中，我将执行以下操作（伪代码）：

var scrolling = findScrollbarDiv;
scrolling.ScrollFunction({ options });

（然后幻灯片+我的其他插件也一样）

但是，如果有findScrollbarDiv返回null的plage，我会收到类似以下内容的错误：

  

ScrollFunction不是函数

这不是因为元素返回null，而是因为我没有包含此页面的插件文件。我的理由是我不想在每个页面上包含每个文件（即使它不需要），因为这可能会导致不必要的HTTP请求（特别是在主页上，只需要一个插件）

这个错误反过来会混淆JavaScript的其余部分。

克服这个问题的最佳方法是什么？我是否应该在每个页面上包含每个插件文件，无论是否需要？或者是否有一些我可以使用的JavaScript：

var scrolling = findScrollbarDiv;
if(scrolling != null) {
    scrolling.ScrollFunction({ options });
}

（这对我来说有点笨拙，但如果这是最好的解决方案让我知道）

或者使用一个默认的js文件启动所有插件是个坏主意吗？

Answer 1

如果您使用相同的头文件并且不介意包含该文件，则可以在将事件附加到该文件之前始终检查该元素是否存在。

以下是一个例子：

if(jQuery('#someElement').length > 0){
    jQuery('#someElement').ScrollFunction({ options });
}

要么是这样，要么为每个函数都有一个JavaScript文件。

所以你有一个用于画廊，一个用于饼干等。并且只包括每个页面所需的那些。

Answer 2

您可以将其作为条件语句执行，并避免使用笨重的if：

scrolling && scrolling.ScrollFunction({ options });

这适用于您要调用的任何方法，并希望在执行之前检查父对象是否存在。 您可以更进一步（如果需要）并在执行之前检查方法本身是否存在：

scrolling && scrolling.ScrollFunction && scrolling.ScrollFunction({ options });

如果滚动是一个集合，只需检查它的长度（如果长度== 0，语句将失败）：

scrolling.length && scrolling.ScrollFunction({ options });