3

多くのページにまたがるいくつかの異なる onload スクリプトを処理する最良の方法は何ですか?

たとえば、50 の異なるページがあり、DOM の準備ができたときに各ページで異なるボタン クリック ハンドラーを設定したいとします。

個々のページごとにこのように onclicks を設定するのが最善ですか?

<a id="link1" href="#" onclick="myFunc()" />

または、外部 js ファイル内の非常に長いドキュメント対応関数、

Element.observe(window, 'load', function() {
  if ($('link1')) {
    // クリックハンドラを設定
  }
  if ($('link2')) {
   // クリック ハンドラを設定
  }
  ...
}

または、各if ($('link')) {}セクションをスクリプト タグに分割し、適切なページに配置します。

または最後に、各if ($('link')) {}セクションを個別の js ファイルに分割し、ページごとに適切にロードしますか?

解決策 1 は最も洗練されていないように見え、比較的目立ちます。解決策 2 は非常に長いロード関数につながります。解決策 3 は解決策 1 ほど目立たないが、それでも優れたものではありません。彼が訪れるページ。

これらのいずれかが最善 (または最悪) ですか、それとも私が考えていない解決策 5 はありますか?

編集:どのオンロード関数を使用するのが適切かではなく、デザインパターンについて質問しています。

4

7 に答える 7

3

要素に追加したい動作の種類ごとにクラスを作成することを考えたことはありますか? そうすれば、重複があった場合に備えて、ページ間で機能を再利用できます。

たとえば、一部のページに、ページに追加情報をポップアップ表示するボタンを配置したいとします。html は次のようになります。

<a href="#" class="more-info">More info</a>

JavaScript は次のようになります。

jQuery(".more-info").click(function() { ... });

ある種の慣例に固執している場合は、複数のクラスをリンクに追加して、必要に応じていくつかの異なることを実行させることもできます (jQuery では要素にイベント ハンドラーをスタックできるため)。

基本的に、機能をアタッチする要素の特定の ID を選択するのではなく、JavaScript をアタッチする要素の各タイプの動作に焦点を当てています。

また、すべての JavaScript を 1 つの共通ファイルまたは限られた数の共通ファイルに入れることをお勧めします。主な理由は、最初のページの読み込み後に JavaScript がキャッシュされ、各ページで読み込む必要がないためです。もう 1 つの理由は、サイト全体で使用できるボタンの一般的な動作を開発することをお勧めすることです。

いずれにせよ、onlick を html に直接添付することはお勧めしません (オプション #1)。これは目障りで、JavaScript の柔軟性を制限します。

編集：Diodeusが非常によく似た回答を投稿したことに気づきませんでした（これには同意します）。

于 2009-01-26T21:40:16.283 に答える
1

First of all I dont understand why you think setting event listeners is obtrusive?

but ...

Solution one is a bad idea

<a id="link1" href="#" onclick="myFunc()" />

because you should keep your make-up and your scripts seperate.

Solution two is a bad idea

Element.observe(window, 'load', function() {
  if ($('link1')) {
    // set click handler
  }
  if ($('link2')) {
   // set click hanlder
  }
  ...
}

because you are using a lot of unneeded javascript for every page.

Solution three is a bad idea for the same reason I said solution one is a bad idea.

Solution 4 is the best idea, yeah its one extra load per page, but if for each page you just split each if ($('link')) {} section, the file size can not be that large? Plus, if you take this code out of the global javascript, then its load time will be reduced.

于 2009-01-26T21:32:00.480 に答える
1

可能であれば、JQueryの ドキュメントを使用します

  $(document).ready(function() {

      // jQuery goodness here.
 });
于 2009-01-26T21:21:23.467 に答える
1

クラス名をハックして、創造的な方法で使用できます。

<a class="loadevent functionA" id="link1" href="#" onclick="myFunc()" />

...別のページで...

<a class="loadevent functionB" id="link1" href="#" onclick="myFunc()" />

クラス名「loadevent」で選択し、そのタグの他のクラス名を取得できます。他のクラス名は、フックする実際の関数名です。この方法では、1 つのハンドラーですべてのページを処理でき、対応するクラス名を指定するだけで済みます。

于 2009-01-26T21:39:29.500 に答える
0

While Chris is somewhat correct in that you can do this:

$(document.ready(function() {
  // A
});
$(document.ready(function() {
  // B
});
$(document.ready(function() {
  // C
});

and all functions will be called (in the order they are encountered), it's worth mentioning that the ready() event isn't quite the same to onload(). From the jQuery API docs:

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.

You may want the load() event instead:

$(document).load(function() {
  // do stuff
});

which will wait for images and the like to be loaded.

于 2009-01-26T21:34:05.017 に答える
0

さまざまなページがあるので、それらのページのイベントのさまざまな処理を許可します...

ただし、違いがわずかな場合は、私がしがみつくことができるパターンを見つけようとし、おそらくページを区別するための本当に単純なアルゴリズムを作成します...

私が頼る最後のことは、他の方法でそれを使用するつもりがない場合は、（大きな）ライブラリ（jquery、mootoolsなど！-）を使用することでした...

今、あなたはベストプラクティスについて話しているのですが、ベストプラクティスは常にユーザーが最も軽いソリューションとして体験するものであり、その中で、ユーザーはそのサイトを維持する開発者などを含め、可能な限り幅広い方法で理解する必要があります。 o]

于 2009-01-26T22:34:44.927 に答える
0

ニージャーク jQuery に頼ることなく、JS を変更するページが比較的軽い場合は、#4 と同様にインライン ヘッダー スクリプト (onload イベント トリガーへのバインド、はい) に含めますが、これを別の JS として行うことはしません。スクリプトとダウンロード、私はこれをサーバー側のインクルードで処理したいと考えていますが、あなたはそれを処理したいと思っています (私は? XSLT インクルードを使用します)。

これにより、高度なモジュール分離が実現し、ダウンロードを可能な限り軽量に保つことができます。

于 2009-01-26T21:39:48.763 に答える