2

私は Java プログラマーで、数か月前に JavaScript と HTML を使用したフロントエンド プログラミングを発見しました。これがjs初心者の質問です。

IDE、デフォルトのワークフロー、または JavaScript ライブラリ開発のベスト プラクティスはありますか? カバレッジや単体テストなどを意味するものではありません。たとえば、いくつかのjsロジックを使用してhtmlコントロールを開発する際に使用する必要があるツールやテクニックはありますか? テキスト エディターで小さなテスト ページを作成し、毎分 F5 キーを押してブラウザーのコンソールで監視する多数のブラウザーで開くか、ボタンを押すとすべてのブラウザー インスタンスをリロードし、ブラウザーからレポートを収集する魔法の IDE が必要ですか?

4

3 に答える 3

4

JavaScript の基礎

あなたがその言語を知っていることを確認してください。この点で、JavaScript は少しトリッキーです。言語を理解していると簡単に考えることができますが、あなたに忍び寄る可能性のある奇妙なことがあります。Douglas Crockfordの JavaScript: The Good Partsを強くお勧めします。彼はまた、YouTube で同名の講演をいくつか行っており、それらは一見の価値があります。

JSLint

JSLintまたは同様のツールをワークフローに統合します。これは、Javascript のスタイル チェッカーおよび静的解析ツールであり、微妙なバグの検出に役立ちます。

F5 の回避

live.jsをチェックしてください:

Live.js をインクルードするだけで、ローカルの CSS と Javascript を含む現在のページを監視し、連続して HEAD リクエストをサーバーに送信します。CSS への変更は動的に適用され、HTML または Javascript の変更はページをリロードします。それを試してみてください！

ブラウザ開発者ツール

それらに慣れてください。個人的には、Firefox/Firebug よりも Chrome の開発者ツールを強く好みますが、どちらを選択するにしても、デバッガーの使用方法を学んでください。

Node.js

また、ブラウザで Javascript ロジックをテストする必要がないことにも注意してください。 node.jsを使用して、他のスクリプト言語として使用できます。

于 2012-07-06T09:22:51.977 に答える
3

