我想了解jQuery插件语法

Question

jQuery站点列出了jQuery的基本插件语法,如下所示:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

我只是想从Javascript的角度理解那里发生了什么,因为它看起来不像我之前看过JS所做的任何语法.所以这是我的问题列表:

1. 如果用函数替换函数($)...,比如"the_function",语法如下所示:

    (the_function)( jQuery );
   

   什么是"(jQuery);" 在做什么？围绕the_function的括号是否真的有必要？他们为什么在那里？你能提供的另一段代码是否类似？

2. 它以函数($)开头.所以它创建了一个函数,据我所知,它永远不会被运行,参数为$,已经定义了？那里发生了什么？

谢谢您的帮助!

Answer 1

function(x){ 
    x...
}

只是一个没有名字的函数,它接受一个参数"x",并用x做事.

而不是'x',这是一个常见的变量名,你可以使用$,这是一个不常见的变量名,但仍然合法.

function($){ 
    $...
}

我将它放在括号中以确保它作为表达式解析:

(function($){
    $....
})

要调用一个函数,可以在其后面添加一个参数列表.例如,如果我们想调用此函数传入3的值,$我们会这样做:

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

只是为了踢,让我们调用这个函数并传入jQuery作为变量:

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

这将创建一个新函数,它接受一个参数,然后调用该函数,传入jQuery作为值.

为什么？

• 因为每次想要使用jQuery做jQuery时编写jQuery都很乏味.

为什么不写$ = jQuery？

• 因为其他人可能已将$定义为其他内容.这保证了$的任何其他含义都被这个暗示了.

Answer 2

(function( $ ){

})( jQuery );

这是$在参数中使用的自执行匿名函数,因此您可以使用它($而不是jQuery在函数内部)而不必担心与其他库冲突,因为在其他库中也$具有特殊含义.在编写jQuery插件时,该模式特别有用.

你可以在那里写任何角色而不是$:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

这里j将自动赶上最后指定的jQuery (jQuery).或者你可以完全忽略参数,但是你必须使用jQuery关键字而不是$不用担心碰撞.所以$包含在简短的参数中,以便你可以在该函数内部$而不是jQuery全部写入.

如果您甚至查看jQuery的源代码,您将看到所有内容都包含在:

(function( window, undefined ) {
  // jQuery code
})(window);

这也是可以看到带参数的自执行匿名函数.甲window(和undefined)参数被创建并被映射与全球window在底部对象(window).这是现在流行的模式,速度很快,因为这里window将从参数而不是window下面映射的全局对象进行研究.

这$.fn是jQuery的对象,您可以在其中创建新函数(也是对象)或插件本身,以便jQuery将插件包装在其$.fn对象中并使其可用.

有趣的是,我在这里回答了类似的问题:

JavaScript/jQuery闭包函数语法

您还可以查看本文以了解有关我编写的自执行函数的更多信息:

Javascript自执行功能