Question

我在某处读到，在JavaScript中使用jQuery的最佳方法是使一个自调用 - 匿名函数传递给jQuery，如下所示：

( function ($) {
    ...
}) (jQuery);

这样，$也可用于其他功能中的其他功能（如MooTools）

但是如何安全地将jQuery传递给其他函数？

例如，这不起作用：

( function ($) {
    i_too_can_use_jquery('simple_string')l
}) (jQuery);

function i_too_can_use_jquery (aString, $=jQuery) { // causes error :(
    ...                                       // Uncaught SyntaxError: Unexpected token =
}

那么，这样做的正确方法是什么？

Answer 1

考虑使用jQuery.noConflict：

var $_ = jQuery.noConflict();
$('someId'); // MooTools
$_('#someId'); // jQuery

或：

jQuery.noConflict();
$('someId'); // MooTools
(function($){
    $('#someId'); //jQuery
}(jQuery);

Answer 2

每个想要以这种方式使用jQuery的代码“模块”都应该包含在（function（$）{...}）（jQuery）前缀/后缀中。

所以在你的例子中，我可以假设i_too_can_use_jquery是一个仅由第一个匿名模块使用的函数：

( function ($) {
    i_too_can_use_jquery('simple_string')l

function i_too_can_use_jquery (aString) {
    ...                                      
}
}) (jQuery);

或者作为需要导出的方法：

// first module
( function ($) {
    i_too_can_use_jquery('simple_string')l

}) (jQuery);

// second module
(function($) {
window.i_too_can_use_jquery = function(aString) {
    ...                                      
}
})(jQuery);

其中任何一个都会修复您看到的语法错误，但正如您所看到的，第二个在维护函数范围方面有一些“模块”开销。

但是，你必须考虑你是否真的需要这个自我调用匿名函数。你真的使用其他使用$字符的库吗？你打算将来这样做吗？如果你不需要，不要写它。

Answer 3

无需添加参数，因为您没有编辑任何内容：

function x()
{   var $ = jQuery;
    // do something
}

但是，您可能希望有一天编辑$，这可能会让它变得更加困难。在任何情况下，您都可以在IIFE中定义其他函数并使其成为全局函数：

(function ($, global) {
    global.i_too_can_use_jquery = function (aString) {
        // do something
    };
    i_too_can_use_jquery('simple_string');
})(jQuery, window);

Answer 4

Javascript不支持您使用的可选参数表单：

function i_too_can_use_jquery (aString, $=jQuery) { /* the $=jQuery is invalid */

实现可选参数的正确方法是检查是否已定义：

function i_too_can_use_jquery (aString, $) { /* the $=jQuery is invalid */
    if(typeof $ === 'undefined') $ = jQuery;

如何在函数之间传递jQuery函数作为$

4 个答案: