web-dev-qa-db-ja.com

JavaScriptコードを別のファイルに保存することはなぜ良い習慣なのですか？

Web開発では、JavaScriptコードを個別のファイルに保存するためによく使用されますが、サーバー側のデータをローカルで操作するために、このJavaScriptコードが必要になる場合があります。

たとえば、動的に作成されたURLサーバー側にAjax呼び出しを行う。

しかし、一部のプログラマMy colleagues JSPファイル内の単純なJavaScriptは、不正なコードと間違った慣行の兆候であると言い続けます。

彼らはどの程度正しいですか？これらのコードブロックが他のページで再利用できないと仮定すると、-なぜは、この慣習は悪いことと見なされていますか？

編集：

迅速な回答に感謝しますが、動的に作成されたJavaScriptコード（キャッシュできないことは明らかです）をどのように管理できるのか疑問に思っています。たとえば、次のようなURLでajax呼び出しを行うと、

url : ${some_url_coming_from_server},

私の場合、コードは巨大で、どこにでもサーバーデータがありますが、それは間違っていますか？

javascriptweb-developmentprogramming-practicespatterns-and-practicescode-reuse
6
TheByeByeMan

まず、個別のファイルの純粋なJSコードがキャッシュされ、各リクエストで転送されるデータの量が削減されます。

非常に小さいページ固有のJSコードがない限り、インライン化しないでください。

他の有効な理由は、マイクの回答ですでに指摘されています。

サーバーからJSにいくつかの値を渡す必要がある場合、JSに直接JSPコードを挿入する代わりに、外部ファイルに関数を作成し、それをページから呼び出して、動的な値をパラメーターとして渡すことができます。 ：

JSP：

<script>
    yourFunction(${param1}, ${param2}...);
</script>

JS外部ファイル：

function yourFunction (param1, param2...) {
    // do your stuff
}

あるいは、特に大量の変数がある場合は、一連のparamsを渡す代わりに、パラメータとして渡すオブジェクトを作成します。

JSP：

<script>
    var obj = {
        param1: ${param1},
        param2: ${param2}
        ...
    }
    yourFunction(obj)
</script>

JS外部ファイル：

function yourFunction (obj) {
    // do your stuff using obj.param1, obj.param2...
}
14
xlecoustillier

主な理由は2つあります。

  1. 懸念の分離-別のファイルにコードを含めることにより、コードはHTMLから分離され、HTMLファイルに手を加えることなく変更できます。複数の場所で使用する場合、1つの場所で変更を行うことができます。

  2. DRY-自分で繰り返さないでください別のファイルに含めることで、複数のHTMLファイルでコードを繰り返す必要がなくなります。

7
Mike

@ Mikeと@ X.L.Antの回答はすでにいくつかの優れた点を提供しています。まだ言及されていないもう1つのポイントを提供できます。

編集とツールの使いやすさ-JSを別のファイルに入れると、あらゆる種類のものがうまく機能します。ここではいくつかの例を示します。

5
sixtyfootersdude