JSLintでJavaScriptコードを精錬
6544 ワード
英文原文:Using JSLint to Refine Your Code,コンパイル:伯楽オンライン–胡蓉(@蓉_inShanghai)
モバイルアプリケーションの流行とHTML 5の広範な運用により、JavaScriptはますます流行している.JavaScriptの人気のある部分は、柔軟で便利なため、迅速に手に入れることができ、ヘビー級の開発環境もサードパーティのアプリケーションサポートも必要ありません.テキストエディタを開いて保存し、最後にWebブラウザで実行すればいいからです.
しかし,初心者にとっては,JavaScriptを用いることには至る所に落とし穴がある.複雑なスクリプトでは、JavaScript言語の拡張性が奇妙なバグを引き起こすことが多い.たとえば、宣言されていないローカル変数は、グローバル変数を知らず知らずのうちに変更する可能性があります.
今、JSLintサイトを開きます.そのサイトが言ったように、「JavaScriptコード品質ツール」です.JSLintの作者はDouglas Crockfordで、JavaScript(ECMAScript)とJSONへの貢献で有名です.
(注:Douglas Crockfordはweb分野の技術権威の一つであり、JSON、JSLint、JSMin、ADSafeの創造者であり、名著「JavaScript:The Good Parts」(中国語版「JavaScript言語の粋」)の著者でもある.「JavaScript:世界で最も誤解されている言語」など、広く伝えられ、影響の深い技術文章をたくさん書いた.
JSLintはJavaScriptプログラマーがプログラミング中に一定の符号化規範に従うのを助ける.JSLintは、厳格モード(Strict Mode)に基づくことを前提として、第5版ECMAScript規格を参照する.一般的なモードに比べて、厳格なモードでは、コードをより厳格なルールで実行する必要があります.
(注:厳格なパターンを知らない子供靴は、この2つの文章「ECMAScript 5.1概要」「JavaScript厳格なパターン(Strict Mode)を使ってチームの開発効率を高める時だ」を参考にすることができます)
JSLintの使用
JSLintで実行する例を示します.簡単なjQueryプラグインを書き、prefixでmsgが受信した情報を表示し、typeに渡された値がfalseであればprefixを表示しません.
このコードはjQueryのプラグインとして動作するのは正常ですが、FirefoxやChromeで動作すると、いくつかの明らかなエラーや、気づきにくい問題が見つかります.これらの問題を解決するために頭を使うよりも、JSLintを通じて私たちを助けてください.上のコードをJSLintのWebサイトのテキストボックスにコピーし、「JSLint」ボタンをクリックすると、コード推奨とエラープロンプトが下に表示されます.
JSLintが指摘した最初のエラーは、「use strict」宣言が失われたことです.このエラーは、関数が厳密モードで実行されていないことを示します.このエラーを修正するために、関数本体のヘッダに「use strict」文を追加して厳格なモードを開始します.
厳格モード宣言文を追加した後、再度「JSLint」ボタンをクリックすると、「use strict」を失ったエラーメッセージが消えることを示す.今、私たちは次の間違いを見ることができます.次のこのエラーはスペースに関する問題で、本当のエラーとは言えないので、安心して無視することができます.
ページの一番下の「messy white space」オプションをtrueに変更すると、functionキーワードの後にスペースを残さない書き方ができます.しかし、今では、「messy white space」オプションのdefaultプロパティを保持します.この機能は、他のスペースの問題をチェックするのに役立つので、後で話します.
同様に、JSLintが指摘した2番目と3番目のエラーは同じ行のコードを指しているが、エラーポイントは異なることに注意してください.後者のJSLintは、右かっこ")"と左カッコ"{"の間に1つのスペースを空けることをお勧めします.今、このエラーを修正します.
スペースを挿入した後、もう一度「JSLint」ボタンをクリックすると、次のエラーが8行目、39文字目に表示されます.prefixesオブジェクトには、2つの同じwarningプロパティが含まれており、2つ目のwarningをcautionに変更します.
今回は「JSLint」ボタンをクリックせずに、次のエラーを直接見てみましょう.オブジェクトを定義するコードブロックの最後にカンマが1つ追加されました.このようなエラーでは、ChromeやFirefoxなどのブラウザは無視するかもしれませんが、IEはそんなに友好的ではないので、このカンマを削除します.
その後の2つのエラーは、定義されていない変数concatMsgを指します.変数が現在の役割ドメインで定義されていない場合、JavaScriptは、他の場所で定義されているかどうかをグローバルに検索します.このとき、外部コードを導入し、たまたまグローバルで変数を定義した場合、エラーが発生すると、頭皮を破り、バグの原因を探すのに苦労する可能性があります.幸いにもJSLintがあって、私たちはこのような間違いを揺りかごの中で殺すことができます.
このエラーを修正し、コードを再構築します.concatMsgのデフォルト値はmsgなので、必要に応じて変更する前にmsgを先に割り当てることができます.以下に示すように、concatMsgに関するコードは次のとおりです.
下に進むと、以前と似たようなスペースの問題があり、それを修正します.続いて、JSLintはセミコロンが1つ失われたことを指摘した(下図のように).JSLintは、セミコロンの最後のコマンドラインが終了しないと仮定します.したがって、以下にifが現れると、JSLintはここにセミコロンがあるべきだと考えています.言語規範に基づいて、終了のセミコロンはあってもなくてもよいが、それに加えて良い習慣である.このような不良コードは、大きなプロジェクトのコラボレーションで不思議なバグを引き起こしやすいからです.したがって、通常の符号化過程では、このような問題を避けるべきである.
次はまた良い間違いの例です.JavaScriptでは、「等しい」(==)と厳密な「等しい」(===)の比較があります.このケースコードでは、厳密な「等しい」比較を採用しない場合、msgが空の文字列であってもfalse値であってもif内はtrueとなる.だから、ここでは厳格な「等しい」比較を採用します.
では、もう一度「JSLint」ボタンをクリックしましょう.次の図に示すように、エラーは10行目に発生し、JSLintは変数宣言をマージするのも良い符号化仕様だと考えています.concatMsg変数の宣言はprefixesに続くが、JSLintはカンマで区切られており、1つのコマンド文で変数宣言を完了したほうがよいと考えている.
次のエラーはフォーマットに関する問題です.どう見ても、1段空いているのではないでしょうか.本当につまらないですね.しかし,大量のスクリプトでは,このようなインデント問題がうまくいかないと発見しにくいバグを引き起こす.だから、コードの統一性のために、前に1つ移動しましょう.
次の問題はまた前に出会ったのと似ていますが、形式は違います.JavaScriptの関数は変数に帰属することもできるので、他の変数付与文と同様にJSLintは末尾にセミコロンを付けたいと考えています.
最後に、次のように、最後の行に2つのエラーが表示されます.1つ目の問題は、JSLintが閉カッコをjQueryの後に移動することを推奨します.これは、閉パッケージ関数定義に曖昧さが生じないためです.2つ目の問題は、JSLintがjQuery変数は存在しないと考えていることです.しかし、実際のページにjQueryファイルが導入されている可能性があるので、ページの一番下のテキストボックスに「jQuery」を入力してこの問題を解決することができます(訳者:JSLint Directiveの上のテキストボックス).
3つのパラメータを受信する必要があることを示すJSLintを再実行します.しかし、この例では、3番目のパラメータを使用したことがありません.そのため、ここではこの問題を解決する2つの方法があります.1つ目は、3番目のパラメータを削除します.2つ目は、下の「unused parameters」項目をtrueに変更します.このパラメータを保持する必要がある理由がある場合は、2番目の方法を使用します.
さて、JSLintで改良されたコードは以下の通りです.
JSLint命令
JSLintコマンドを使用して、ソースコードでJSLint変数を直接定義できます.これにより、ページ上で操作する必要がなくなります.次の例では、jQueryグローバル変数を注釈で定義し、「unparam」をtrueに設定します.
まとめ
この短い例では,JSLintはいくつかの明らかな誤りと無視しやすい誤りを指摘した.実際にコードを実行する前に、JSLintを通じていくつかのエラーを探して、私たちの開発効率とコード品質を効果的に向上させることができます.本当に上質なコードを書きたいなら、サーバー上で実行する前にJSLintでチェックしておきましょう.JSLintは独立したJSファイルバージョンも提供しているので、ダウンロードしてオンラインで実行することもできます.
—————————————————私は分割線です—————————————
翻訳者:
厳格なモードは、すべてのブラウザがサポートしているわけではありません.これはブラウザサポート統計表です.Webフロントエンドは、一時的に(さらには長時間)厳格なモードに従うことができない可能性がありますが、モバイル開発では厳格なモードを採用するのが望ましいことは明らかです.今のところ使えるかどうかにかかわらず、フロントエンドのエンジニアたちはこれらのツールを利用して自分が良いコード習慣を身につけるのを助けるべきだと思います.良い習慣はあなたに利益をもたらします.ここでは映画「鉄娘子」の一言を少し誇張して引用します.Watch your habits,for they become your character
英文原文:Using JSLint to Refine Your Code,コンパイル:伯楽オンライン-胡蓉
【転載が必要な場合は、原文リンク、訳文リンク、翻訳者などの情報を表示して保持してください.ご協力ありがとうございます.】
関連記事ページ構築とjsフロントエンドが言わざるを得ないこと Javascriptモジュール化プログラミング(一):モジュールの書き方 でよく使われるJavascript設計モード JavaScript:すべてのルールを破る JavaScript:演算子
モバイルアプリケーションの流行とHTML 5の広範な運用により、JavaScriptはますます流行している.JavaScriptの人気のある部分は、柔軟で便利なため、迅速に手に入れることができ、ヘビー級の開発環境もサードパーティのアプリケーションサポートも必要ありません.テキストエディタを開いて保存し、最後にWebブラウザで実行すればいいからです.
しかし,初心者にとっては,JavaScriptを用いることには至る所に落とし穴がある.複雑なスクリプトでは、JavaScript言語の拡張性が奇妙なバグを引き起こすことが多い.たとえば、宣言されていないローカル変数は、グローバル変数を知らず知らずのうちに変更する可能性があります.
今、JSLintサイトを開きます.そのサイトが言ったように、「JavaScriptコード品質ツール」です.JSLintの作者はDouglas Crockfordで、JavaScript(ECMAScript)とJSONへの貢献で有名です.
(注:Douglas Crockfordはweb分野の技術権威の一つであり、JSON、JSLint、JSMin、ADSafeの創造者であり、名著「JavaScript:The Good Parts」(中国語版「JavaScript言語の粋」)の著者でもある.「JavaScript:世界で最も誤解されている言語」など、広く伝えられ、影響の深い技術文章をたくさん書いた.
JSLintはJavaScriptプログラマーがプログラミング中に一定の符号化規範に従うのを助ける.JSLintは、厳格モード(Strict Mode)に基づくことを前提として、第5版ECMAScript規格を参照する.一般的なモードに比べて、厳格なモードでは、コードをより厳格なルールで実行する必要があります.
(注:厳格なパターンを知らない子供靴は、この2つの文章「ECMAScript 5.1概要」「JavaScript厳格なパターン(Strict Mode)を使ってチームの開発効率を高める時だ」を参考にすることができます)
JSLintの使用
JSLintで実行する例を示します.簡単なjQueryプラグインを書き、prefixでmsgが受信した情報を表示し、typeに渡された値がfalseであればprefixを表示しません.
(function ($) {
$.fn.loading = function(msg, type, cssClass){
var prefixes = {
warning: 'Warning: ' + msg,
error: 'Error: ' + msg,
info: 'Info: ' + msg,
warning: 'Caution: ' + msg,
};
if (type) {
concatMsg = prefixes[type];
} else {
concatMsg = msg;
}
$(this).each(function() {
var tis = $(this)
if (msg == false) {
tis.html('');
} else {
tis.html(concatMsg);
}
});
}
})(jQuery);このコードはjQueryのプラグインとして動作するのは正常ですが、FirefoxやChromeで動作すると、いくつかの明らかなエラーや、気づきにくい問題が見つかります.これらの問題を解決するために頭を使うよりも、JSLintを通じて私たちを助けてください.上のコードをJSLintのWebサイトのテキストボックスにコピーし、「JSLint」ボタンをクリックすると、コード推奨とエラープロンプトが下に表示されます.
JSLintが指摘した最初のエラーは、「use strict」宣言が失われたことです.このエラーは、関数が厳密モードで実行されていないことを示します.このエラーを修正するために、関数本体のヘッダに「use strict」文を追加して厳格なモードを開始します.
'use strict';厳格モード宣言文を追加した後、再度「JSLint」ボタンをクリックすると、「use strict」を失ったエラーメッセージが消えることを示す.今、私たちは次の間違いを見ることができます.次のこのエラーはスペースに関する問題で、本当のエラーとは言えないので、安心して無視することができます.
ページの一番下の「messy white space」オプションをtrueに変更すると、functionキーワードの後にスペースを残さない書き方ができます.しかし、今では、「messy white space」オプションのdefaultプロパティを保持します.この機能は、他のスペースの問題をチェックするのに役立つので、後で話します.
同様に、JSLintが指摘した2番目と3番目のエラーは同じ行のコードを指しているが、エラーポイントは異なることに注意してください.後者のJSLintは、右かっこ")"と左カッコ"{"の間に1つのスペースを空けることをお勧めします.今、このエラーを修正します.
スペースを挿入した後、もう一度「JSLint」ボタンをクリックすると、次のエラーが8行目、39文字目に表示されます.prefixesオブジェクトには、2つの同じwarningプロパティが含まれており、2つ目のwarningをcautionに変更します.
今回は「JSLint」ボタンをクリックせずに、次のエラーを直接見てみましょう.オブジェクトを定義するコードブロックの最後にカンマが1つ追加されました.このようなエラーでは、ChromeやFirefoxなどのブラウザは無視するかもしれませんが、IEはそんなに友好的ではないので、このカンマを削除します.
その後の2つのエラーは、定義されていない変数concatMsgを指します.変数が現在の役割ドメインで定義されていない場合、JavaScriptは、他の場所で定義されているかどうかをグローバルに検索します.このとき、外部コードを導入し、たまたまグローバルで変数を定義した場合、エラーが発生すると、頭皮を破り、バグの原因を探すのに苦労する可能性があります.幸いにもJSLintがあって、私たちはこのような間違いを揺りかごの中で殺すことができます.
このエラーを修正し、コードを再構築します.concatMsgのデフォルト値はmsgなので、必要に応じて変更する前にmsgを先に割り当てることができます.以下に示すように、concatMsgに関するコードは次のとおりです.
var concatMsg = msg;
if (type) {
concatMsg = prefixes[type];
}下に進むと、以前と似たようなスペースの問題があり、それを修正します.続いて、JSLintはセミコロンが1つ失われたことを指摘した(下図のように).JSLintは、セミコロンの最後のコマンドラインが終了しないと仮定します.したがって、以下にifが現れると、JSLintはここにセミコロンがあるべきだと考えています.言語規範に基づいて、終了のセミコロンはあってもなくてもよいが、それに加えて良い習慣である.このような不良コードは、大きなプロジェクトのコラボレーションで不思議なバグを引き起こしやすいからです.したがって、通常の符号化過程では、このような問題を避けるべきである.
次はまた良い間違いの例です.JavaScriptでは、「等しい」(==)と厳密な「等しい」(===)の比較があります.このケースコードでは、厳密な「等しい」比較を採用しない場合、msgが空の文字列であってもfalse値であってもif内はtrueとなる.だから、ここでは厳格な「等しい」比較を採用します.
では、もう一度「JSLint」ボタンをクリックしましょう.次の図に示すように、エラーは10行目に発生し、JSLintは変数宣言をマージするのも良い符号化仕様だと考えています.concatMsg変数の宣言はprefixesに続くが、JSLintはカンマで区切られており、1つのコマンド文で変数宣言を完了したほうがよいと考えている.
次のエラーはフォーマットに関する問題です.どう見ても、1段空いているのではないでしょうか.本当につまらないですね.しかし,大量のスクリプトでは,このようなインデント問題がうまくいかないと発見しにくいバグを引き起こす.だから、コードの統一性のために、前に1つ移動しましょう.
次の問題はまた前に出会ったのと似ていますが、形式は違います.JavaScriptの関数は変数に帰属することもできるので、他の変数付与文と同様にJSLintは末尾にセミコロンを付けたいと考えています.
最後に、次のように、最後の行に2つのエラーが表示されます.1つ目の問題は、JSLintが閉カッコをjQueryの後に移動することを推奨します.これは、閉パッケージ関数定義に曖昧さが生じないためです.2つ目の問題は、JSLintがjQuery変数は存在しないと考えていることです.しかし、実際のページにjQueryファイルが導入されている可能性があるので、ページの一番下のテキストボックスに「jQuery」を入力してこの問題を解決することができます(訳者:JSLint Directiveの上のテキストボックス).
3つのパラメータを受信する必要があることを示すJSLintを再実行します.しかし、この例では、3番目のパラメータを使用したことがありません.そのため、ここではこの問題を解決する2つの方法があります.1つ目は、3番目のパラメータを削除します.2つ目は、下の「unused parameters」項目をtrueに変更します.このパラメータを保持する必要がある理由がある場合は、2番目の方法を使用します.
さて、JSLintで改良されたコードは以下の通りです.
(function ($) {
'use strict';
$.fn.loading = function (msg, type, cssClass) {
var prefixes = {
warning: 'Warning: ' + msg,
error: 'Error: ' + msg,
info: 'Info: ' + msg,
caution: 'Caution: ' + msg
}, concatMsg = msg;
if (type) {
concatMsg = prefixes[type];
}
$(this).each(function () {
var tis = $(this);
if (msg === false) {
tis.html('');
} else {
tis.html(concatMsg);
}
});
};
}(jQuery));JSLint命令
JSLintコマンドを使用して、ソースコードでJSLint変数を直接定義できます.これにより、ページ上で操作する必要がなくなります.次の例では、jQueryグローバル変数を注釈で定義し、「unparam」をtrueに設定します.
/*global jQuery*/
/*jslint unparam: true */
(function ($) {
‘use strict’;
…
}(jQuery));まとめ
この短い例では,JSLintはいくつかの明らかな誤りと無視しやすい誤りを指摘した.実際にコードを実行する前に、JSLintを通じていくつかのエラーを探して、私たちの開発効率とコード品質を効果的に向上させることができます.本当に上質なコードを書きたいなら、サーバー上で実行する前にJSLintでチェックしておきましょう.JSLintは独立したJSファイルバージョンも提供しているので、ダウンロードしてオンラインで実行することもできます.
—————————————————私は分割線です—————————————
翻訳者:
厳格なモードは、すべてのブラウザがサポートしているわけではありません.これはブラウザサポート統計表です.Webフロントエンドは、一時的に(さらには長時間)厳格なモードに従うことができない可能性がありますが、モバイル開発では厳格なモードを採用するのが望ましいことは明らかです.今のところ使えるかどうかにかかわらず、フロントエンドのエンジニアたちはこれらのツールを利用して自分が良いコード習慣を身につけるのを助けるべきだと思います.良い習慣はあなたに利益をもたらします.ここでは映画「鉄娘子」の一言を少し誇張して引用します.Watch your habits,for they become your character
英文原文:Using JSLint to Refine Your Code,コンパイル:伯楽オンライン-胡蓉
【転載が必要な場合は、原文リンク、訳文リンク、翻訳者などの情報を表示して保持してください.ご協力ありがとうございます.】
関連記事