jQuery中(function($){})(jQuery)详解

前言

在使用jQuery时，我们经常会看到这样的代码片段：

(function($){
  // some code here
})(jQuery);

这个结构看上去有些奇怪，但其实它是一种常见的模式。本文将介绍这个模式的作用和原理，并提供一些示例代码帮助读者更好地理解。

理解模式

在jQuery中，使用(function($){})这样的语法创建一个函数，并立即传入参数jQuery以调用它。这个函数内部可以使用$来访问jQuery的全局对象，这为我们编写插件和高级特性提供了方便。

实际上，传入的参数名称并不一定要为$。我们可以将$替换成其他任意字符，比如foo、bar等。

(function(foo){
  // some code here
})(jQuery);

这个函数被称为“自执行函数”（Self-Executing Function），因为它创建后会立即执行。传入的参数jQuery将赋值给函数内部的形参$（或替代字符）。这样，我们就可以在函数内部使用$，而不必担心与其他库或全局变量冲突。

示例代码

接下来，我们将用一些简单的示例代码来说明这个模式的具体应用。

示例1：在页面加载完毕后运行脚本

(function($){
  $(document).ready(function(){
    // some code here
  });
})(jQuery);

这个示例中，我们使用了jQuery的$(document).ready()方法来确保脚本在页面加载完毕后再执行。由于我们在自执行函数内部使用了$，所以不必担心与其他库或全局变量冲突。

示例2：创建一个简单的插件

(function($){
  $.fn.myPlugin = function(){
    // some code here
  };
})(jQuery);

这个示例中，我们将一个新的方法myPlugin添加到了jQuery的原型对象上。这样，我们就可以在任何jQuery对象上调用这个方法。

$('#myElement').myPlugin();

示例3：使用局部变量

(function($){
  var myVar = 'Hello, World!';
  
  $('button').click(function(){
    alert(myVar);
  });
})(jQuery);

这个示例中，我们在自执行函数内部定义了一个局部变量myVar。在点击按钮时，我们弹出一个消息框显示变量的值。

小结

通过本文的介绍，我们了解了jQuery中(function($){})(jQuery)这种模式的作用和原理，并用一些示例代码帮助读者更好地理解它的具体应用。同时，我们还学习了如何在函数内部使用$，而不必担心与其他库或全局变量冲突。希望本文能对您在学习和使用jQuery时有所指导。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3532