ベテランのプログラマーとして、JS ライブラリを作成するために従うべき手順を以下に示します。

  1. UI をアプリケーション ロジックから分離します。 この場合、すべての API アクセスから完全に分離されたアプリケーション ロジック用の 1 つのコンポーネントを作成します。DOM と WSH と Node.js を意味する API アクセスは分離する必要があります。私は、別のファイルを使用して強制的に分離することまで行っています。
  2. ロジックにアクセスするための UI 環境を作成します。 対象ユーザーがアクセスできる運用 UI コントロールと、サンドボックス化された開発用の別の内部 UI コントロールを用意します。たとえば、http://prettydiff.com/でアプリケーションを作成して、コマンドラインとブラウザーから動作するようにしました。また、公開された HTML に似たアプリケーション アクセスへのアクセス メソッドを記述しましたが、より迅速な単体テストのために独自の開発用に別のものにしました。サンドボックス化された UI では、再帰的な setTimeout を使用して、コードを記述および保存する際に自動テスト計画の検証のために一定間隔でページを更新できます。
  3. 可用性と配布に焦点を当てます。 私のライブラリは、私の Web サイト、Github、NPM for Node から直接入手できます。私は、本番リリース中にサイトにコードをアップロードし、ブラウザーで簡単な検証を実行するという管理されたプロセスを持っています。リリースによってアプリケーションが壊れていない場合は、Github にプッシュしてから、まったく同じ場所を NPM にプッシュします。
  4. コード操作への分散アクセスはさらに優れています。 ライブラリへの迅速かつ自動化されたアクセスがオンラインでできることは素晴らしいことですが、リクエストを介して単体テストにアクセスできることはさらに優れています。アプリケーションに URI 経由でコード サンプルを要求するように指示することで、コード サンプルにオンラインで直接アクセスして、アプリケーションのコードをリモートで単体テストできます。これは、静的コードを配布およびテストできるようにするだけでなく、その操作も可能にすることを意味します。
  5. 優れたドキュメントがすべてです。 ドキュメンテーションが弱い場合、わざわざライブラリを調べることさえしません。コード コメントについて話しているわけではありませんが、これらは重要です。私はエンドユーザーのドキュメントについて話しています。私はドキュメントを読み、主題についてすべてを知りたいと思っています。Node.js が人気を博したのは、コードベースが安定する前でさえ、そのドキュメントがお尻を蹴ったためです。コードの QA を行う前に、他の人にドキュメントの QA を依頼してください。見事なドキュメントがなければ、あなたのライブラリは私にとって価値がありません。
  6. あなたの使命を知ってください。 すべてのライブラリには、明確でシンプルな明確な目的が必要です。これが確立されていない場合、ライブラリはリリースの準備ができていません。拡張によってライブラリの目的が混乱する場合は、1 つのライブラリを複数の小さなライブラリに分割する時期かもしれません。精度、明快さ、直接性、および lib の唯一の宣言された使命のみに焦点を当てます。
  7. 独立性は養子縁組に不可欠です。 他のライブラリやフレームワークに依存するライブラリは好きではありません。あなたの jQuery ライブラリがスライスパン以来最高のものかもしれないのは素晴らしいことですが、私はそれを見ません。独立性とは、移植性と自由度が高いことを意味し、あなたが気付いていない他のライブラリと組み合わせて使用​​することができます。
  8. スタイルは重要です。 これはデリケートなテーマですが、スタイルは重要です。lib のロジックは、できるだけ単純で宣言的なものにしてください。コードが本質的に完全に宣言型である場合、アルゴリズム パターンは素晴らしいものです。あなたが経験豊富な JavaScript の悪い人でない限り、 newキーワードの使用を避け、この使用を厳しく制限してくださいキーワードは、将来のメンテナンス操作で失敗するためです。連結を使用してアルゴリズムで大きな文字列を作成しないでください。また、コードの実行速度を継続的に監視してください。スタイルへの些細な変更やロジックへの一見些細な機能強化でも、実行効率が損なわれる可能性があるため、すべての UI コントロールにタイマーを設定しました。開発では、Chrome の Web ツールなどのプロファイラーを使用して、JS 実行の長い操作を追跡します。
  9. あなたの失敗についてオープンになりましょう。ソフトウェアは決して完璧ではなく、他の開発者は常にこれを尊重します。誰よりも早くバグに遭遇した場合は、バグの存在について率直に話してください。解決策が出るまでに 1 週​​間以上かかる場合は、通知を遅らせないでください。ユーザーが認識できるように、すぐに通知します。最近、追加の単体テストで大幅なずれが見られたため、diff アルゴリズムのロジックに対する大幅な拡張をロールバックしました。以前のリリースまたは 2 つに欠陥があり、ロールバックについてオープンであると決定したのと同じ日にロールバックしました。人々にコード ベースに貢献してもらいたい、またはバグ レポートを提供してもらいたい場合は、オープン性が重要です。
于 2012-07-06T09:49:26.473 に答える
2

ユニットテストを意味するものではないと明示的に言ったかもしれませんが、それはまさに私がjavascriptライブラリを作成することをお勧めする方法です。

Java開発者であれば、jUnitに精通しているかもしれません。もしそうなら、qUnitはあなたにとってより自然かもしれません。それ以外の場合は、ジャスミンまたはモカをご覧になることをお勧めします。私はMochaを好みますが、Jasmineでの私の経験は、すばらしいJasmine-Jqueryプラグインのおかげで、一般的にブラウザー内開発の方が優れています。

qUnitテストを作成している場合は、コードカバレッジの提供に加えてテストを実行できるIntelliJIDEをご覧ください。

ブラウザで開発している場合は、LiveReloadをご覧ください。それはあなたのためにファイルを監視し、あなたのブラウザを自動更新します-即座のフィードバックに最適です。

ブラウザの互換性のために、他のブラウザについて心配する前に、まず1つのブラウザで動作させることをお勧めします。時々チェックインして、問題がないか確認してください。jQueryがその混乱の一部を抽象化できるかどうかを確認してください。それ以外の場合は、AdobeBrowserLabをご覧ください。

于 2012-07-06T09:33:41.380 に答える