Avoiding global scope?

Question

I like to include my javascript in each page that needs it (more general js files go in the document head):

-- item.html --
<div id="item">
<script type="text/javascript" src="item.js"></script>
 ...
</div>

so in my script file I can now grab the container and use it to find things:

-- item.js --
var container = $('scripts').last().parent();
var f = container.find('form');

however, if the work needs to be done after the page loads:

$().ready(function() {
    var f = container.find('form');
});

I have a problem because container scopes across files. consider:

-- index.html --
<div id="item">
<script type="text/javascript" src="item.js"></script>
 ...
</div>
<div id="link">
<script type="text/javascript" src="link.js"></script>
 ...
</div>
<div id="part">
<script type="text/javascript" src="part.js"></script>
 ...
</div>

where the item.js fails because it picks up the last value container was assigned, instead of the one it was assigned at the time that it was declared such that it in essence performs:

$('#part').find('form');

instead of what I want:

$('#item').find('form');

so my question: how do I make the scope of container local to the file where it's declared?

alternatively, how could I do this differently?

Answer 1

Please look into modularizing your code using something like AMD to solve this. This is exactly what AMD was designed to solve.

There are several possible libraries for this. Since you are using jQuery, RequireJS might make the most sense, however there are other solutions as well, such as

• CommonJS using Browserify
• Webpack
• Duo
• RequireJS

Answer 2

I don't a environment to test this on, but would this small alteration work?

var container = $('script[src="item.js"]').parent();

You would have to specify the filename for each scope, but that doesn't seem like much of a burden.

Answer 3

JavaScript in the browser is functional scope. Which means variables declared (using the var keyword) belongs to the top most function, or the global scope if there is no function.

So to answer your question, in every file, you can do:

(function() {
    var someVariable = 1;
    //...
})();

What this does, is first evaluates and creates the anonymous function, and then immediately executes it with no arguments.

Since you are executing a function, any variables that you declare (as long as you use var), will be scoped to the function, and won't be available globally.