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，您可以使用事件对象的event.delegateTarget属性，而无需遍历 dom。不过，您必须将其包装在 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

您可以通过定义命名空间来遵循模块化方法。然后你就不必使用准备好了。

//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 回答