web-dev-qa-db-fra.com

Jshint comprend-il Angular?

jshint génère une erreur lors de la définition d'un module angular (ou directive, ou usine) comme recommandé par les Angular (par John Papa) ou Todd Motto ) Par exemple, pour un contrôleur comme celui-ci:

(function () {
    'use strict';

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

    function theController() {...}

})();

... jshint renvoie cette erreur:

'theController' was used before it was defined.

L'application angular fonctionne parfaitement malgré ces erreurs. Cependant je ne sais pas pourquoi jshint proteste ...

Qu'est-ce que je rate? Je me demande si jshint est un bon évaluateur de la qualité du code angular (malgré qu'il soit inclus dans les packages populaires comme générateur-angulaire) ou si c'est moi que je fais quelque chose de mal (bien que mon application travaux).

Merci d'avance!

javascriptangularjsjshint
24
David JM

Utilisez la propriété latedef et définissez-la sur false. Cela permet de hisser des fonctions, ce qui est bien pour l'OMI. Mais rapporte toujours le levage de vars, ce qui est mauvais OMI

18
John Papa

bien d'abord inclure angular dans vos "variables globales", par exemple:

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

déplacez ensuite votre définition de fonction avant de la référencer angulaire.

(function () {
    'use strict';

    function theController() {...}

    angular
        .module('myApp')
        .controller('myAppCtrl', theController);
})();
15
jack.the.ripper

Ainsi, une autre option, qui rend chaque linter heureux, consiste à déclarer la variable qui contiendra la fonction en premier, à l'utiliser comme paramètre, puis à la définir.

Mais personnellement, je ne suis pas sûr d'aimer le flux ici. Je pense que j'aime mieux la réponse de Jack, mais c'est un peu plus proche de ce que Papa semble préférer, si vous êtes avec son guide de style . En fait, je ne sais pas pourquoi ce n'est pas ce qu'il recommande, s'il veut vraiment que les fonctions apparaissent après leur utilisation (et il le fait). Sinon, vous ne pouvez pas utiliser son style avec latedef défini sur true dans JSHint - ou JSLint du tout .

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

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


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

Votre code devrait fonctionner, mais jshint va essayer de vous amener à coder de manière très stricte. À tout le moins, c'est une "bonne pratique" de définir vos fonctions avant de les utiliser. Comme je l'ai mentionné dans le commentaire ci-dessus, je pense que les moteurs javascript plus anciens s'exécutent de haut en bas (je ne me souviens pas avec certitude et ne peuvent pas tester) - donc si vous optez pour un support le plus large possible, vous voudrez écoutez jshint.

Il convient de noter ici que si vous utilisez le mot clé var pour définir votre fonction, vous obtiendrez une erreur - mieux expliquée par l'exemple:

Cela fonctionne ( 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 :)");
    }
})();

... mais ce n'est pas le cas ( 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 :)");
    }
})();
2
Ryan Wheale