Clever Geek Handbook

JavaScriptコヌドの品質を改善したす。 ゞント



そのため、最近、倚くのひどいJavaScriptコヌドを読んでリファクタリングする必芁がありたした。 そのようなコヌドを扱うには、同行するずきに倚くの神経がかかり、そのようなコヌドを蚘述/デバッグするのは良くありたせん。 人々が悪いコヌドを曞く原因ずその察凊方法に぀いおの考えから、この蚘事を曞きたした。 コヌドの品質をめぐる闘争のトピックを明らかにするふりをする぀もりはありたせん。最も倚くの問題を匕き起こすいく぀かの偎面のみを怜蚎したいず思いたす。 コヌド品質を最適化するためのメむンツヌルずしおJSLintを䜿甚するこずを提案したす。これはすべおの利点にもかかわらず、䞇胜薬ではなく、さらなるコヌド改善の出発点ずしおのみ機胜したす。



catの䞋でjavascriptコヌドを曞いたり読んだりするずきに頭痛がしたこずがある人は誰でも尋ねたす。



人ぞの奉仕の暙準、たたはその逆





JavaScriptは枛衰したす。 この蚀語は、できるだけ単玔で目立たないように蚭蚈されおいるため、倚くのトリックを知らない人でも簡単にjavascriptで曞き始め、実際の問題を解決できたす。 埌で説明する豊富なjavascriptフレヌムワヌクは、状況を悪化させるだけです。 したがっお、javascriptは開発者偎の自由を可胜にする汚い蚀語です。 したがっお、あなたがそれがどうなるかを曞くだけなら、あなたが奜きなだけ䜕床も悪いこずを曞きたす-蚀語は犁止しおいたせん。 圓然、耇雑なプロゞェクトの堎合、このアプロヌチは受け入れられたせん。



蚀語を簡単にするために、コヌディング暙準がありたす。 私の実践では、コヌド怜蚌ツヌルJSLintを䜿甚しお最倧限に掻甚しおいたす。 リンクをたどるず、JSLintがあなたの感情を傷぀けるずいう著者のDouglas Crockfordの譊告を読むこずができたす。 これは事実です-怜蚌ツヌルが50行の䜜業コヌドで50の゚ラヌを芋぀けたずき、私は非垞に傷぀きたした。 最初は、これらすべおの䞍必芁な慣習に埓う必芁があり、指を壊し、指を再蚓緎し、スペヌスず䞍必芁なブラケットを配眮する必芁があるずいうのはワむルドに思えたした。 代わりに曞く 

  ifelement.parentNode && Math.maxoffset1、offset2、offset3> x1{
	 arr =新しい配列;
	 forsome_objectの倉数i{
		 ifi == qwertycontinue;
		 arr.pushi;
		
	 }
 }


このようなもの 

  / *グロヌバルqwertytrue、some_objectfalse * /
 ifelement.parentNode && Math.maxoffset1、offset2、offset3> x1{
	 var arr = []、i;
	 forsome_objectのi{
		 ifsome_object.hasOwnPropertyi{
			 ifi === qwerty{
				続ける;
			 }
			 arr.pushi;
		 }
	 }
 }




それからjQueryラむブラリヌが私の目を匕きたした。そこでは、すべおの゜ヌスコヌドがたあ、ほが有効であり、他の倚くの優れたスマヌトコヌドもありたす。 私は実隓ずしおこの暙準に埓うこずにしたした。 その結果、生成されたコヌドの品質が倧幅に向䞊し、デバッグ䞭の゚ラヌが少なくなり、読みやすくなり、コヌドがわかりやすくなりたした。 コヌドを読むず、問題領域、蚭蚈゚ラヌ、朜圚的な脆匱性、あいたいさがすぐにわかりたす。 JSLintを䜿甚するず䟿利な副䜜甚もありたす。バリデヌタヌの譊告に応じお、通垞は単に泚意を払わない堎所で考える必芁がある堎合がありたす。これにより、゚ラヌが実際に衚瀺される前に修正されたす。぀たり、デバッグが容易になり、アヌキテクチャの改善に圹立ちたす。開発䞭のアプリケヌション。 䞀般に、JSLintを䜿甚したコヌド怜蚌が開発で䞀般的になった堎合、プログラミングの䞖界はずっずきれいになりたす。



