javascript - 如何处理捆绑在一起时仅在某些页面上运行的 JavaScript

Question

在小型客户端站点上工作时，我经常最终使用包含一堆 jQuery 插件和小型切换功能的 main.js 文件。其中一些代码片段仅与某些页面相关，但最终捆绑在一起在一个 main.min.js 文件中。

我的问题是，人们如何编写单独的代码片段以便仅在呈现正确的页面时执行该代码？

这是一个示例:假设我有一个带有搜索输入字段的页面。该输入与 jQuery autocomplete 连接。为了在用户输入时显示搜索建议。 main.js 中的代码可能如下所示:

var data = [
    {
        value: 'some value',
        data: 'some data'
    },
    {...}
]
$('#autocomplete').autocomplete({
    lookup: data,
    lookupLimit: 10,
    minChars: 3,
});

此代码仅在具有该输入字段的模板上有用，但由于 main.js 包含一堆像这样的其他较小的位，这些位在全局和其他页面上有用，因此整个文件会加载到每个页面 View 上。我应该使用什么策略来仅在页面需要时执行该代码段？

我自己想到了一些方法:

• 检查 DOM 元素(在本例中为#autocomplete)是否存在。
• 检查网址是否为 == '/page-with-autocomplete'。
• 使用 上的类，并检查该类以便运行脚本。
• 还有其他想法吗？有什么标准方法可以做这种事情吗？有什么被认为是“最佳实践”吗？

Answer 1

将您的 JS 放入 if block 中，并检查您希望脚本运行的页面上是否有唯一的 DOM 元素。虽然你不能只是这样做:

if ( $('#my-el') ) {}   

您必须检查元素是否有长度，例如:

if ( $('#my-el').length ) {}