39

すべてのクラス (ベスト プラクティス) が個別のファイルに格納される C# のバックグラウンドから来ているため、開発が非常にクリーンになります。過去に Javascript で複雑なものを書いたことはありませんが、HTML 5 を学び始めており、HTML 5 キャンバスを使用して複雑なゲームを書きたいと思っています。

すべての関数とコードを 1 つの .js ファイルに入れるのは非常に面倒です。それを分割する方法、または個別のファイルを使用して開発し、展開用にそれらを単一のファイルにコンパイルできるツール/IDEはありますか?

私はいくつかのベストプラクティスのアドバイスを探していると思います。このような質問は一般的にクローズされているように見えるので、実用的で回答可能な質問を要求する SO FAQ に準拠するための私の具体的な質問を次に示します。

  • 複雑な JS 開発では、通常、単一の JS ファイルにすべてのコードが含まれますか? 例えば。あなたはスペースインベーダーを書いています.spaceinvaders.jsだけですか、それともships.js、logic.jsなどを持っていますか.

  • JS を分割することは可能ですか (複数のスクリプト タグを使用するか、単一の JS ファイルに事前コンパイルするか)、またはすべてを単一のファイルに入れることはできますか?

  • 業界標準は？HTML 5 仕様では推奨事項はありますか?

4

4 に答える 4

13

考えられる方法は 2 つあります。個人的には、ビルド ツールを使用して、複数のファイルの操作を簡素化します。

ビルドツールの使用

うなり声

複雑な js アプリケーションについていくための私のお気に入りのツールはgrunt. grunt を使用すると、必要な数のファイルで開発し、そのプラグインを使用しwatchてconcat、保存時にそれらを自動的に連結できます。もっと多くのことができますが、これは役に立つかもしれない基本的な使用例です。

Grunt はセットアップが必要nodejsで、セットアップに時間がかかります。しかし、Gruntfileセットアップの準備が整うと、開発プロセスが本当にスピードアップします。

プロジェクトを本番環境で使用できるようにするために、いくつかの構成と 1 つのコマンドでスクリプトを縮小することもできます。

多くの主要な JavaScript ライブラリは grunt を使用しており、それらに基づいて簡単に認識できますGruntfile: jQuery、AngularJS、Twitter Bootstrapなど。

Grunt も開発ツールセットの一部ですyeoman。

ブランチ

Brunchは、grunt と同様のことができる別のビルド ツールです。

必要なファイルだけを読み込む

巨大な単一ページのアプリケーションを開発していて、アプリケーションの起動時間が気になる場合、単一のファイルは最適なソリューションではない可能性があります。この場合、javascript モジュール ローダーを使用できます。

Require.js

したがってrequire.js、ぴったりです。現在のページで実際に必要なファイルのみをロードできます。ただし、require.js のセットアップは、grunt のセットアップよりも少し手間がかかります。

于 2013-03-29T17:10:03.970 に答える
3

もちろん、複数の JavaScript ファイルを使用できます。jQuery や Knockout のようなライブラリは他にどのように機能しますか?

ただし、覚えておくべきことの 1 つは、ページの快適さを維持するために必要なことの 1 つは、ページの読み込みごとの http リクエストの総数を減らすことです。別々にロードされた一連の JavaScript ファイルを追加すると、余分なファイルごとに追加のリクエストが発生します。したがって、デプロイ時に使用できる単一のアイテムに JavaScript ファイルをつなぎ合わせるビルド用のシステムを試してみることをお勧めします。自動化された方法でこれを行う多くのソリューションがあります。

于 2013-03-29T17:08:28.203 に答える
2

Javascript をモジュールに分割するための非常に優れたライブラリである requirejs の使用を検討できます。また、すべてのモジュールを単一のファイルに「結合」できるツールも提供します。

于 2013-03-29T17:08:55.530 に答える
2

javascript必要な数のファイルを使用できます。htmlコードにそれらへのリンクを追加するだけです。

<body style="background-color: black" onload="main();" >
    <!-- Your HTML body contents -->


    <!-- Your scripts (here, I used HTML5 BoilerPlate to setup, and the links to jquery are provided) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/main.js"></script>
</body>

次に、関数呼び出しmain.jsをリッスンするように接続できます。main()

function main() {
    //here you can do your basic setup or delegate the control of the app to a different .js file.
}

または jQuery ドキュメント準備完了コールバック:

$(document).ready(function() {
    //here is a good spot to hookup other jQuery listeners
});
于 2013-03-29T19:52:46.950 に答える