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

题目所提到的 jQuery中(function($){})(jQuery) 是一个常见的jQuery插件方式，这种方式也被称为“自执行函数插件模式”。下面我将对此进行详细的讲解。

什么是自执行函数插件模式

自执行函数插件模式是一种用来扩展jQuery功能的常见方式。其主要思想是将插件代码封装到一个自执行的匿名函数闭包内部，以避免污染全局作用域。该插件会在立即执行函数中定义和执行，通常用来实现针对 jQuery 对象的扩展。

最基本的形式如下所示：

(function ($) {

    // 插件代码...

})(jQuery);

该代码使用了立即执行的自执行函数来封装jQuery插件的代码。函数会立即运行，可避免污染全局命名空间。$ 符号是传递给该函数的形参，该参数实际上就是 jQuery 对象的引用，由于该引用在函数内部被重命名为 $，这样就可以避免与外部代码中的 $ 变量发生冲突。

自执行函数插件模式的优点

避免全局污染：使用自执行函数插件模式可以避免我们在jQuery代码中定义的变量或函数与全局变量或函数命名相同而产生冲突的问题。
扩展性好：通过自执行函数插件模式，可以更好地将逻辑划分，使得不同功能的代码互不干扰，从而更易于维护。
与其他插件兼容：自执行函数插件模式定义的插件都依赖于jQuery，由于所有的插件都会将自己的代码封装在内部，这样就不会与其他的插件产生冲突。

自执行函数插件模式的实际应用

下面以一个实际的例子来说明如何使用自执行函数插件模式。

假设我们有这样一个需求：在鼠标经过一个元素时，该元素的颜色变成另一种颜色。这个需求非常简单，我们可以使用 jQuery 来实现。下面是一个实现的示例：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $('#target').hover(function(){
          $(this).css('background-color', 'red');
        }, function(){
          $(this).css('background-color', 'blue');
        });
      });
    </script>
  </head>
  <body>
    <div id="target" style="width: 100px; height: 100px;"></div>
  </body>
</html>

在上面的代码中，我们使用了 jQuery 提供的 hover 方法来达到鼠标悬停在元素上时更改其背景颜色的目的。

接下来，我们将使用自执行函数插件模式，来将重复使用的代码封装成一个 jQuery 插件。具体实现如下：

(function ($){

  $.fn.hoverColor = function(options){

    var settings = $.extend({
      hoverColor: 'red',
      defaultColor: 'blue'
    }, options);

    return this.each(function(){
      var $this = $(this);

      $this.hover(function(){
        $this.css('background-color', settings.hoverColor);
      }, function(){
        $this.css('background-color', settings.defaultColor);
      });
    });

  };

})(jQuery);

上述代码通过使用了自执行函数插件模式将 jQuery 插件的代码封装起来，并将其命名为 hoverColor。该插件的作用是设置元素的默认颜色和鼠标悬停在元素上时的颜色。

现在，我们可以使用该插件来达到我们一开始提到的目的。示例代码如下：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="path/to/hover-color.js"></script>
    <script>
      $(function(){
        $('#target').hoverColor({hoverColor: 'red', defaultColor: 'blue'});
      });
    </script>
  </head>
  <body>
    <div id="target" style="width: 100px; height: 100px;"></div>
  </body>
</html>

在上述代码中，我们使用了自定义的 hoverColor 方法来设置鼠标悬停时元素的颜色， defaultColor 属性设置默认颜色。可见，使用自执行函数插件模式可以让我们更方便地扩展jQuery库，从而使我们的代码更加灵活易用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中(function($){})(jQuery)详解 - Python技术站

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

什么是自执行函数插件模式

自执行函数插件模式的优点

自执行函数插件模式的实际应用

相关文章