4

最近ブログ記事を読みました。その中で、著者は読者に、すべてのonclickイベントをインラインではなく、DOMの準備ができたら、次のように接続するように指示しました（jQueryの例）。

<script type="text/javascript">
$(document).ready(function() {
    $("myElement").click(...
});
</script>

これは、イベントが添付されたページ上のすべての要素に対してです。そして、そのスクリプトブロックは、そのすべての配線とともに、ページの最後に配置する必要があります。

彼は、それをインラインに設定することは維持するのがより難しいと言いました：

<span id="myElement" onclick="...">moo</span>

しかし、彼は理由を言わなかった。

これは他の人の経験にも当てはまりますか？これを行う方が良い方法ですか？その利点は何ですか？

4

7 に答える 7

2

さて、一般的に、コードとコンテンツを可能な限り分離することは良いスタイルと見なされています。この方法を使用すると、HTMLが非常にきれいになります。

<span id="myElement">moo</span>

また、1つの場所に保存でき、外部のJavascriptファイルに入れることもできる個別の中央コードリポジトリ。

HTMLレイアウトの編集はとても楽しくなり、見栄えも良くなります。

私はいつもこの規則を自分で手紙に従わせるわけではなく、他の人ほど熱心ではありません。onclick='do_stuff()'しかし、インラインで作業を行う場合は、最大の関数呼び出しを許可します。より複雑なものは、コードスープに非常に速く変わります。

于 2009-12-31T03:04:02.570 に答える
1

散らかっています。マークアップをスタイリングから分離しておく必要があるのと同じように、ロジックをマークアップから分離しておくのが最善です。きれいに分離しておくと、たとえば画像にカーソルを合わせたときに何が起こるかを変更するためにマークアップを探す必要がないため、コードの管理が簡単になります。

# index.html
<img class="thumbnail" src="puppies.jpg" />

# index.js
$("img.thumbnail").fadeTo(0, 0.5).hover(
  function () { $(this).fadeTo("fast", 1.0); },
  function () { $(this).fadeTo("slow", 0.5); }
);

# index.css
img.thumbnail { border:1px dotted red; }
于 2009-12-31T03:01:54.913 に答える
1

すべてのイベントハンドラーを1つの場所に配置すると、イベントハンドラーを探すためにHTMLを探す必要がないため、コードの保守がはるかに簡単になります。また、ハンドラーに一重引用符と二重引用符の両方を含めることができ、イベントが最初に発生したときではなく、スクリプトブロックが解析されたときに構文エラーで失敗します。

また、すべてのインラインイベントハンドラーでは、ブラウザーが個別の式（呼び出しに相当eval）を解析する必要があり、パフォーマンスが低下します。

于 2009-12-31T03:03:19.467 に答える
1

利点は、ページに多くのコントロール (ASCX) が埋め込まれている場合に、異なるコントロール (ASCX) またはページで HTML コントロールによって生成されたイベントを検索する必要がないことです。

Firebug またはその他のデバッガーを使用してイベントが登録されている場合は、デバッグすることもできます。

于 2009-12-31T03:53:50.580 に答える
0

インラインイベントの私にとっての利点は、要素を調べるだけで、アクションを実行したときに何が起こるかを直接確認できることです。

古いコードを維持している場合、または他の誰かによって行われている場合、これは特に迅速です。

もう1つの利点は、速度に関するものです。後でイベントをアタッチするとDOMが使用され、インライン生成ほど高速ではない可能性があります。

また、 PUREのような目立たないテンプレートエンジンを使用することで、JSロジックからHTMLをクリーンに保つことができます。

于 2009-12-31T12:07:34.027 に答える
0

また、イベントバブリングを使用する場合は、多数のイベントハンドラーを使用しないようにすることができます。

于 2009-12-31T10:25:48.477 に答える
0

JavaScriptが無効になっている場合の正常な低下について説明している、動作の分離に関するこの記事をお読みください。jQueryの精神を理解するための控えめなJavaScriptに関する記事もあります。

于 2009-12-31T03:04:11.337 に答える