2

私のプロジェクトで次のコードに遭遇しました：

html:

<input type="button" id="addmore" value="Add more" onclick="add_table(this)"/>

js:

function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

最初に、このコードは間違っているので、外部コードに書き直さなければならないと思いました。つまり、

jQuery('#addmore)'.click(function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

しかし、もう一度見てみると、この html の方が読みやすいことがわかりました。どの関数が既に html にあるどの要素にバインドされているかがわかるので、js で検索する必要はありません。

もちろん、それは内部にカプセル化されていません

jQuery(document).ready(

そのため、状況によっては機能しません

質問: このコードはどれくらい悪いですか?

4

2 に答える 2

4

それは、再利用性と個人的な好みの問題です。インラインコードは、例のような非常に単純なものの方が読みやすくなりますが、もちろん、グローバル関数であることに依存しadd_table()ています-クリックハンドラーが異なる数百の要素がある場合、数百の関数/変数がグローバル名前空間を汚染する可能性があります。そしてそれは悪いです！:)

再利用性の観点から、機能を抽象化し、必要なときにいつでも呼び出すことができる個別のコンポーネントでコーディングする方が良いと思います-すべて定義された（非グローバル）名前空間内で。

jQuery('#addmore)'.click(function add_table(elem) {
    var current_id = jQuery("table.t1:last").attr("id");
}

上記のコードは、関心の分離を適切に示しています。つまり、セマンティック情報（HTML）は動作情報（Javascript）を認識しないため、よりクリーンで管理しやすいコードを作成できます。

于 2011-05-16T09:57:39.603 に答える
2

サイトのサイズ（およびトラフィックのレベル）によっては、帯域幅の問題が発生する可能性があります。つまりonclick="add_table(this)"、ダウンロードに24バイトのデータを追加します。これは、リクエストごとではなく、一度だけダウンロードされるキャッシュされたJavaScriptページに配置できます。余分なコードを含むページがたくさんあり、トラフィックが多い場合は、帯域幅に顕著な違いが生じる可能性があります。

于 2011-05-16T10:04:08.357 に答える