如何處理僅在某些頁面上捆綁時才運行的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

回答

相關問題