主页/jQuery教程/jQuery 插件/jQuery插件开发基础模式

jQuery教程

jQuery插件开发基础模式

4,955字
21–31 分钟

概览

目录

jQuery 插件开发是通过扩展 jQuery 的原型对象 $.fn，为 jQuery 实例添加自定义方法的过程。基础开发模式围绕如何正确地添加方法、维护链式调用、处理参数以及避免命名冲突展开。理解 $.fn 的机制是实现 jQuery 插件开发的第一步，也是核心所在。

插件机制与 $.fn

在 jQuery 中，$.fn 对象是 jQuery 构造函数的原型对象的简写。向 $.fn 添加一个函数，就相当于为所有通过 $() 函数创建的 jQuery 实例添加了一个新方法。这是所有 jQuery 插件开发的基础。当调用此方法时，方法内部的 this 关键字指向当前的 jQuery 实例对象。

$.fn.extend()

语法

jQuery.fn.extend( object )

object：一个对象，其属性名将作为新的 jQuery 实例方法名，属性值作为对应的方法实现。

示例：为 jQuery 添加一个高亮方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.fn.extend 基础示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <button id="highlightBtn">高亮所有段落</button>

    <script>
        $.fn.extend({
            highlight: function() {
                this.addClass('highlight');
                return this;
            }
        });

        $('#highlightBtn').on('click', function() {
            $('p').highlight();
        });
    </script>
</body>
</html>

基础模式：无参数插件

最简单的插件形式是不接收任何参数的函数，内部通过遍历 this 所指向的 jQuery 对象，对每个匹配的元素执行操作。关键点在于必须返回 this 以维持链式调用。

示例：创建一个文字加粗插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无参数插件示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <span>文本内容</span>
    <span>另一段文本</span>
    <button id="boldBtn">加粗文本</button>

    <script>
        $.fn.makeBold = function() {
            this.css('font-weight', 'bold');
            return this;
        };

        $('#boldBtn').on('click', function() {
            $('span').makeBold().css('color', 'blue');
        });
    </script>
</body>
</html>

基础模式：接收参数的插件

为了增加插件的灵活性，通常需要接收一组配置参数。可以使用一个对象字面量来接收参数，并通过 $.extend() 方法将用户传入的参数与默认参数合并。

语法

$.fn.pluginName = function(options) {
    var settings = $.extend({}, defaults, options);
    return this.each(function() {
        // 使用 settings 操作当前元素 this
    });
};

options：用户传入的配置对象。
defaults：插件定义的默认参数对象。
$.extend({}, defaults, options)：创建一个新对象，用 options 中的属性覆盖 defaults 中的同名属性。

示例：创建一个可配置背景色的高亮插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可配置参数插件示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>插件将改变此段落的背景色。</p>
    <button id="applyRed">应用红色背景</button>
    <button id="applyBlue">应用蓝色背景</button>

    <script>
        $.fn.colorHighlight = function(options) {
            var defaults = {
                color: 'yellow'
            };
            var settings = $.extend({}, defaults, options);

            return this.each(function() {
                $(this).css('background-color', settings.color);
            });
        };

        $('#applyRed').on('click', function() {
            $('p').colorHighlight({ color: 'lightcoral' });
        });

        $('#applyBlue').on('click', function() {
            $('p').colorHighlight({ color: 'lightblue' });
        });
    </script>
</body>
</html>

基础模式：支持方法调用

更复杂的插件可以暴露出多个方法，通过第一个字符串参数来指定要调用的内部方法。这是一种常见的 jQuery 插件开发模式，用于组织具有多个行为的插件。

