html，js - 如何限制元素「範圍」 - 名稱空間

Question

在上次perioud期間，我越來越多地看到以下情況。

開發人員A創建一個功能。假設是一個自動完成輸入。爲簡單起見，我們假設沒有使用框架，html和js在同一個文件中。該文件看起來像這樣（讓我們也用asume jQuery的 - 是少型）：

現在

<!-- autocomplete something.html file --> 
......................................... 
<input id="autocomplete" type="text" /> 

<script type="text/javascript"> 
    $('#autocomplete').change(function() { 
     // Do lots of things here -> ajax request, parsing, etc. 
    }); 
</script> 
......................................... 

開發商B看到的功能，並說：「哦，不錯的功能，我可以用在我的部分，我將一個放在最上面，一個放在最下面 - 因爲頁面很長「。

他做的Ajax調用來獲取HTML文件（這是很重要的，我說的是裝載這樣的功能，而不是改寫爲其他功能部分），包括它在那裏，他需要它。

現在......問題。第一個autocomple工作，第二個不（因爲是由ID選擇）。

解決方法是修改並使用類。一切都可以，除非別人（或他自己或其他人）使用同一個班級來完成不同的事情。

如果您可以將腳本用作「範圍」（我知道這不是正確的措詞，找不到更好的），則可以避免這種情況。

注意：這是一個理論問題。對於每個特定情況，都可以找到解決方案，但是爲這些場景定義某種名稱空間將解決整個類別的問題。

這怎麼可能實現？

Answer 1

只要你訪問DOM我看到是使用「舊」聯事件的唯一辦法：

<!-- autocomplete something.html file --> 
......................................... 
<input onchange="autocomplete_change();" type="text" /> 

<script type="text/javascript"> 
    function autocomplete_change() { 
     // Do lots of things here -> ajax request, parsing, etc. 
    }; 
</script> 
........... 

現在函數名稱不能被開發者使用B.但是 時訪問DOM的某種限制將永遠存在。創建由腳本輸入

然而，當你可以直接處理程序綁定到元素：

<script> 
    var input = $('<input type="text"/>'); 

    input.change(function() { 
     // Do lots of things here -> ajax request, parsing, etc. 
    }); 
    document.body.appendChild(input[0]); 
</script>