PricingLoginStart free
jQuery Academy · 课时

构建可配置且可复用的插件

为插件设置默认选项，允许用户覆盖配置，并以最少的工作量让插件在不同项目中复用。

第 2 / 3 课11 个步骤

构建可配置且可复用的插件 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

可配置插件简介

欢迎！在本课中，您将学习如何让 jQuery 插件更加灵活且易于调整。想象一下，只需提供几个选项，插件就能改变颜色、速度或文本。

这对于创建可用于许多不同项目的工具至关重要，这样便无需重写代码。

为什么使用默认选项？

插件应该开箱即用，同时也应允许自定义。这正是默认选项发挥作用的地方。

  • 基准行为：为插件提供标准的运行方式。
  • 易于使用：用户无需指定每个设置即可初始化插件。
  • 灵活性：用户可以覆盖默认值，使插件适应自己的需求。

定义插件默认值

您可以在插件内部将默认选项定义为一个对象。该对象包含插件可能使用的所有设置及其初始值。

请运行这个基本的插件结构，了解如何声明默认值。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="myElement">Hello</div>
<script>
(function($) {
  $.fn.myPlugin = function(options) {
    // Define default settings here
    var defaults = {
      color: "blue",
      fontSize: "16px",
      message: "Default message!"
    };
    
    // For now, let's just log the defaults
    console.log("Plugin defaults:", defaults);
    
    return this; // Always return 'this' for chaining
  };
})(jQuery);

$(document).ready(function() {
  $('#myElement').myPlugin();
});
</script>

合并用户选项：$.extend()

为了允许用户自定义设置，您需要将他们提供的选项与默认值合并。jQuery 的 $.extend() 方法非常适合完成这项工作。

$.extend({}, defaults, options) 会创建一个新对象，先从 defaults 复制属性，然后在 options 中存在相应属性时使用其值覆盖原值。

$.extend() 实战

下面展示了如何在插件中使用 $.extend()。请注意，用户提供的 color 和 text 会覆盖默认值，而 fontSize 仍使用默认值，因为用户没有提供它。

运行这段代码并查看控制台输出！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
(function($) {
  $.fn.myPlugin = function(options) {
    var defaults = {
      text: "Default text",
      color: "blue",
      fontSize: "16px"
    };
    
    // Merge defaults with user-provided options
    var settings = $.extend({}, defaults, options);
    
    console.log("Final settings:", settings);
    
    return this; // Keep chaining ability
  };
})(jQuery);

$(document).ready(function() {
  // User provides custom options
  $('body').myPlugin({
    text: "Custom Text!",
    color: "red"
  });
});
</script>

访问合并后的设置

获得包含合并后的默认值和用户选项的 settings 对象后，您可以使用点表示法直接访问任意属性，例如 settings.color 或 settings.animationSpeed。

这样可以确保插件始终使用正确的最终配置。

实用的工具提示插件

让我们构建一个简单的工具提示插件，允许用户自定义文本、背景颜色以及工具提示出现前的延迟时间。这展示了可配置选项如何让插件变得更加通用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .coddy-tooltip { /* Use unique class name */
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px 8px;
    border-radius: 3px;
    display: none;
    font-family: sans-serif;
    font-size: 14px;
  }
</style>
<button id="hoverMe">Hover Over Me</button>
<script>
(function($) {
  $.fn.coddyTooltip = function(options) {
    var defaults = {
      text: "Default Tooltip",
      bgColor: "#333",
      textColor: "white",
      delay: 200 // ms before showing
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      var $this = $(this);
      var $tooltip = $('<div class="coddy-tooltip"></div>')
                       .text(settings.text)
                       .css({
                         'background-color': settings.bgColor,
                         'color': settings.textColor
                       })
                       .appendTo('body');

      var timeoutId; // To clear previous timeouts

      $this.on('mouseenter', function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
          var offset = $this.offset();
          $tooltip.css({
            top: offset.top - $tooltip.outerHeight() - 5,
            left: offset.left + ($this.outerWidth() / 2) - 
                   ($tooltip.outerWidth() / 2)
          }).fadeIn(100);
        }, settings.delay);
      }).on('mouseleave', function() {
        clearTimeout(timeoutId);
        $tooltip.fadeOut(100);
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  // Initialize the tooltip with custom options
  $('#hoverMe').coddyTooltip({
    text: "Hello from CoddyKit!",
    bgColor: "darkblue",
    delay: 500
  });
});
</script>

面向复用进行设计

除了可配置之外，真正健壮的插件还应当可复用。也就是说，它可以直接放入任何项目中使用，而不会产生冲突，也不需要特定的设置。

  • 封装：使用 IIFE (function($){...})(jQuery); 将代码保持为私有。
  • `this.each()`：始终遍历选中的元素，以便对所有匹配项应用逻辑。
  • 不污染全局环境：避免创建全局变量或函数。
  • 逻辑自包含：除非已明确说明，否则插件不应依赖外部脚本或样式。

`this.each()` 的重要性

当用户在类似 $('.my-class').myPlugin() 的选区上调用您的插件时，jQuery 可能会返回多个元素。return this.each(function(){ ... }); 模式可以确保插件逻辑对该选区中的每个元素运行。

在 each 回调中，this 指的是当前正在处理的 DOM 元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<script>
(function($) {
  $.fn.highlight = function(options) {
    var defaults = {
      color: "yellow"
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function() {
      // 'this' refers to the current DOM element in the loop
      $(this).css('background-color', settings.color);
    });
  };
})(jQuery);

$(document).ready(function() {
  // Apply highlight to all elements with class 'item'
  $('.item').highlight({ color: "lightblue" });
});
</script>

快速检查：插件最佳实践

让我们测试一下您对构建可配置且可复用的 jQuery 插件的理解！

在交互式课程中回答

回顾：可配置且可复用

您已经掌握了如何构建功能强大且易于调整的 jQuery 插件！

  • 定义默认选项，提供基准行为。
  • 使用 $.extend() 合并用户选项，从而支持自定义。
  • 使用 return this.each()，确保插件适用于多个选中的元素。
  • 将代码封装在 IIFE 中，以便复用并避免全局冲突。

这些技术可以让您的插件更加健壮、灵活，并能够用于任何项目！

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
22
课程
48
免费开始学习查看完整课程

常见问题解答

「构建可配置且可复用的插件」课时是免费的吗？

是的 — 「构建可配置且可复用的插件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「构建可配置且可复用的插件」这节课中我会学到什么？

为插件设置默认选项，允许用户覆盖配置，并以最少的工作量让插件在不同项目中复用。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「构建可配置且可复用的插件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 插件设计模式与作用域
  2. 构建可配置且可复用的插件
  3. 集成公共方法与回调
← 返回 jQuery Academy