4

関数がの前と外で定義されている場合、キャッシュされた jQuery 参照をコールバックとして関数に渡すための推奨される方法は$domContainer何var $domContainer = $('#container');ですか$(document).ready()?

例：

<script src="/plugins.js"></script>

この再利用可能な関数の外部ファイルで

function rowAction ( event ) { // how do I get context here?

  // how can I access $domTable and $domFilters
  // I can access $(event.target) and traverse the dom
  // back to $domTable, but $domTable is not defined
  // in the external file, although a reference is cached
  // in the local scope of $(document).ready();
  // likewise, $domTable could be accessed through event.delegateTarget
  // however, how can I pass $domFilters, and other vars?

}

メインスクリプトでは

<script src="/scripts.js"></script>

標準ドキュメントの準備

$(document).ready(function(){

    // Cached References
    var $domFilters = $('#form .filter'), // more than 1 reference returned
        $domTable   = $('#results');      // 1 reference returned

    $domTable.on('click','.menu',rowAction);// reference function in plugins.js
    // how do I pass $domFilters to rowAction to avoid dom lookups?
    // I could pass $domFilters to a plugin like $(...).plugin({f:$domFilters});
    // if it had optional arguments, but if it's not a plugin, what's the
    // equivalent way to do it?
});

これにアプローチする方法は、インライン関数を使用してコールバック関数名をラップすることですか?

標準的な慣行へのポインタも大歓迎です。

4

2 に答える 2

0

$domTable にアクセスしようとしている場合は、dom をトラバースすることなく、イベント オブジェクトのevent.delegateTargetプロパティを使用できます。ただし、jQuery オブジェクトでラップする必要があります。

編集

コンテキストと追加のプロパティを外部関数に渡す標準的な方法は、call()またはapply( ) を使用することです。jQuery には、 proxy()とも呼ばれるその動作用の独自のラッパーがあります。

あなたの例で$domTableは、コンテキストはすでにセレクターのターゲットとして渡されているため、必要なものはすべて利用できます。

あなたの$domFilters例では、イベントはDOM内の実際のイベントにマップされているため、コンテキストとして渡すイベントオブジェクトはありません。コレクションがあるだけなので、イベントオブジェクトに依存しているため、その関数を使用できませんでした。

コンテキストを渡しながらコレクションから別の関数を呼び出す場合は、このようなものを使用します。

$domFilters = $('#form .filter');
$domFilters.each(function(){

    // Call the external function passing the jQuery wrapped item
    // as the context.
    externalFunction.call($(this));

});


// Your external function
function externalFunction(){

// 'this' would now refer to the context passed in call.
// i.e your $(.filter) item.

}

ただし、ユーティリティ関数は、渡されたものをコンテキストと追加の引数として処理できるように設計する必要があります。

于 2013-03-21T09:32:44.130 に答える
0

NameSpace を定義することにより、モジュラー アプローチに従うことができます。その後、ready を使用する必要はありません。

//These four will be open
var objects, handlers, bindings,
NameSpace = {

    //This is where you cache references
    objects: {
        domcontainer: $('.domcontainer')
    },

    //Do the events to handlers bindings
    bindings: function(){
        domcontainer.on('click', handlers.clickCallback)
    }

    //The actual handlers
    handlers: {
        clickCallback: function(e){
            //Do something
        }
    },

    //Initial things
    init: function(){
        objects = this.objects;
        handlers = this.handlers;

        //This will start the handler binding.
        this.bindings();
    }
};

$(function () {
NameSpace.init();  
});

その場でオブジェクトを追加する場合は、オブジェクト内に、実際のオブジェクト参照を返す関数として参照を追加できます。オブジェクトを参照する必要があるときはいつでも、それはすでに利用可能であるため、DOM ルックアップを回避できます。

于 2013-03-21T09:42:31.243 に答える