如何处理仅在某些页面上捆绑时才运行的JavaScript

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

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

下面是一个例子：假设我有一个带有搜索输入字段的页面。此输入与jQuery autocomplete联系起来，以便在用户输入时显示搜索建议。在main.js代码可能是这个样子：

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

此代码是仅在有输入框模板是有用的，但作为main.js包含这样一群其他较小的数位，它们是有用的全局和其他页面上，整个文件将加载到每个网页浏览。我应该使用什么策略来在页面需要时执行那段代码？

不过，我觉得我自己的一些方法：

检查的DOM元素（在这种情况下#autocomplete）存在。
检查URL是否为'/ page-with-autocomplete'。
使用一个类，并检查该类为了运行该脚本。
其他想法？任何标准的方式来做这种事情？任何被认为是“最佳实践”的东西？

来源

2017-07-25 Malthe Milthers

他们可能只是打破它 - 它通常只是main.js和你使用100％独特的ID，因此只有某些东西在找到ID时运行 – ThisGuyHasTwoThumbs

将您的JS放在if块中，并检查您希望脚本运行的页面上的唯一DOM元素。虽然你不能只是做：

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

你必须检查元素的长度，如：

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

来源

2017-07-25 08:36:25 Chase

如何处理仅在某些页面上捆绑时才运行的JavaScript

回答

相关问题