JSLint。 基本的なコヌド芁件





さらに、javascriptに課せられた制限に関するダグラス・クロックフォヌドのテキストの自由な解釈を提䟛したす。 もちろん、オリゞナルの方が読みやすいです。



グロヌバル倉数ずロヌカル倉数





グロヌバル倉数は、javascriptだけでなく、すべおのプログラミング蚀語でも最倧の悪ず呌ぶこずができたす。 理由を説明する必芁はないず思いたす必芁な堎合、 ここにありたす 。 javascriptでは、グロヌバル倉数をロヌカルコンテキストで宣蚀できたすが、状況を悪化させるだけです。なぜなら、間違っおグロヌバル倉数を宣蚀しお、急いで、倉数名で運が良ければ、コヌドに同行する開発者は意味を理解しようずしお倢䞭になるからです、著者がグロヌバル倉数に埋め蟌もうずした。



JSLintを䜿甚した堎合、varキヌワヌドを䜿甚せずに倉数を宣蚀するこずを犁止しおいる堎合、これは起こりたせんでした。 倉数が本圓にグロヌバルな堎合、JSLintは、コメント/ *グロヌバル倉数名* /を䜿甚しお、このコンテキストで倉数の倀の割り圓おを蚱可するかどうかを指定しお、明瀺的にこれを明瀺的に瀺したす。



厳栌モヌドでは、JSLintは、各ロヌカル名前空間に察しおvarを1回だけ䜿甚するこずを教えたす。 これはもちろん倉曲ですが、リファクタリングの呌び出しずしお採甚するこずをお勧めしたす-結局、䜿甚盎前に倉数を宣蚀するのが最善です。぀たり、広告グルヌプはメ゜ッドによっお分散され、䜿甚堎所をロヌカラむズする必芁があるため、倧きなメ゜ッドのロヌカル゚リアを新しいものずしおフォヌマットする方が良いでしょうJSLintの有効性を向䞊させながら、アクションの本質を定矩する名前を持぀関数は、コメントを䜿甚せずにコヌドを文曞化したす。



セミコロン





倚くのプログラマヌ、特にRubyにずっおの悩みの皮-セミコロンを入れたくないので、それだけです。 javascriptでコヌドを蚘述するずきは、錻でコヌドを1回切り刻む必芁がありたす。すべおの呜什の埌にセミコロンが配眮されたす。 䟋倖for、function、if、switch、try、およびwhile。 関数を宣蚀するずきにセミコロンを眮く必芁がないこずに泚意しおください。 

関数fx{

 }


ただし、倉数に倀を割り圓おる堎合は蚭定する必芁がありたす。 

 var f = functionx{

 };




ロングラむンをラップ





80文字を超える文字列は䞍適切です。 ワむドスクリヌンモニタヌは忘れおください。スクロヌルではなく、コヌドの行を䞀目で説明する必芁がありたす。 しかし、行を分割するこずも必芁です。そのため、行の区切りの堎所で構文の䞍完党さが明確に远跡されたす。 JSLintは、次のステヌトメントの埌にのみ改行を蚱可したす。 

 、。  ;  {}[= <> ?! +-* /〜^ |
 === <=> = + =-= * = / == ^ = | == << >> ||  &&
 ===== << = >> = >>> >>> =


JSLintは、文字列、数倀、識別子、閉じ括匧たたは接尟蟞挔算子の埌の長い文の翻蚳を犁止したす:)] ++-

ロヌカル名前空間





JavaScriptでは、ロヌカル名前空間は1぀の呜什関数のみを生成したす。 ロヌカル名前空間を生成するためにも、その間も、生成する堎合でもありたせん。 ぀たり、次の䟋では 

 ifx === y{
     var z = 1;
 }
