複雑なJavaScriptプロジェクトをどのように維持していますか？

Question

私はFirebugを使用して、JavaScript（+ JQuery）コードで何が起こっているのかを把握しています。私は主にそれをconsole.logステートメントのトンを印刷するために使用しています。これはおそらく、プロジェクトの上にとどまる最も効率的な方法ではありません。それは数少ない機能から100以上に成長したので、私はすべてがどのように適合するかについて混乱し始めています。つまり、何とか機能しますが、コードを見ると、他の人がそれを書いたように感じることができます。なぜなら、それはとても混乱しているからです。

Firebugで私のアプリケーションを実行するときにいつもコンソールに表示されるconsole.logのステートメントが狂っています。私はいくつか取り上げるといつも再作成するので、そこに残しています。これは事態をさらに混乱させていると私は思っています。ブレークポイント、変数の監視など、実際のデバッグを実際に探ったことはありませんでしたが、それはこのプロジェクトのコントロールを回復する良い方法になるのでしょうか、それとも助けてくれるツールがありますか？

私はすべてのCSSの図を描き、JavaScriptのクラスとIDを対応する関数にマップしようと考えました。このプロジェクトでは、おそらくFlash/Flexアプリケーションに近いアプリケーション状態の複雑な組み合わせに基づいて、多くの豊富な相互作用と表示/非表示機能を使用しています。

このプロジェクトのコントロールを回復するのに役立つツールやアプローチについてのご意見をお待ちしております。私がこのプロジェクトを始めたとき、私は本当にうまく感じました。なぜなら、それはとても良く見え、人々は私がそれがいかに涼しかったかを褒め称えてくれましたが、今は失敗のように感じます。私がしなければならないなら面接。

Answer 1

あまりにも複雑すぎると、あまりにも多くのことをやっているのでシンプルに保つことができます（つまり、タイタニックにはコンパクトな救命ボートがたくさんあります）。これは誰でもあなたに与えることができる最高の非技術的アドバイスかもしれません - それは有効です。

Answer 2

コードに実際の単体テストを導入することができます。利用可能なさまざまなjavacscriptユニットテストプラットフォームがあります（fireunitなど）。あなたが既にFireBugをインストールしている場合、これは幸せな快適ゾーンへのかなり短いジャンプです！

単体テストのカバレッジでも少量であれば心を落ち着かせることができます。

Answer 3

コードを整理してください。名前空間を使用して論理モジュールに分割します。共通のインタラクションパターンを探して、一般的な再利用可能なコードを開発することも賢明かもしれません。

すべての新機能をjQueryプラグインとして書き込もうとしています。そのため、スタイルやマークアップと結びついていない再利用可能なコードを書く必要があります。

Answer 4

プログラムがあなたから離れ始めるときはいつでも、プログラムを止めて、分割する方法をよく見てください。 jsを別々のファイルに分割して、すべてのことをすぐに頭の中に保持する必要はありません。あなたが "done"として扱うことができるものは、あなたがそれの勇気を気にしないインターフェースにすることができます。

それはすべての混乱を隠すことです。それがOOか手続きかどうか。多くの人がPHPやCでJavaScriptと同じ問題を抱えているので、 "PHPスパゲッティ"を検索してヒントを得ることができます。

Answer 5

Firebugやデバッガの文などの優れたJavaScriptデバッガを使用して、JavaScriptにブレークポイントを追加します。あなたが終わった後でそれらを取り除くようにちょうど注意してください。

Answer 6

私は多くのjavaScriptなどでWeb2.0で働いていました。私を助けたいくつかのヒントを与えるI`ll：

は、aptanaを試してみてください

がJSLintを試してみてください等の完全なコード、検証、（きEXT-JE、jQueryのプラグイン）を助ける、私は解決するために充てることができます特にInternet Explorerを扱うときの問題

お試しYSlowあなたのサイトの成績をご覧ください。

WATIRツールを試してみてください。多くのテストケースを作成することができます。どこでもクリックしていくつかのテキストを表示します。いくつかのフィールドに文字列を書き込んでログを生成します。

Id`sをどこにでも置くことを忘れないでください。

コードの表記法を定義することができます。 （link1からlink2）

[更新]私は私のブックマークに見て、非常に優れたビデオについてのを発見した。Maintainable JavaScriptは見てみましょう。

これらの簡単なヒントを参考にしてください。

乾杯！

Answer 7

GWTの使用について考えてみてください。

• 優れたサポート。
• クラス
• リファクタリングが可能です。
• 名前空間の規則はありません - パッケージを使用してください。

「理由」のより包括的な一覧については、GWTチームの説明を参照してください。

Answer 8

私が継承した複雑なJavaScriptコードベースのハンドルを手に入れたことの1つはAOP package in dojo.でした。これを使用すると、コードの適切な形式の実行パス（Firebugのプロファイルのようなものですが、メソッドが呼び出された順にリストに表示されます）を得ることができます。

jQueryに類似しているかどうかはわかりませんが、削除する必要のある（または依存していない）ログステートメントを使用してコードベースを散らばってしまうため、検討する価値があります。

どのように動作しているかわかると、こちらの優れたヒントを使用して再構成することができます。