这个JavaScript/jQuery语法是什么意思？

Question

以下语法是什么意思？

(function($){
    $.fn.columnize = function(options) {
    ...

什么是 function($)?

什么是 $.fn. …？

- aneuryzm

Answer 1

在编写插件时，这种约定被用于确保不会与使用$符号的其他JavaScript库发生冲突，同时确保插件作者仍然可以使用此符号：

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

作者声明了一个带有单个参数($)的匿名函数，然后立即将jQuery对象传递给它并调用它。这确保了函数被调用，并且其中的所有内容都已定义。

更长的注释可能是：

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

尽管这将在全局命名空间中创建一个名为MyDefs的变量，但匿名函数模式会使全局命名空间保持为空，避免冲突。

- James Wiseman

---

谢谢，现在我明白了。我想从外部代码调用我的插件的一个方法。如何使它公开？有没有一种声明接口的方法？ - aneuryzm

好的，我在这里找到了答案：https://dev59.com/oUjSa4cB1Zd3GeqPHaoC - aneuryzm

James讲解得非常好。但是，如果有几个插件都使用了“$.fn.columnize...”，那么会不会引起冲突呢？这是我一直想研究的问题，但由于我还没有编写插件，所以还没有变得足够紧急。 - belugabob

@belugabob；是的，因为你正在重新分配一个变量。 - Douwe Maan

这正是我所想的，所以只需要想出一个不太可能已经存在的名称 - 一种粗略的命名空间机制。很遗憾没有一种绝对可靠的方法来处理这个问题，因为两个非常有用的插件之间发生冲突只是时间问题。 - belugabob

Answer 2

这段代码声明了columnize函数为jQuery插件，可以在元素上使用$('.someSelector').columnize()。你可以在这里阅读更多有关插件开发的内容。

- Darin Dimitrov

Answer 3

这可能是一个jQuery扩展，基本上在结尾加上（jQuery）。

(function($){
    //$ is jQuery here

    //added columnize function to existing jQuery object
    $.fn.columnize = function(options) {

    }

})(jQuery);

- YOU

---

是的，这是一个jQuery插件。我发现它使用了代理模式的相同语法。顺便说一下，我需要在插件内部调用一个函数。当我尝试调用它时，我得到一个错误（函数未定义），但实际上在浏览器中它是可以工作的。我该如何使函数可见？在插件接口中吗？谢谢。 - aneuryzm

请问您是如何调用那个函数的？能否贴一些代码？ - YOU

Answer 4

我刚刚发现这个...这是代理模式吗？

代理模式

将上述知识结合起来，作为JavaScript开发人员，您拥有相当大的能力。一种将其结合起来的方法是在JavaScript中实现代理模式，从而实现面向方面编程（AOP）的基础：

(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log(this, arguments);
    return proxied.apply(this, arguments);
  };
})();

上述代码将其代码包装在一个函数中，以隐藏“proxied”变量。它将jQuery的setArray方法保存在闭包中并覆盖它。代理然后记录对该方法的所有调用并委托调用原始方法。使用apply（this，arguments）可以确保调用者无法注意到原始方法和代理方法之间的区别。

- aneuryzm

Answer 5

不要被 $ 搞混了。实际上，在JavaScript中，$是一个有效的变量名（所有包含$的变量都是如此，来源（PDF））。

因此，第一行可以重新表述为：

(function (someVariable) {

这可能看起来更普遍。对于剩下的部分，是代理模式，James Wiseman 的回答解释了发生了什么。

- Boldewyn

Answer 6

function($) {...} 定义了一个带有名为$的形式参数的匿名函数。$.fn 指的是变量$所引用对象的名为fn的属性。

- outis