html, js - 如何限制元素“范围” - 命名空间

Question

在过去的一段时间里，我越来越频繁地看到以下情况。

开发者 A 创建了一个特征。假设是一个自动完成输入。让我们假设为简单起见没有使用任何框架，html 和 js 在同一个文件中。该文件看起来像这样（让我们也假设使用 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 文件（这很重要，我说的是像这样加载的功能，而不是为其他部分重写的功能）并将其包含在他需要的地方它。

现在...问题。第一个自动补全有效，第二个无效（因为是按 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>