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创建输入时，您可以将处理程序直接绑定到Element：

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

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

html，js - 如何限制元素“scope” - 名称空间

1 个答案: