良いJavaScriptを書くための5つ以下のヒント [閉まっている]

JavaScriptは明らかに非常に不可欠になりました。しかし、私はまだそれに慣れていないので、このような混乱のように感じ、今は対処したくないという気持ちと戦うのは難しいと感じました。JavaScriptを使用しているよりも、他の言語をはるかに理解しています。この恐怖に対処できないように思えるからです。JavaScriptを書いているときに、ワイマラナーの子犬の肖像画を描こうとしているような気がします。

たいていの場合、私は自分が行うそれぞれの動きを自問することができるという最も重要な指示をいくつか覚えておくのに役立ちます。（私の考えでは、一握りは5つ以下です。）

JavaScriptをコーディングしているときに、移動ごとに質問する必要があるJavaScript固有の5つ（またはそれ以下）の質問をリストできますか？彼らは何でしょうか？

更新：明確にするために、JavaScriptを学習する際に留意すべき5つのことは求めていません。私は常に自分自身に問いかける5つの質問を求めています。誰もが常に問うべきです。「これをどこか他の場所で繰り返しますか？」のような高レベルの質問。または「この変数/関数名は十分に具体的（または具体的すぎる）」<==これらの質問例はJavaScriptに固有のものではありません。JavaScript固有のディレクティブを探しています。

これに2つの部分で答えます。1つは、「優れたJavaScript を作成するための5つ以下のヒント」です。もう1つは、「優れたJavaScriptを作成するための5つ以下のヒント」です。

学習：

1. 質問をする
2. 聴く
3. 読んだ
4. ものを作る

やること：

1. グローバルを避ける（モジュール化）
2. ループの外で難しいことを行う（DOM選択、関数宣言など）
3. スコープの仕組みを学ぶ
4. クロージャーを使用するタイミングと方法を学ぶ
5. オブジェクト指向JSの仕組みを学ぶ

編集（OPに準拠するための質問を追加）：

どのスコープを参照していますか？

これは、リークされたグローバル、イベントハンドラ、およびクロージャを使用するタイミングに役立ちます。

繰り返しますか？

オブジェクト指向技術の適切な抽象化と使用が重要です。それらを賢く使用してください。

私のコードは繰り返されていますか？

DOMアクセスをループに入れたり、ループ（匿名またはそれ以外）で関数を作成したりするのを見つけるのは非常に簡単です。これは、従来のループを使用するコード、setTimeoutまたはsetInterval従来のループに当てはまることに注意してください。

これは私がそれが意味すると思うことを意味しますか？

JSの真偽値は、特に厳密ではない比較（==とは対照的に===）を使用する場合、少し注意が必要です。動的型付け、型強制、およびオブジェクトまたはリテラルを参照しているかどうかも関連している可能性があります。

まず、その背後にあるテクノロジーがどのように機能するかを理解します。

仕組みの背後にある知識、ネットワークの問題に遭遇すること、または私が数え切れないほど見てきたように、人々はサーバー側とクライアント側が実際に何であるかを完全に理解できないため、これを知る必要があります。最もよく見られるnewbの質問の1つは、「JSでASPコードの変数を変更するにはどうすればよいですか？」です。

• イーサネット/ WifiとTCP / IPが何が起こっているのかを一般的に理解していることを理解していますか？
• 実際にどのくらいのHTTPを知っていますか？
• 実際にHTMLを取得していますか？確かに、タグがどのように機能しネストするかはご存知かもしれませんが、実際にはdoctypeおよびquirksモードを理解していますか？リスト要素を段落タグで囲むべきではないことを理解していますか？
• JavaScriptを作成します（そして、サーバー側で実行できることを説明します）。ecmascript、livescript、mocascript、jsscript、node ...
• Window APIを学び、DOM APIを学び、XHR APIを学びます。これら3つのことを知らない場合、ブラウザ用のコードを書くビジネスはありません。

自分のコードが自分よりも大きいこと、または特定の状況を理解する

