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

Question

During last perioud I've seen more and more often the following situation.

Developer A creates a feature. Let's say is an autocomplete input. Let's assume for simplicity that no framework is used, html and js are on the same file. The file would look like this (let's also asume jquery used - is less to type):

<!-- 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>
.........................................

Now developer B sees the feature and says "Oh, nice feature, I can use that in my section, I'll put one at the top, and one at the bottom - because page is long".

And he does an ajax call to get that html file (this is important, I'm talking about features loaded like this, not features rewritten for the other section) and includes it where he needs it.

Now... problem. The first autocomple works, the second doesn't (because is select by id).

A workaround would be to modify, and use a class. And everything is ok, unless someone else (or himself, or whatever) uses same class for a tottaly different thing.

This could all be avoided if you could the the script to use as a "scope" (I know it is not the correct phrasing, couldn't find any better) the file where it was declared on.

Note: This is a theoretical question. For each particular case a solution could be found, but defining some kind of namespaces for this scenarios would solve the whole class of problems.

How could that be achieved?

Answer 1

As long as you're accessing the DOM the only way I see would be to use the "old" inline event:

<!-- 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>
...........

Now the function name cannot be used by Developer B. But when accessing DOM some kind of restriction will always be there.

However when creating the input by Script you can bind the handler directly to the 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>