示例：一个简单的工具提示插件，支持“show”和“hide”方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多方法插件示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .tooltip-content { display: none; background: #333; color: #fff; padding: 5px; position: absolute; }
    </style>
</head>
<body>
    <div style="position: relative; display: inline-block;">
        <button id="myButton">悬停显示提示</button>
        <div class="tooltip-content" id="myTooltip">这是一个提示信息</div>
    </div>

    <script>
        $.fn.simpleTooltip = function(method) {
            var methods = {
                show: function() {
                    this.find('.tooltip-content').show();
                    return this;
                },
                hide: function() {
                    this.find('.tooltip-content').hide();
                    return this;
                },
                init: function() {
                    var $container = this;
                    $container.hover(function() {
                        $container.simpleTooltip('show');
                    }, function() {
                        $container.simpleTooltip('hide');
                    });
                    return this;
                }
            };

            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('方法 ' +  method + ' 在 simpleTooltip 插件中不存在');
            }
        };

        $('#myButton').parent().simpleTooltip('init');
    </script>
</body>
</html>

维护链式调用

在所有非数据获取型的插件方法中，返回 this（即当前的 jQuery 实例）是维持 jQuery 强大链式调用特性的关键。上述所有示例均通过 return this 或 return this.each(...) 确保了这一点，因为 this.each() 本身返回 this。

避免命名冲突

为了防止与其他库或代码冲突，建议将插件代码包裹在一个立即执行函数表达式中，并将 jQuery 作为参数传入，在函数内部使用 $ 符号。同时，插件命名应具有唯一性，避免覆盖已有的 jQuery 方法。

示例：使用 IIFE 保护 $ 别名

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IIFE 与命名冲突示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>安全的插件定义方式。</p>
    <button id="safePluginBtn">执行插件</button>

    <script>
        (function($) {
            $.fn.safePlugin = function() {
                this.css('font-style', 'italic');
                return this;
            };
        })(jQuery);

        $('#safePluginBtn').on('click', function() {
            $('p').safePlugin();
        });
    </script>
</body>
</html>

默认参数与 $.extend()

如上文可配置插件示例所示，$.extend() 是 jQuery 插件开发中处理默认参数的标准工具。它不仅用于合并对象，还能创建对象的副本，避免意外修改原始对象。

版本变更记录

版本变更说明
1.0引入了 jQuery.fn.extend() 方法，奠定了插件开发的基础。
1.4改进了 $.extend() 的深度拷贝功能，使得处理嵌套的默认参数更加方便。
1.9移除了 jQuery.sub() 方法，该方法曾用于创建 jQuery 的副本以避免插件污染。官方推荐使用标准的 jQuery 插件开发模式，即扩展 $.fn。
3.0增强了模块化能力，为 AMD 环境提供了支持。插件的发布和消费方式逐渐向 npm 等现代包管理器迁移，旧版插件注册站进入存档状态。
4.0jQuery 源码迁移至 ES 模块。对于插件开发者而言，这意味着可以更容易地在现代构建工具中开发和测试插件。同时，继续强调避免在插件中使用已被移除的过时 API。

浏览器兼容性

基于 jQuery 3.x 或 4.x 开发的插件，其浏览器兼容性与 jQuery 核心库的兼容性一致。以下为基于 jQuery 4.x 版本（移除了对 IE<11 的支持）的浏览器兼容情况。

浏览器类型最低兼容版本
PC 端
Chrome60+ (当前及先前主要版本)
Edge15+ (基于 Chromium)
Firefox55+ (当前及先前主要版本)
Opera47+ (当前及先前主要版本)
Safari10+ (当前及先前主要版本)
移动端
Chrome Android100+ (当前版本)
Firefox for Android100+ (当前版本)
Opera Android64+ (当前版本)
Safari on iOS10+
Samsung Internet6.2+
WebView Android100+ (当前版本)
WebView on iOS10+

jQuery 插件开发的基础模式围绕 $.fn 扩展、参数处理、链式调用和命名空间保护等核心概念展开。掌握这些模式，可以创建出可复用、可配置且与其他 jQuery 代码和谐共存的模块化功能。这是构建更复杂、更具交互性 Web 应用的重要一步。

最新发布