Does jshint understand Angular?

问题

jshint is throwing an error when defining an angular module (or directive, or factory) as recommended by the Angular style guides (by John Papa or Todd Motto). For example, for a controller like this:

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);

    function theController() {...}

})();

... jshint throws this error:

'theController' was used before it was defined.

The angular app works perfectly despite these errors. However I don't know why jshint protests...

What am I missing? I wonder if jshint is a good evaluator of the quality of the angular code (despite it is included with popular packages as generator-angular) or it's me that I am doing something wrong (although my app works).

Thanks in advance!

回答1:

Use the latedef property and set it to false. This allows hoisting of functions, which IMO is fine. But still reports hoisting of vars, which is bad IMO

回答2:

well first of include angular in your "globals variables", for example:

"globals": { // Global variables.
        "jasmine": true,
        "angular": true,
        "browser": true,
        "element": true,
        "by":true,
        "io":true,
        "_":false,
        "$":false
    }

then move your function definition before you reference it from angular.

(function () {
    'use strict';

    function theController() {...}

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);
})();

回答3:

So another option, that makes every linter happy, is to declare the variable that'll hold the function first, use it as a param, and then define it.

But personally I'm not sure I love the flow here. I think I like jack's answer better, but this is a little closer to what Papa seems to prefer, if you're down with his style guide. Actually, I'm not sure why this isn't what he recommends, if he really wants functions to appear after they're used (and he does). Otherwise, you can't use his style with latedef set to true in JSHint -- or JSLint at all.

(function () {
    'use strict';
    var theController;

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);


    theController = function () {
        return "so jslint doesn't complain about empty blocks";
    };
}());

回答4:

Your code should work, but jshint is going to try and get you to code in a very strict manner. At the very least it's a "good practice" to have your functions defined before you use them. As I mentioned in the comment above, I think older javascript engines execute from top to bottom (can't remember for sure though and can't test) - so if you're going for wide-as-possible support you will want to listen to jshint.

Something worth noting here is that if you use the var keyword to define your function, you will get an error - best explained by example:

This works (http://jsfiddle.net/ryanwheale/kr8L825p/)

(function() {
    try {
        foo();
    } catch(ex) {
        alert("ahhhhh, what's going on?!?!?\n\n" + ex.message);
    }

    function foo() {
        alert("I was hoisted to the top of this scope before execution :)");
    }
})();

... but this doesn't (http://jsfiddle.net/ryanwheale/kr8L825p/4/)

(function() {
    try {
        foo();
    } catch(ex) {
        alert("ahhhhh, what's going on?!?!?\n\n" + ex.message);
    }

    var foo = function() {
        alert("I was hoisted to the top of this scope before execution :)");
    }
})();

来源：https://stackoverflow.com/questions/26288367/does-jshint-understand-angular

标签

javascript

angularjs

jshint