1

いくつかのページといくつかの javascript (jQuery) スクリプトを含む単純な Web サイトを開発しています。CSS については、すべてのページのすべての CSS を含む単一の .css ファイルを使用しました。スクリプトについても同じことを考えました。だから私のページの頭にはこれがあります：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="scripts.js"></script>
<link href="CSS.css" rel="stylesheet" type="text/css">

このサイトでは JavaScript をあまり使用しません。たとえば、ホームページには、この方法で作成した単純な連続スライド背景を備えた一種のスライドショーしかありません。

var bgpos=1
function slide() {
$("div.slideshow").css("background-position","0px "+bgpos+"px")
bgpos++ 
}
setInterval(function(){slide()},35)

私は他のページでも小さな JavaScript を使用していますが、すべてのスクリプトを 1 つのファイルにまとめてすべてのページにリンクするのが良い方法かどうか疑問に思っていました。私が考えていた主な質問は次のとおりです。すべてのページでそのファイルを使用すると、上記のコードは div.slideshow なしで別のページで無駄に実行されますか?
これを解決する最善の方法は何ですか?
javascript が html とは別のファイルにあるという事実が気に入っていますが、これらのスクリプトを直接 head に入れる方がよいかもしれません。

4

5 に答える 5

2

本番環境でスクリプトをバンドル/縮小することをお勧めします。ただし、開発中は、可能な限り保守しやすくすることをお勧めします。ファイルが大きすぎず、コードがモジュール化されている限り、スクリプト ファイルの開発バージョンを使用しても問題ありません。スクリプトが大きくなり始めたら、それらを機能モジュールに分割するのが賢明です。バンドルプロセスでは、運用シナリオのファイルの結合について心配する必要はありません。

于 2013-10-31T21:27:34.707 に答える
1

運用環境では、すべてのファイルを 1 つの縮小されたファイルに保持することをお勧めします。このブラウザのおかげで、多くの無意味なリクエストを行う代わりに、サーバーに 1 つのファイルを要求します。ただし、開発環境では、必要な数のファイルを持つことができます。

于 2013-10-31T21:27:47.790 に答える
0

要素がそのページに存在しない場合にすべてのコードを実行しないように、操作している要素の存在を確認できます。

if($("div.slideshow").length>0){
    //setInterval goes here
}
于 2013-10-31T22:46:14.077 に答える
0

ここで 2 つの質問があります。

I. あなたの主な問題は、あなたの質問に答えても解決されません! あなたの問題はあなたの現在のコードです!.

  1. .slideshow 要素がない場合でも setInterval が実行されます
  2. あなたのコードでは、ページに複数のスライドショーを表示できません。
  3. 現在のコードでは、JS をフラグメントに分割する必要があるかどうかを尋ねることができます。これは、連結/縮小プロセスを指示するため、コードが適切ではないことを意味します

必要な数の「インスタンス」を持つことができるウィジェット/モジュールで考えるのは良いプログラミング スタイルです。JS でこれを実現する方法はたくさんあります。簡単な方法の 1 つは、クロージャーを使用することです。コードを次のように書き換えます。

$(function(){
    $("div.slideshow").each(createSlide);
});

function createSlide(){
    var slideElement = $(this);
    var bgpos = 1;
    setInterval(function slide() {
        slideElement.css("background-position","0px "+bgpos+"px")
        bgpos++ 
    }, 35);
}

これで、コードは .slideshow が存在する場合にのみ実行されます + グローバル bgpos var を作成せずに、1 つのページに必要な数のスライドショーを表示できます。これはシンプルで優れた手法です。コードは、通常のモジュール ラッパーとして機能する関数によって単純にラップされます。この関数で発生することは、この関数にとどまります :-D

Ⅱ．分割と連結

リクエストを最小限に抑え、ページロードを高速化するために、スクリプトを 1 つのファイルに連結する必要があることは一般的に認められています。ほとんどの人が知らないことですが、このルールは 2006 年より前に制定され、それ以降、ブラウザーは大幅に変更および改善されました。1 つの JS ファイルへの連結は、全体のページロードにはまだ適しているかもしれませんが、4 つの部分に分けられた場合 (4 つの部分を並行してロードできるため、高速ですが、また、他のファイルをダウンロードするためにキューに入れる必要があることも意味します)。しかし、ここで大きな問題があります。ステージ カルーセルの JS をできるだけ早くロードすることが重要なのか、それともページの下部近くにある画像を先にロードしたいのかということです。私のテストでは、多くの場合、複数の JS ファイル (それぞれのサイズに応じて 3 ～ 8 個) を使用することをお勧めします。つまり、小さなファイルを連結し、大きくて重要なファイルを分割する必要があります。しかし、重要なことは、これは concat/build スクリプトを持たず、6-8 個の小さな小さな JS ファイルをロードする言い訳にはなりません...

于 2013-12-05T00:14:34.787 に答える