1

次のようなマークアップがあるとします。

<form action="foo">
    <input name="bar" />
    <button type="button">Save</button>
</form>

<script>
    function baz() {
        // Submit form via AJAX
    }
</script>

これをに追加する方が良いですか<button>：

onclick="baz()"

<script>またはこれを（jQueryを想定して）に追加するには：

$(function(){
    $('button').on('click', baz);
});

私は、インライン JavaScript を禁止するベスト プラクティスについて多くの騒ぎを見てきましたが、私も同意する傾向があります。しかし、 onclick="baz" が使用されているときに存在する上記の配線のコンテキストが削除されるため、ドキュメントの読み込み/準備の手動配線が何が起こっているのかをわかりにくくするのではないかと思っています。

いずれにせよ保守性の問題はありますか？どちらのアプローチにも他の長所/短所はありますか? 私の心からの質問は、インライン JavaScript を使用することのこの特定の側面に関する業界のコンセンサスは何ですか?

4

2 に答える 2

5

2番目の方法がより良いと考えられています

$(function(){
    $('button').on('click', baz);
});

これは、機能/動作をページ構造から分離する控えめな JavaScriptと呼ばれます。

于 2012-05-17T19:20:41.683 に答える
0

プロの開発者として、私は 2 番目の方法が JavaScript をページ構造から解きほぐすとはまったく確信が持てません。それらは機能的に同等であり、抽象化の不必要なレイヤーを追加すると、問題が混乱するだけです。

同等の機能:

  • どちらも、添付する JavaScript について想定しています。
    • 前者は baz() の存在を前提としています
    • 後者は $('button').on('click', baz); の存在を前提としています。
  • どちらも、javascript がないと何もしません。完全に壊れています。

さらに重要なことに、彼らにはそれぞれ問題があります。いくつかの理由から、インライン JavaScript をサポートしています。

  • 引数 [onClick="baz(this)"] を読みやすく渡す機能により、javascript に伴う一般的な読みづらさなしに、より多くの変数コードを生成できます。
  • 保守性が飛躍的に向上します。私がしなければならないのは、私のスクリプトで "function baz(" を見つけることだけです。前者とは対照的に、デバッグを開始しました。これは、アイテムを選択する任意の方法で接続できます - コード全体に表示される可能性のある IDS、クラス、およびその他の CSS セレクター。
  • サーバー側でできる限り多くの作業を行うべきだと思います。サーバーのアップグレードとバグ テストは簡単です。クライアントが持つ可能性のあるすべてのテスト ケースを想像するのは、はるかに困難です。コンピューターの作業が増えるほど、関数の実行をより細かく制御できます。
  • 動的に生成された JS の恐ろしい誘惑から人々を救います。
于 2012-08-28T18:38:30.073 に答える