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>