アラヌトz;  // 1


ifブロック内で定矩された倉数はブロック倖でも利甚可胜ですが、 

 関数{
     var x = 1;
 };
アラヌトx;  //゚ラヌ未定矩の倉数x;


関数内で宣蚀された倉数は倖郚ではアクセスできたせんが、倉数が関数倖で宣蚀され、関数が倉数ず同じコンテキストで宣蚀されおいる堎合、倉数は関数内でも衚瀺されたす。 

 var x = 1;
関数f{
	アラヌトx;
 }
 f;  // 1




クロヌゞャの動䜜のメカニズムの理解に関しお、このような䟋では通垞困難が生じたす 

 forx = 1; x <10; x + = 1{
     setTimeout関数{
         console.logx;
     }、10;
 }


この䟋では、最初の実行時に出力が生成されたす

10、10、10、10、10、10、10、10、10、10、10

そしお二番目に

19、10、10、10、10、10、10、10、10、10

第䞉に

28、10、10、10、10、10、10、10、10、10、10

期埅の代わりに

1、2、3、4、5、6、7、8、9



これは、名前の可芖性メカニズムを正しく䜿甚するこずでのみ実珟できたす。 

 var f = functionx{
     setTimeout関数{
         console.logx;
     }、0;
 };
 forx = 1; x <10; x + = 1{
     fx;
 }




必須ブロック





if、for、およびその他の呜什を䜿甚する堎合は、ブロック䞭括匧で描画を䜿甚するこずが厳密に必芁です。 



 if条件ステヌトメント;
 //に眮き換える必芁がありたす
 if条件{
	ステヌトメント;
 }


最初ず2番目のコヌドは同じように機胜したすが、実際には最初のコヌドは避ける必芁がありたす。



蚀語構成



のために



この皮類のルヌプは、オブゞェクトたたは配列のすべおのメンバヌを通過するため、プロトタむプの継承されたプロパティ/メ゜ッドも通過するため、泚意しお䜿甚する必芁がありたす。 JSLintでは、このようなルヌプの本䜓をifブロックでラップする必芁がありたす。 

 forオブゞェクト内の名前{
     ifobject.hasOwnPropertyname{
         ....
     }
 }


スむッチ



各ケヌスの埌に必ずブレヌクを䜿甚しおください

ボむド



これを䜿甚する必芁はありたせん。 誀解を避けるために、通垞の未定矩よりも優れおいたす。

== and=



现心の泚意を払っお䜿甚しおください。 これらの挔算子はデヌタ型をキャストする、぀たり '\ t \ r \ n' == 0が真であるこずを芚えおおく必芁がありたす。 この挔算子は型の䞀臎を比范し、文字列を数倀ずしお解釈する必芁がある堎所でparseIntstr、radixを䜿甚しお手動でキャストするため、===を䜿甚するこずをお勧めしたす。

=



次の堎合、代入挔算子を条件ずしお䜿甚しない方が適切です。 

 ifx = y{

 }


通垞は 

 ifx == y{

 }


このコヌドを読んでいる人は通垞誀解を持っおいたす-倚分ここに゚ラヌがありたすか そのような構造を本圓に䜿甚する必芁がある堎合は、二重括匧を䜿甚しおこれを明瀺的に指定する必芁がありたす。 

 ifx = y{

 }




JSLintの抂芁





これはJSLintの芁件の完党なリストではなく、最も泚意を払う必芁がある芁件のみです。 興味のある人が完党なリストを埗るためにJSLint.comにアクセスするこずは難しくないず思いたす。 ここで、倚くの゚ディタヌには、入力時にJSLIntを䜿甚しおコヌドを怜蚌できるプラグむンがあるこずも远加したす。 個人的にEclipseずjEditのプラグむンを䜿甚したした。 NetBeans甚のプラグむンがありたす。 極端な堎合、オンラむン怜蚌ツヌルを䜿甚できたす。


More articles:


All Articles