用原生JS封装插件的方式有哪些？

在前端开发中，使用原生JavaScript封装插件的方式有多种。以下是一些常见的方法：

1. 全局函数或变量：

这是最简单的方式，但也是最容易造成命名冲突的方式。你可以直接在全局作用域中定义一个函数或变量，然后在其他地方调用它。

function myPluginFunction() {
    // 插件逻辑
}

// 使用插件
myPluginFunction();

2. 命名空间：

为了避免全局命名冲突，你可以使用一个对象作为命名空间，将所有的插件函数或变量放在这个对象下。

var myNamespace = {};

myNamespace.myPluginFunction = function() {
    // 插件逻辑
};

// 使用插件
myNamespace.myPluginFunction();

3. 立即执行函数表达式（IIFE）：

使用IIFE可以创建一个隔离的作用域，避免污染全局作用域。你可以在IIFE中定义插件的逻辑，并通过返回值暴露必要的接口。

var myPlugin = (function() {
    // 私有变量和函数
    var privateVar = 'private';
    
    function privateFunction() {
        // 私有函数逻辑
    }
    
    // 暴露给外界的接口
    return {
        publicFunction: function() {
            // 公共函数逻辑，可以调用私有变量和函数
            privateFunction();
        }
    };
})();

// 使用插件
myPlugin.publicFunction();

4. 模块模式：

模块模式类似于IIFE，但更强调模块的封装和复用。你可以定义一个模块，并在模块中定义插件的逻辑和接口。然后，你可以在其他地方引入并使用这个模块。

在ES6之前，可以使用CommonJS或AMD规范来定义和加载模块。在ES6及之后的版本中，可以使用ES6模块语法。

CommonJS示例（Node.js环境）：

// myPlugin.js
function myPluginFunction() {
    // 插件逻辑
}

module.exports = myPluginFunction;

// 使用插件的文件
const myPlugin = require('./myPlugin');
myPlugin();

ES6模块示例：

// myPlugin.js
export function myPluginFunction() {
    // 插件逻辑
}

// 使用插件的文件
import { myPluginFunction } from './myPlugin';
myPluginFunction();

5. UMD（Universal Module Definition）：

UMD允许你的插件在多种环境中使用，包括浏览器全局作用域、CommonJS和AMD环境。它通过检测当前环境来选择合适的模块加载方式。
6. 类/构造函数：

如果你的插件需要维护状态或具有多个实例，你可以使用类（在ES6中）或构造函数来定义插件。每个实例可以有自己的状态和方法。
7. 原型扩展：

你可以扩展内置对象的原型（如String.prototype、Array.prototype等）来添加新的方法。这种方式需要谨慎使用，因为它可能会与其他代码产生冲突。通常建议避免修改内置对象的原型，除非你非常清楚自己在做什么。
8. 使用现代前端构建工具：

如Webpack、Rollup等，这些工具提供了强大的模块打包和代码分割功能，使得插件的开发和分发更加容易和高效。你可以使用ES6模块语法编写插件，并利用这些工具将其打包为UMD、CommonJS或其他格式的模块。