JSLint不喜欢var

Question

I was probing my code for errors with JSLint and so far I managed to fix all bugs except the problem when my global application variable is undefined.

I was using this code before JSlint which worked properly:

var APP = APP || (function {
    return {
        init: function () {

        }
    };
}(window.document));

then I would call

APP.init();

to initialize. But JSlint doesn't like global variables so I changed my code to this:

(function (global){
    var APP = {
        init: function () {

        }
    };
    return APP;
}(window.document));

This code passes the JSLint test with no problem, but then when I call APP.init(); it says that APP is used before it was defined, which is true. What would you recommend so that I don't use global variables but still create my application object, while my code passes JSlint test?

Answer 1

    (function (global){
    var APP = {
        init: function () {

        }
    };
    return APP;
}(window.document));

the above creates a scope/closure, so that only code inside your anonymous function can access the APP variable. JSHint has settings so you can set acceptable globals (such as jquery etc), I'd add APP to that and if the rest pass you know you only have that one variable/module as global. If you are using any 3rd party libs chances are you already have several global vars anyway

Answer 2

First code

In your original code, the actual error you would have gotten was

 #1 'APP' used out of scope.
    var APP = APP || (function() { // Line 1, Pos 11

It is not because JSLint hates global variables, but because it doesn't like the variable being assigned to it is defined in the same var statement.

Changing your code to use a different variable name would fix this problem

var app = APP || (function() {...}(..));

but then, one would expect that APP is already defined in the current scope. Otherwise you will get

 #1 'APP' was used before it was defined.

Second code

It doesn't work because, APP is visible only inside the function object you created. It is not visible anywhere outside it. Since you want to define APP in the global scope, you just have to attach it to the window object, like this

(function(global) {
    global.APP = {
        init: function() {

        }
    };
}(window));

Then

APP.init()

will work fine.

Instead of going through all these, you can straight away define APP like this

window.APP = {
    init: function () {
        "use strict";
        ...
    }
};

Answer 3

Before you give up on JSLint , know that it doesn't mind globals at all; it just wants you to declare them with a special format so that others reading your code know exactly what's going on.

The only "trick" here is if there's a chance your global APP isn't initialized yet and you really need to check for its "truthiness", as you do with APP = APP || (function... APP = APP || (function... . Then you do need to use the window (or whatever your global object is -- it's different if you use Node, for example) prefix trick.

Here's how:

/*jslint white:true, sloppy:true, browser:true */
/*global APP */

window.APP = window.APP || (function () {
    return {
        init: function () {
            window.alert('JSLint doesn\'t like empty blocks');
        }
    };
}(window.document));


APP.init();

And JSLint is happy!

I'm not against JSHint in theory, but that same flexibility that allows you to set all sorts of extra settings also tends to erode conformity, which is largely what I find the best benefit of a code linter to be. Give both a good, solid run, and see which you like best!