Question

我最近在另一篇文章（jQuery Set Cursor Position in Text Area）

上看到了这段代码

new function($) {
    $.fn.setCursorPosition = function(pos) {
        // function body omitted, not relevant to question
    }
} (jQuery);

经过太长时间试图理解它在做什么之后，我终于发现它只是用参数$创建一个新函数，然后用jQuery作为参数值调用它。

实际上，它只是这样做：

jQuery.fn.setCursorPosition = function(pos) {
    // function body omitted, not relevant to question
}

原始的，更令人困惑的版本是什么原因？

Answer 1

使用$的大型代码块比jQuery好得多。

使用多个库时，人们通常会禁用$快捷方式，因为许多库都使用它。编写这样的代码允许用户使用快捷方式编写代码而不必担心与其他库冲突。由于此网站适用于广泛的受众群体，因此无论用户是否启用了$，最有可能使用该代码。

Answer 2

由于其他JavaScript库可能全局使用$，因此您的库应明确引用jQuery以防止冲突。通过创建带参数$的函数，可以将jQuery对象绑定到该函数范围内的该变量。这使您可以安全地明确指定jQuery对象以及使用$简写的便利性。

这是我以前看到的模式：

(function($) {
  // code using $ goes here
})(jQuery);

Answer 3

new function($) {
    $.fn.setCursorPosition = function(pos) {
        // function body omitted, not relevant to question

       // You are safe to always use $ here 
    }
} (jQuery);

和

jQuery.fn.setCursorPosition = function(pos) {
    // function body omitted, not relevant to question

    // you have to make sure $ was not overwritten before using it here..
}

扩展jQuery的奇怪语法

3 个答案: