如何在不包装匿名函数的情况下使用jQuery的美元符号？

Question

有一种常见的技巧是使用 $ 而不是 jQuery ，并将其包装在一个函数中，就像这样：

(function($) {
    //Code here
})(jQuery);

现在，这个问题是你处于一个小的本地作用域中，这通常是好的，但如果你试图通过字符串构造动态调用函数名，则会出现问题：

let dynamic_name = some_function_name; //but should be dynamic, duh
window[dynamic_name]();

这样做是行不通的，因为你在本地作用域内操作，而不是在window作用域内操作，所以它将无法找到该函数，例如：

(function($) {
    //If we put this outside of this scope, it works.
    function test() {
        console.log('test');
    }
    let name = 'test';
    window[name]();
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这也意味着，如果您的脚本作为库使用，您的函数将无法被调用，因为您将它们包装在匿名函数中。

那么如何解决这个问题呢？

- coolpasta

---

@CertainPerformance 嗯，问题是它根本不起作用。我放了一个例子。 - coolpasta

Answer 1

要么将函数显式地分配给window：

要么将函数显式地分配给window：

(function($) {
    window.test = function test() {
        console.log('test');
    }
    let name = 'test';
    window[name]();
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

将函数放在一个对象中：

(function($) {
    //If we put this outside of this scope, it works.
    const fns = {
      test() {
        console.log('test');
      }
    };
    let name = 'test';
    fns[name]();
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这与jQuery无关 - 任何IIFE或不在顶层的块都可能出现相同的行为（和解决方案）。

- CertainPerformance

---

这个可以运行，但感觉像是一个hack。你能指导我如何更好地处理作用域/命名空间吗？这看起来有点混乱。 - coolpasta

这可能是唯一不混乱的解决方案。您也可以使用eval动态引用当前作用域中的内容，但这是一个非常糟糕的想法。最好避免动态变量名 - 而是使用动态属性名称。 - CertainPerformance

我理解并且很有道理，但是在谈论本地作用域时，window的替代品是什么？我不能使用第二种技术...除非...那个对象是这些函数的集合，我想要调用它们？ - coolpasta

很不幸，除了eval之外，没有其他方法可以在本地范围内动态地引用变量。如果您想要能够动态查找这样的东西，唯一真正的解决方案是使用对象。但是对象很好，当您想要动态查找东西时使用它们完全没有问题。 - CertainPerformance

当然，如果你愿意的话，可以像这样分配对象属性而不是一次性定义对象（尽管使用点符号表示通常更好 - 方括号表示法有些丑陋，并且是在无法使用点符号表示时使用的）。 - CertainPerformance