4

私はAJAXを多用するWebアプリケーションを作成し、DOM操作やAJAXリクエストなどを容易にするライブラリとしてjQueryを含めました。問題は次のとおりです。

私の JavaScript ファイルは、イベント ハンドラーの膨大なコレクションです!!!!!

おそらく 30 以上のイベント ハンドラーがあり、数えたくありません。基本的には次のようになります。

$(document).on('click', '#element', function() {
    $.get('url' + id, function(data) {
        //do stuff
    });
});

$('div.selector').hover(function() {
    //do stuff
}, function() {
    //undo stuff
});

$(document).on('submit', 'form#form-selector', function() {
    $.post('/url', $('form#form-selector').serializeObject(), function(data) {
        //do stuff
    });
});

私が必要とする一般的に繰り返される機能を得るために、そこにいくつかの機能とプロトタイプのものを含む無限。それは問題なく動作しますが、これが正しくないことはわかっており、本当に醜いようです。その上、そのほとんどを でラップするのは良くないように思われ$(document).ready()、テキスト エディターの検索機能を使用せずにコードを並べ替えて目的のセクションを見つけようとするのは悲惨なことです。

このような大規模なプロジェクトをどのように組織しますか? Backbone.js のようなものは知っていますが、これが意図したユースケースであるかどうかはわかりませんでした。また、既に PHP でサーバー側フレームワークを使用してテンプレート作成などを行っているため、本格的な JavaScript フレームワーク。名前空間は解決策ですか?それらは本当に何かの役に立ちますか? 私はいくつかの調査を行いましたが、名前空間以外はあまり見つかりませんでした...私の驚き/欲求不満に。

運命のイベント ハンドラーから逃れるのを手伝ってください!

4

1 に答える 1

0

同じイベントをトリガーする要素をグループにまとめることができます。次の方法で、単一のイベント関数で操作を実行します。

$("#b1,#b2").on("click",function(event){
 var target = event.target || event.srcElement;
 switch(target.id)
 {
    case "b1":
      alert("Im One");
    break;
    case "b2":
      alert("Im Two");
    break;
 }});

ここのサンプルコード: http://codepen.io/tejzpr/pen/pvMxMw/

于 2015-04-15T23:10:30.717 に答える