创建支持UMD的jQuery和vanilla Javascript插件？

创建支持UMD的jQuery和Vanilla JavaScript插件指南

基础概念

UMD (Universal Module Definition) 是一种JavaScript模块模式，它允许代码在多种环境中工作，包括CommonJS (Node.js)、AMD (RequireJS) 和浏览器全局变量。

优势

跨环境兼容：同一代码可以在Node.js、RequireJS和浏览器中运行
代码复用：无需为不同环境编写不同版本
更好的生态系统集成：更容易被各种构建工具和打包器处理

插件类型

jQuery插件：扩展jQuery功能
Vanilla JS插件：纯JavaScript实现，不依赖jQuery

实现示例

基础UMD模板

(function (global, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD环境
        define(['jquery'], factory);
    } else if (typeof exports === 'object' && typeof module !== 'undefined') {
        // CommonJS环境
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局环境
        factory(global.jQuery);
    }
}(this, function ($) {
    'use strict';

    // 插件代码在这里
    $.fn.myPlugin = function(options) {
        // 默认配置
        var settings = $.extend({
            color: 'red',
            backgroundColor: 'white'
        }, options);

        // 插件逻辑
        return this.each(function() {
            $(this).css({
                color: settings.color,
                backgroundColor: settings.backgroundColor
            });
        });
    };

    // 返回插件以便在CommonJS中使用
    return $.fn.myPlugin;
}));

同时支持jQuery和Vanilla JS的UMD插件

(function (global, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD环境
        define(['jquery'], function($) {
            return factory($, global);
        });
    } else if (typeof exports === 'object' && typeof module !== 'undefined') {
        // CommonJS环境
        var jquery = require('jquery');
        module.exports = factory(jquery, global);
    } else {
        // 浏览器全局环境
        factory(global.jQuery, global);
    }
}(this, function ($, global) {
    'use strict';

    // Vanilla JS版本
    function MyPlugin(element, options) {
        this.element = element;
        this.settings = Object.assign({
            color: 'red',
            backgroundColor: 'white'
        }, options);
        this.init();
    }

    MyPlugin.prototype.init = function() {
        this.element.style.color = this.settings.color;
        this.element.style.backgroundColor = this.settings.backgroundColor;
    };

    // jQuery版本
    $.fn.myPlugin = function(options) {
        return this.each(function() {
            if (!$.data(this, 'myPlugin')) {
                $.data(this, 'myPlugin', 
                    new MyPlugin(this, options));
            }
        });
    };

    // 暴露到全局
    global.MyPlugin = MyPlugin;

    return MyPlugin;
}));

应用场景

开源库开发：希望你的库能被广泛使用
企业级应用：需要在不同环境中使用相同代码
渐进增强：同时支持现代模块系统和传统脚本引入

常见问题及解决方案

问题1：插件在Node.js中无法工作

原因：可能没有正确处理CommonJS环境或缺少jQuery依赖

解决：

确保在UMD模板中正确检测CommonJS环境
在package.json中添加jQuery作为peerDependency

问题2：全局变量污染

原因：插件可能无意中创建了太多全局变量

解决：

使用IIFE封装代码
只暴露必要的接口

问题3：jQuery和Vanilla JS版本行为不一致

原因：两套实现可能有细微差别

解决：

让jQuery版本调用Vanilla JS版本（如示例所示）
编写共享的核心逻辑

最佳实践

保持轻量：UMD包装会增加一些代码量，保持核心功能精简
明确依赖：在package.json中声明peerDependencies
版本兼容：考虑提供不同版本支持不同jQuery版本
测试覆盖：确保在所有目标环境中测试插件

通过UMD模式创建插件可以大大提高代码的可重用性和兼容性，是现代JavaScript开发的推荐做法。