6

JQueryを見始めたところです。現在、WebアプリケーションにAJAXはありません。

HTML内の既存のJavaScriptは次のようになります。

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

[追加]と[検索]のボタンが表示されます。検索の場合、フォームを送信する必要があります。MyFormSubmit（）を使用して、データを検証し、ページに視覚効果を追加してから、データをPOSTします。

[検索]ボタンのにクラスまたはIDを追加すると、JQueryで次のように記述できます。

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

JQueryを理解する「初心者」の段階では、なぜこのようにするのかわかりません。

私の古い方法は、オブジェクトの近くのメソッドを識別します。ユーザーがボタンを押す前にJSがロードされていない可能性があります（そこにありますか？JSのロードはページの上部にあります）。

JQuery Document Readyメソッドは、ドキュメントが読み込まれるまでアクティブ化されませんが（JSがすべて存在し、実行の準備ができていることを保証しますか？）、コードをHTMLファイルの別の部分に移動します。 HTMLソースにMyButtonArrayDIVが表示されますが、どのオブジェクトにメソッドがあり、どのオブジェクトにメソッドがないかはわかりません。

私の選択肢が何であるか、そして私が注意すべき利点/落とし穴を理解するのを手伝ってくれませんか？

編集：クラス「LightBoxThumb」のサムネイルがクリックされたときに表示されるLightBoxなどのDOM操作では、控えめなJavascriptが使用されることに満足しています。

しかし、特定のアクションを持つボタンには、その方法を適用する必要があると自分自身を説得するのに苦労しています。（私は確かに「他の場所」への単一の関数呼び出し以外のコードをボタンに配置しませんが、そのボタンが何をするかについての私の最善の手がかりであり、控えめなJavascriptのレイヤーはそれをはるかに難しくする可能性があります決定する。）

Edit2-承認された回答

私はラスカムズの答えを取りました。控えめなJavascriptについて、それをいつどのように使用するかを理解するのに役立つ方法で説明しています。

今のところ（経験が増えると変更される可能性があります）、デバッグが容易になると感じたため、オブジェクトに対する単一の変更されないアクションのOnClickイベントを使用し、問題が発生したかどうかを診断します。 。見出し列をクリックして並べ替えることができるテーブル上のZebraStripes（およびそのタイプの状況）の場合、控えめなJavascriptアプローチの利点を確認できます

ラスの最後のコメントは特に役に立ち、ここで繰り返されました：

「@Kristen-そうです、多くのプログラミングトピックのように、複数のアプローチがあり、人々は彼らの信念を熱心に支持します！単一のボタンの単一の方法について話している場合、私はあなたがどこにいるのかを完全に理解していますから来ています...

複数の要素に対する同じ関数呼び出し、異なるメソッドに対する異なる関数呼び出しなど、多くのJavaScriptについて話している場合、インラインアプローチと目立たないアプローチを組み合わせるのは難しいと思います。どちらか一方のアプローチを採用する方が良い」

4

4 に答える 4

14

目立たない JavaScriptは、JS コードをマークアップから分離するための主な原動力です


  • Web ページの構造/コンテンツおよび表示からの機能 (「動作層」) の分離
  • 従来の JavaScript プログラミングの問題 (ブラウザの不一致やスケーラビリティの欠如など) を回避するためのベスト プラクティス

  • 高度な JavaScript 機能をサポートしていない可能性があるユーザー エージェントをサポートするための漸進的な機能強化

document.ready のコードでは、DOM がロードされ、ページのコンテンツがロードされるまで実行されません。

jQueryの学習から

$(document).ready() を使用すると、ウィンドウがロードされる前に、イベントをロードまたは起動したり、イベントに実行させたいことを実行したりできます。

jQuery in Actionをご覧になることをお勧めします。強くお勧めします。書籍のホームページで第 1章と第 5章を試聴できます。そうすることで、分離がうまく機能する理由についてさらに洞察を得ることができると思います。

最後に、DOM ノードでイベント リスナーを見つける方法を詳しく説明しているこの質問を見てください。

編集：

目立たない JavaScript が良いアイデアである理由を納得させるいくつかの考えがあります。

いくつかの要素のそれぞれで発生した同じイベントのイベント ハンドラーとしてバインドされた関数があるとします。

  • 宣言が各要素にインラインである場合、または宣言がマークアップの外の 1 か所にある場合、イベントを処理するためにその関数を呼び出す要素を見つけるのは簡単でしょうか?

  • それぞれの要素でイベントが発生したときにその関数を呼び出す要素を追加したい場合はどうすればよいでしょうか? イベント ハンドラーを各要素にインラインで追加するか、コードを 1 か所で変更する方が簡単/良いでしょうか?

于 2009-03-07T09:32:27.373 に答える
2

ドキュメントの準備完了イベントは、ドキュメントの読み込みイベントよりもかなり前です。ドキュメントの準備は、DOM が読み込まれると発生します。つまり、作業を開始する前にすべての要素が存在します。

そうです、ドキュメントがレンダリングされると、JS の準備が整います。バインディングに関するもう 1 つのポイントは、特定のアクションが発生したときに要素へのバインディングを変更するのに役立つことです。

ただし、必要に応じて、要素でアクションを宣言することもできます。

于 2009-03-07T09:44:27.280 に答える
1

時間が経つにつれて、jQuery の構文と読み方に慣れると思います。

class="MyFormSubmit" は、 onClick="return MyFormSubmit(); を読むのと同じくらい有益になります。

力が実際に発揮され始めるのは (他の投稿者が言及したすべての利点は別として)、Web ページ上の他のアクションに関連付けられたセレクターを介して onClick バインディングを簡単に変更できることです。

私が自問する 1 つの質問は、フレームワークまたはライブラリを広範囲に使用することを計画している場合、その「よりネイティブな」コーディング スタイルでコードを記述することは、より自然で他のツールになることです。ツールを知っている開発者は、コードがよりクリーンで理解しやすいものになるでしょう。

于 2009-03-07T15:18:47.460 に答える
0

このようにして、UI ロジックを実際の HTML デザインから分離します。

于 2009-03-07T09:28:34.510 に答える