• 確かに、あなたは何かを書きましたが、誰でもそれを見ることができます。それはすべて「オープン」ソースです。確かに、あなたはそれを難読化し、最小限に抑えることができます...一日の終わりに、あなたにコードを見たいなら、あなたが設置した方法を打ち負かすのは簡単です。
• 複数のブラウザーの違いを理解する必要があります。最も人気のあるもの、または市場の人口統計にあるものをターゲットにします。たとえば、ie6は、テーブル専用のDOM APIメソッドではなくappendChildを使用した場合、DOMテーブルセル要素をレンダリングしません。より多くの例がありますので、それらを学ぶ必要があります。
• 特定のブラウザではなく、ブラウザでこれらの問題すべてに関連するコードを記述する方法を理解する必要があります。あるブラウザーではうまく機能するものが、別のブラウザーでは遅いということをすぐに理解できます。ブラウザがどのように動作し、なぜ異なるのかを理解する必要があります。
• オーディンのひげを愛するために、コードに対してクロスサイトスクリプティング攻撃を行うことを許可するコードを書かないでください。セルにajax呼び出しを行い、次のようなことをする場合cell.innerHTML = "<script>alert("xss")</script>"を行い、アラートボックスが表示された場合、それは間違っています。
• DynamicDrive、w3Schools、および悪いアドバイスを与えるWebサイトから血まみれの地獄を避けてください。良いアドバイスを与えるコミュニティを見つける必要があります。ここでStack OverflowにはJavaScriptとNode.JSのチャットルームがあり、w3sのようなサイトが古いデータを保持し、それを気にすることなく、「より良い」ものの限界を押し続けるために最善を尽くしています。W3Cなどの公式仕様サイトに固執する必要があります、Mozilla Developer Network（MDN）。コードの査読を依頼してください。コードで何か痛いことをしているように感じるとき、コードで多くのカット+ペースト+微調整をしているときは、すぐにチャットルームに来て、より良いコードを書くためのガイダンスを求めるべきです。
• あなたが指導のために来るとき、またはあなたが作った本当にクールなものを共有したいとき...お願い、かなりお願いします。文書化したこと、変数名が意味をなすこと、すべてが一行になっていないことを確認してください。きれいなコードを書く必要があります。あなたがゴミの山を持っているなら、あなたが失敗しただけでなく、あなたを助ける方法を知っている誰も望みません。助けてください。
• JavaScriptを作成したいのですが、それはすごいことです。だれもがJavaScriptをサポートしているわけではありません。これには2つの理由があります。1）皆のための高速インターネット（「ajax all things」ではなく、より遅いエクスペリエンスにつながります）。2）コンソールベースのブラウザを使用している人、スクリプトを実行していない人、携帯電話を使用する方がWebにアクセスしやすい。私が言おうとしているのは、誰かがJavaScriptを持っていない場合、あなたのサイトは優雅に劣化し、少なくとも<noscript>タグを使用してそれらについて警告することです。
• JavaScriptのプロトタイプの性質により、言語の実際の動作を変更することができます。これは非常に便利です。JavaScriptが進化しているので、JSの古いバージョンである「ECMA Script 3」から「ECMA Script 5」（別名、es5）に移行しています。プロトタイプのため、es5のように動作するようにフィールドのes3言語を修正できます。つまり、10年前のブラウザである6は、昨年登場した言語機能を取得します。可能な限りes5-shimを使用してください。それらは本当にクールであり、調査する必要があります。
• 英語を話す白人の子供たちの西洋の世界は、インターネットを使用する人ではありません。それに応じてコーディングします。これは、国際化を理解し、より高い需要に対処するコードを記述する必要があることを意味します。10年前はオンラインで5億人未満でしたが、現在は約20億人ですが、さらに10年で？おそらく地球上のすべての人の近くにインターネットアクセスがあります。つまり、の正規表現に適合しない名前をサポートする必要があります/[a-z ']/iが、ヒンディー語、アラビア語、アクセント（近視眼的な開発者からの既存の問題）、中国語を含む必要があります、 その他。文字セット、UnicodeおよびUTF-8を理解します。

あなたはプログラマーであり、パスタ工場ではありません。スパゲッティを書くのをやめる。

• 意味のあるものにちなんで変数に名前を付けます。
• コードを文書化します。rhinoを搭載したJSDocを使用しているか、大量の落書きがあるかは気にしません。コードを使用する人を支援するドキュメントを作成します。コードを改善または保守したい人のためにドキュメントを書きます。有用なコメントを含める。"This fizzes the bizz"または英語の半フランス語のようなコメントは役に立ちません。関数の機能を説明します。コードの複雑なセクションを説明します。
• コードの繰り返しを制限する方法を見つけます。モジュール設計または機能パターンを探します。抽象化できるものをご覧ください。同じことをするために、コードの大きなセグメントを切り取り、貼り付け、微調整することは決してしないでください。
• DOM APIを理解する必要があります。DOMとウィンドウオブジェクトは、多くのすばらしいものを提供します。これは多くの作業のように聞こえますが、それは大きな怖い頭字語だからです。JavaScript忍者の多くは、などのコードを書くのが好き<a href="javascript:alert("foo")">です。FFSはそれをしません。完全なドキュメントがロードされるのを待ち、HTMLドキュメントからJavaScriptコードを分離します。これは基本的なOOPプラクティス101です。JSまたはCSSをHTMLドキュメントにインライン化しないでください。それを適切に行う方法を見つけ出すか、それを行う方法を示す方法を知っている人を見つけます。繰り返しますが、質問をしてください。
• これJavascript:foo("buz")は疑似プロトコルであり、完全にはサポートされていません。インラインJavaScriptを使用しないと、そもそもそれを使用することはありません。この地球上でも、宇宙のどこでも、JavaScriptをHTML要素内に配置する必要がある理由は何もないと心から約束します。今まで。だからしないでください。そんなことをする人はもう助けません。それは悪いことです。

常に壊れないような方法でコードを書く方法を見つけてください。

• グローバル変数は最大の問題の1つです。JavaScriptでの関数型プログラミングの仕組みを理解してください。巻き上げとは何かを理解します。グローバル変数を回避する方法を見つけます。
• 静的コード分析ツールを使用します。これらは、コードの作成時に作成した小さな「おっと」をすぐに警告します。どこかにセミコロンを忘れましたか？ああ、そこにある。どこかにグローバルがありますか？ああ、そこにある。あなたがそれを実行しようとしたときにミステリーエラーの束をスローするかもしれないコード？ああ！あります！単なる構文エラーである何かを見つけようとして、何時間もコードの山をねじ込んで見つめる必要はもうありません。（まあ、ほとんど何も、あなたはそれをキャッチできない何かをしたかもしれませんが、それは一般的に素晴らしいです）。
• 単体テスト。しない理由はありません。単体テストツールはたくさんあります。基本的に、単体テストは「ここに私の機能」と「Yを出力したい」「ここにテスト入力があります」そしてテストは「すべて機能しましたか？」です。人気のあるQUnitのような多くのJSテストフレームワークがあります。お気に入りの検索エンジンのツアーに参加して、あなたの好きなものをくすぐります。しかし、それらを使用してください。
• バージョン管理とも呼ばれるソース管理。Gitは人気があり、それには十分な理由があります。SVNと他のいくつかも同様です。これをすぐにやめるために必要なのは、量産コードの編集です。ファイルの名前変更を停止する必要がありmain_backup_20110911.js.bak.1ます。物を失い、ディレクトリが乱雑になり、前の時点に簡単に「巻き戻す」ことはできません。何が起こっているのか、コードのパッチを作成することはできません。ですから、GITの学習を始めてください。1時間かかるはずで、二度と戻れません。
• ピアレビュー。あなたも私もそうではありません。できる限りフィードバックを求めることで良くなります。それはあなたがそれを行うべき方法です。

人々が愛するJavaScriptを書く

• コードが遅い理由を見つけてください。使用jsprefとテストを作成。
• 1つのDOM要素へのイベントのバインドを停止すると、処理が遅くなり、重大なイベントバブリングの問題が発生し、多くの時間を無駄にします。JavaScriptで「イベント委任」を調査します。
• innerHTMLを使用してDOMを編集するのをやめます。これは、HTMLとは何か、DOMとは何かを学ぶことに戻ります。HTMLは、ブラウザレンダリングエンジンがドキュメントオブジェクトになるプログラミングオブジェクトの束を作成するために使用するサーバーから送信されるデータです。innerHTMLを使用する場合、ブラウザーにすべてを再レンダリングするように要求します。ありがたいことに、10年以上前の方法と同様に、DOM APIを作成しました。これにより、全体を更新することなく「子を追加」または「テキストノードを作成」できます。innHTMLは、Microsoftが発明した不名誉です。これを使用すると、IE6が永久にゴミに固執するのを助けているため、IE6がひどく泣き言を言うすべての特権も失います。DOMを学んでください。
• できる限り動作する必要があります。何かがサポートされていない場合、エクスペリエンスを低下させないように優雅に劣化させる必要があります。ユーザーを顔に平手打ちしてクラッシュすることはできません。
• 著作権とライセンスは重要です。他の人の苦労をはぎ取らないでください。誰かが「再販用ではない」と言った場合、販売することはできません。意地悪にならないでください。さもないと、勤勉な人をだますためのコードが嫌になります。
• JSはクラスではなくプロトタイプです。やめなさい。プロトタイプがどのように機能するか理解していない場合は、する必要があります。Google it。JavaScriptはクラスベースではありません。クラスを作成しようとするのをやめてください。うまく動作することはほとんどありません。人々はプロトタイプ言語で古典的なコードを書き、それを「なぜ言語がダメなのか」のケースとして使用しようとするので、Rubyがプロトタイプをサポートできないという同じケースを作ることができます。新しいことを学び、間違ったことをやめましょう。

常に基本に焦点を当てます。

• あなたは間違っています、そしてそれは素晴らしいです、あなたは今何かを知っているからです。間違っていることを認めず、悪名高いロックスターのスーパーヒーロー忍者であるかのように、悪いコードを戸惑わせ続ける人ほど悪いことはありません。彼らはただの愚か者です。あなたが間違っている可能性があること、あなたが間違っている可能性があることを認め、助けを求めてください。
• 常にjQueryが必要なわけではありません。jQueryは多くの遅いコードを作成し、JSを知らない人がJSを書くのを助けます。JSはJSを記述するためにJSを知っている必要がないため、これはさらに問題です。図を移動します。イベントの学習、DOMの学習、innerHTMLの学習など、上記のことをいくつか理解すると、jQueryがコードに害を及ぼす可能性があることがわかります。これは、多くの場所で正しく使用することができますが、多くの場合、あなたも小さなライブラリを使用したりすることができます息をのむ何かを達成するために、ブラウザに付属している標準のJavaScriptを。jQueryを使用して何もする必要はありません。学習している場合はクールなコードを簡単に記述できますが、より良い学習を開始する必要があります。とにかくjQueryでより良いコードを記述してください。他のいくつかのJavaScriptライブラリをチェックして、あまり気にしないでください。
• カット+ペースト+微調整は必要ありません。DRYコードを作成します。これについては前にも述べましたが、ここでも重要です。コードベースが不名誉な場合、高品質のコードを書くことはできません。
• 配列/オブジェクトの違いを乱用しないで、ループする方法を学んでください。を使用するfor (;;)理由とfor( in )ループを使用する理由を学びます。whileループを使用する場合。単にスイッチケースを使用できる場合は、IFのネストを停止します。オブジェクトは順序を保持しないため、配列として使用しないでください。古いOpera / FF、古いMISE、時にはFlashはオブジェクトの順序を尊重しません。物事の順序を維持する場合は配列を使用し、オブジェクト（要素の順序を持​​たないもの）が必要な場合はオブジェクトを使用します。
• コードに複雑さを加えるのではなく、決定構造をどのように活用できるか。IFのネストを停止し、ブール論理演算子がどのように機能するかを把握します。スイッチケースの仕組みを理解します。
• RTFM。より良いコードについて学ぶ最良の場所は、実際の仕様を読むことです。使用しようとしているコードのその部分のRFC仕様を読んでください。ECMAScriptドキュメントを読んでください。W3C DOM仕様を読んでください。W3C XHTML / HTML / HTML5仕様を読んでください。仕様を読んでください、彼らは良いです。

素早くフラッシュして死ぬのではなく、長いゲームに集中してください。

• コミュニティを助け、長い間存在するコードを書く必要があります。コードとコミュニティに情熱を傾けましょう。あなたがどこかに悪い知識を残した場合、地獄に戻って修正します。不正な情報を削除するのは非常に難しく、永久に存在し続けます。あなたの一部を行います。w3schoolsがWebを悪化させないようにしてください。
• どこからともなく飛び込んで「使い方のいいアイディアを手に入れた」と言ってはいけませんwhich。あなたは何も貢献しませんでした。aやなどの変数を使用しないでくださいchezburger。
• 悪いコードと良いコードを見つけて、自分のコードで見つけ、悪いコードを良いコードにする方法を学びましょう。
• 何かを作り、何かを学び、何かを教えます。
• あなたの視野を広げます。JavaScriptを永遠に書くことはできません。サバティカルを興味のある他の何かに取り込んで、戻ってきて、学んだことを共有し、コミュニティでその場所を見つけることができるかどうかを確認してください。あなたがそこにいる間に、JavaScriptの価値も他の世界に見せるようにしてください。
• すべてを知っていても、あなたはまだ間違っています。あなたのステータス/権限ではなく、正しいことを証明してください。あなたは決して正しいことはできませんが、あなたの証明は常に正しいです。時々回避するのと同じくらい難しい、放尿試合に入らないでください。証拠があるか、ないかのどちらかです。炎は誰にも役立たない。

興味がある人のために、私は実際に私が書いているどこにも行っていないチュートリアルの個人的なメモからこれのほとんどを取りました。

1. ダグラス・クロックフォードのJavascript：The Good Partsを読んでください。これはかなりのヒントですが、正直なところ、良いjavascriptを書くために聞いた中で最高のアドバイスです。

2. 関連して、Javascriptに関する Douglas Crockfordの記事を読んでください。

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

JavaScriptを使用するためのいくつかの質問を次に示します。

1. JSONはどのように機能し、何に適していますか？

2. 関数オブジェクトがJavascriptにあるのはなぜですか？

3. なぜevalを使用すべきではないのですか？

4. javascriptでイベントを作成するにはどうすればよいですか？

5. javascriptで機能を検出するにはどうすればよいですか？

Javascriptで行う必要があるほとんどのことをほぼカバーしています。

1. 常にセミコロンを使用します。暗黙的なセミコロン（JS）は恐ろしいアイデアで、特に一般的な使用法に興味深い構文のいくつかが浮かんでいます。これらは一般に、JSミニファイヤでも必要です。
2. eval（）を避けてください。これはあらゆる種類の問題を引き起こし、アプリケーションを遅くする非常に迅速な方法です。ほとんどの使用法は実際に虐待です。eval()別の方法で、ダブル、トリプルチェックを使用する必要があると思うたびに。JavaScriptに相当する文字列全体を実際に実行しようとしない限り、ほとんどの場合、よりクリーンで簡単な方法があります。
3. (function() {/* stuff */})()は、一連のコードを入れて、そのローカルスコープを作成する良い方法です。オブジェクトを使用することも、多くの場合より良い方法です。この方法で使用した場合、オブジェクトは他の言語の名前空間により類似しています。気をつけてくださいthis。他のほとんどの言語とは異なり、this常に直感的に考えるとは限りません。また、特に指定されていない限り、すべてのJS変数、関数、およびその他のオブジェクトはすべて、グローバルであっても、.jsファイルください。
4. 優れたJSライブラリを見つけて学習/使用します。jQueryは最も人気のあるものの1つです。これらは、機能の検出やDOM操作の抽象化など、さまざまなブラウザでさまざまなものが実装されている複数の方法など、多くの面倒な作業を行います。
5. 常にセミコロンを使用します。真剣に。忘れたときに警告するIDEを入手してください。保証を言いたくはありませんが、セミコロンがないためにバグが導入され、ブラウザがこれらについて警告しない場合があります。

クラスは、コードを構造化するための非常に強力なツールであると考えています。クラスベースのシステムを設計する方法については言語にとらわれない多くのルールがあり、実際にはクラスを使用するときにいくつかのオブジェクト指向の原則がより明確に実装されます。
したがって、CoffeeScriptをご覧になることをお勧めします。

そこから、SOLID、DRY、GRASP、KISSおよびYAGNIの実装方法に関する情報を収集することをお勧めしますそれらの唯一のご理解、（彼らは決してしない、そしてもっと重要なのは、彼らが紛争に思える状況で、取り掛かる方法や目の前の問題があります）。stackexchangeであっても、見つけるのは非常に簡単です。

これらの原則は、「生の」JavaScript開発にも同じように適用されることに注意してください。ただし、それらに含まれる多くのコンテンツは、クラスベースの言語を使用してそれらを説明するため、それらを理解するのにあまりオーバーヘッドがかからない言語でのプログラミングに役立つ可能性があります。
個人的には、JavaScriptは非常に強力な言語だと思いますが、実際には、この事実を本当に理解するために、まず他の言語を深く理解する必要があります。

Webアプリケーションでのクライアント側のUI開発にJavaScriptを使用していると仮定しています。

1）これはクライアント側ですか、これはサーバー側ですか？私は本当にサーバーサイドにあるに値する深刻なコードのチャンクを作成し、その逆を書いたことを知っています。多くの場合、最終的にサーバーコードに配置され、途中で含まれるようになるものに対してAJAX呼び出しを行うことになります。特に、本質的に静的であるものの、かなり定期的に変化するもの（カテゴリのリストなど）。

2）既にこれを行うプラグインはありますか？私はJQueryを頻繁に使用していますが、答えはほぼ常に「はい」です！私はしばしば誰かが書いたプラグインコードを取り、それを私のニーズに合わせて調整します（通常、物事に余分なクラスを追加するなど）が、ゼロから始める必要はほとんどありません。

3）Javascriptはこれに適した場所ですか？たまに、インテリジェントなCSSを使用するほうが理にかなっている場合に、Javascriptを介して何かに動的なスタイリングを追加することに気付くでしょう。

4）別のツールを使用する必要がありますか？これは私が最近取り組んでいるものです。私のスタック（Rails 3.1）でうまく処理されるコーヒースクリプトのようなjavascriptの代替があり、コードの多くをそこに移動するかどうかを検討してきました。

5）このJavascriptコードは良いコードですか？Javascriptは、他のコードと同様のコードです。このコードは他のコードと同じくらい良いですか？そうでない場合は、なぜですか？使い捨てですか？私は怠け者ですか？