將jQuery引用傳遞給回調函數或插件的標準方法

Question

什麼是推薦的方式來傳遞緩存的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? 
}); 

這樣做的方式是使用內聯函數來包裝回調函數名稱？

任何指向標準做法的指針都會受到歡迎。

Answer 1

如果您正在尋找訪問$ domTable，您可以使用事件對象的event.delegateTarget屬性，而無需遍歷該dom。你將不得不將它包裝在一個jQuery對象中。

編輯

傳遞上下文和額外的屬性外部函數的標準方法是使用call()或apply() jQuery有它的這種行爲也被稱爲proxy()

在您的例子自己包裝與$domTable上下文已經通過作爲選擇器的目標，所以你需要的一切將可用。

在你的​​例子中，沒有事件對象作爲上下文被傳遞，因爲事件被映射到了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. 

} 

您的實用功能必須被設計爲能夠處理傳遞給它的任何內容作爲上下文加上任何其他參數。

Answer 2

您可以通過定義NameSpace來遵循模塊化方法。那麼你將不必使用就緒。

//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查找。