JQuery：なぜOnClickイベントではなく控えめなJavaScript / Document Ready関数ですか？

StackOverflow https://stackoverflow.com/questions/621574

質問

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>

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

[検索]ボタンのCLASSまたはIDを追加し、JQueryで次のように記述できます。

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

「初心者」のときJQueryを理解する段階私はなぜそうするのか get しません

私の古い方法は、オブジェクトの近くのメソッドを識別します。ユーザーがボタンを押す前にJSがロードされないリスクがあるかもしれません（JSのLOADはページの上部にあります）。

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

私のオプションが何であるか、私が気をつけるべき利点/落とし穴を理解するのを手伝ってもらえますか？

編集：DOM操作が快適です。たとえば、クラスが「LightBoxThumb」のサムネイルがある場合に表示されるLightBoxなどです。クリック-控えめなJavaScriptを使用します。

ただし、特定のアクションを持つボタンにはその方法を適用するように説得するのに苦労しています。 （私は確かに何か「他の場所」への単一の関数呼び出し以外のボタンにコードを配置しませんが、そのボタンが何をするかについての私の最高の手がかりであり、控えめなJavascriptの層がそれを多くするかもしれません判断が難しい。

Edit2-承認済みの回答

Russ Camsの回答を受け取りました。控えめなJavascriptについて、＆amp;いつ使用するか。

当面（経験が豊富な場合は変更される可能性があります！）デバッグが容易になると思うので、オブジェクトに対する単一の変化しないアクションのOnClickイベントに固執します。問題が発生した場合。見出し列をクリックしてソートできるテーブル上のZebraStripes（およびそのタイプの状況）については、控えめなJavaScriptアプローチの利点がわかります

ラスの最終コメントは特に役に立ちました。ここで繰り返しました：

  

＆quot; @Kristen-あなたは正しい、多くのように   プログラミングトピックの   一つのアプローチと人々よりも   彼らの信念に激しく立ち向かう！もし   私たちは単一の方法について話している   単一のボタンのために、私は完全に   あなたがどこから来ているのかを理解してください...

     

多くのことを話している場合   JavaScript、同じ関数呼び出し   異なる複数の要素に対して   さまざまなメソッドの関数呼び出し、   など。   自分でインラインを混ぜるのは難しい   そして控えめなアプローチ、そしてそれ   いずれかを採用することをお勧めします   他のアプローチ＆quot;

役に立ちましたか？

解決

控えめなJavaScript は、JSコードをマークアップから分離するための主要なドライバーです

  
      
  • Webページからの機能の分離（「ビヘイビアレイヤー」）
      構造/コンテンツとプレゼンテーション
    •   
  • 従来のJavaScriptの問題を回避するためのベストプラクティス   プログラミング（ブラウザなど   矛盾と欠如   スケーラビリティ）
    •   
  • サポートしていない可能性のあるユーザーエージェントをサポートするための段階的な拡張
      高度なJavaScript機能
    •   

document.readyのコードを使用すると、DOMが読み込まれ、ページのコンテンツが読み込まれるまで実行されません

jQueryの学習

  

$（document）.ready（）を使用すると、ウィンドウをロードする前にイベントをロードまたは起動したり、イベントを実行したりできます。

jQuery in Action をご覧ください。強くお勧めします。 第1章および rel = "nofollow noreferrer">本のホームページ。そうすることで、分離がうまく機能する理由をさらに詳しく知ることができると思います。

最後に、こちらをご覧ください質問には、DOMノードでイベントリスナーを見つける方法を詳細に回答しています。

編集：

控えめなJavaScriptが良いアイデアになる理由を説得するいくつかの考え。

多数の要素のそれぞれで発生した同じイベントのイベントハンドラとしてバインドされた関数があると想像してください-

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

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

他のヒント

ドキュメントレディイベントは、ドキュメントロードイベントのかなり前です。 DOMがロードされると、ドキュメントの準備が整います。つまり、作業を開始する前にすべての要素が存在します。

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

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

時間が経つにつれて、jQueryの構文と読み取りに慣れるでしょう：

class =＆quot; MyFormSubmit＆quot; onClick =＆quot; return MyFormSubmit（）;

を読むのと同じくらい有益になります

（他のポスターで言及されているすべての利点は別として）実際に力が働き始めるのは、Webページ上の他のアクションに関連付けられたセレクターを介してonClickバインディングを簡単に変更できることです。最初は自分自身。

フレームワークまたはライブラリを広範に使用して、「よりネイティブ」なコードを作成する予定がある場合、新しいツールを使用してどれだけ深く計画するかを自問します。コーディングスタイルがより自然になり、ツールを知っている他の開発者は、コードがよりクリーンで理解しやすくなります。

この方法で、UIロジックを実際のHTMLデザインから分離します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top