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

html, js - how to limit elements "scope" - namespaces

本文关键字：范围 命名空间 quot js- 何限制 元素 html      更新时间：2023-09-26

在上一次会议期间，我越来越多地看到以下情况。

开发人员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选择的）。

解决方法是修改并使用一个类。一切都很好，除非其他人（或他自己，或其他什么人）将同一个类用于完全不同的东西。

如果你可以将脚本用作声明它的文件的"范围"（我知道这不是正确的措辞，找不到更好的），这一切都可以避免。

注：这是一个理论问题。对于每一种特定的情况，都可以找到解决方案，但为这种场景定义某种名称空间将解决整个类别的问题。

这是如何实现的？

只要您正在访问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创建输入时，您可以将处理程序直接绑定到元素：

<script>
    var input = $('<input type="text"/>');
    input.change(function() {
        // Do lots of things here -> ajax request, parsing, etc.
    });
    document.body.appendChild(input[0]);
</script>
相关文章：