web-dev-qa-db-ja.com

jshintはAngularを理解していますか？

angularスタイルガイドによって推奨されるAngular module（or directive、or factory））を定義すると、jshintはエラーをスローします（- John Papa または Todd Motto ）。たとえば、次のようなコントローラの場合：

(function () {
    'use strict';

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

    function theController() {...}

})();

... jshintがこのエラーをスローします。

'theController' was used before it was defined.

angularアプリはこれらのエラーにもかかわらず完全に動作します。しかし、jshintが抗議する理由がわかりません...

何が欠けていますか？ jshintはangularコードの品質の良い評価者ですか（generator-angularとして人気のあるパッケージに含まれているにもかかわらず）、それとも私が何か間違っているのか（私のアプリではありますが）動作します）。

前もって感謝します！

javascriptangularjsjshint
24
David JM

latedefプロパティを使用して、falseに設定します。これにより、IMOで問題ない機能の巻き上げが可能になります。しかし、まだIMOが悪いvarの巻き上げを報告します

18
John Papa

最初にインクルードangularを "グローバル変数"に含めます。例えば：

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

次に、角度から参照する前に関数定義を移動します。

(function () {
    'use strict';

    function theController() {...}

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

したがって、すべてのリンターを幸せにする別のオプションは、最初に関数を保持する変数を宣言し、それをパラメーターとして使用してから定義することです。

しかし、個人的には、ここの流れが好きかどうかはわかりません。私はジャックの答えの方が好きだと思いますが、彼の スタイルガイド にダウンしている場合、これはパパが好むように思われるものに少し近いです。実際、彼が本当に使用した後に関数を表示したい場合（そして彼がそうした場合）、これがなぜ彼が推奨するものではないのかはわかりません。それ以外の場合、あなたはできません JSHint-またはJSLint すべてでlatedefをtrueに設定して彼のスタイルを使用します。

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

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


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

あなたのコードは機能するはずですが機能しますが、jshintは非常に厳密な方法でコードを作成しようとします。少なくとも、関数を使用する前に関数を定義しておくことは「良い習慣」です。上記のコメントで述べたように、古いJavaScriptエンジンは上から下に実行されると思います（確かに覚えていないし、テストもできません）。 jshintを聞いてください。

ここで注目に値するのは、varキーワードを使用して関数を定義するとエラーが発生するということです。例で説明すると、次のようになります。

これは機能します（ 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 :)");
    }
})();

...しかし、これはしません（ 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