js自定义弹框插件的封装

封装js自定义弹框插件的步骤如下：

第一步：定义插件的基本结构

我们需要定义一个闭包函数，这个函数作为插件的主入口，所有相关的配置、参数等都从这里传入。同时，为了避免命名冲突的问题，我们会在这个闭包函数内部定义一个独立的命名空间，以保证插件运行时不会受到外部代码的干扰。我们还需要在命名空间中定义插件的基本配置和默认值。

(function(window, document, undefined) { // 定义闭包函数
    var namespace = 'customDialog'; // 定义命名空间
    var defaults = { // 定义插件默认值
        title: '默认标题',
        content: '默认内容',
        buttons: ['确定'],
        onConfirm: null,
        onCancel: null
    };
    // 插件代码
})(window, document);

第二步：对外暴露插件接口

为了方便其他代码调用插件，我们需要在闭包函数内部定义一个全局的接口，该接口可以直接使用命名空间来访问插件。

(function(window, document, undefined) { 
    var namespace = 'customDialog'; 
    var defaults = { 
        title: '默认标题',
        content: '默认内容',
        buttons: ['确定'],
        onConfirm: null,
        onCancel: null
    };

    var plugin = function(options) {
        // 插件实现代码
    };

    window[namespace] = plugin; // 对外暴露接口
})(window, document);

第三步：根据传入的参数渲染插件

我们需要在插件函数内部对传入的参数进行解析，并根据解析结果生成对应的 HTML 结构。同时，我们还可以根据传入的回调函数初始化按钮事件。

var plugin = function(options) {
    // 1. 合并默认参数和传入参数
    var settings = Object.assign({}, defaults, options);

    // 2. 生成 HTML 结构
    var html = `
        <div class="dialog">
            <div class="dialog-title">${settings.title}</div>
            <div class="dialog-content">${settings.content}</div>
            <div class="dialog-buttons">
                ${
                    settings.buttons.map(function(buttonText) {
                        return '<button>' + buttonText + '</button>';
                    }).join('')
                }
            </div>
        </div>
    `;

    // 3. 插入到页面中
    var dialog = document.createElement('div');
    dialog.innerHTML = html;
    document.body.appendChild(dialog);

    // 4. 绑定事件
    var buttons = dialog.querySelectorAll('.dialog-buttons button');
    buttons.forEach(function(button, index) {
        button.addEventListener('click', function() {
            if (index === 0 && typeof settings.onConfirm === 'function') {
                settings.onConfirm();
            } else if (index === 1 && typeof settings.onCancel === 'function') {
                settings.onCancel();
            }
            document.body.removeChild(dialog); // 在点击按钮后销毁弹框
        });
    });
};

这里的渲染主要是生成一个包含弹框标题、内容和按钮的 HTML 结构，并插入到页面中。同时，我们根据传入的按钮文本数组生成对应数量的 button 元素，并绑定了点击事件，在点击后根据所在按钮的索引来执行相应的回调函数。

第四步：完善插件的可扩展性

我们需要让插件具备一定的可扩展性，这样才能保证插件在实际应用中更加灵活。

为了实现可扩展性，我们可以在插件函数内部定义一些扩展点，这些扩展点可以根据外部传入的参数来决定是否启用。比如，我们可以定义一个组件库，允许用户自定义弹框的样式，而且这些样式可以在使用插件时动态加载。

var plugin = function(options) {
    // 1. 解析参数，生成基本 HTML
    // ...

    // 2. 判断是否启用组件库
    if (typeof options.library === 'object') {
        var library = options.library;

        // 2.1 加载样式文件
        var link = document.createElement('link');
        link.href = library.css;
        link.rel = 'stylesheet';
        document.head.appendChild(link);

        // 2.2 根据组件库生成对应的 HTML
        // ...
    }

    // 3. 在底部留出扩展点
    if (typeof options.extend === 'function') {
        var extension = document.createElement('div');
        extension.className = 'dialog-extension';
        dialog.appendChild(extension);
        options.extend(extension);
    }
};

在这里，我们通过判断传入参数的类型，来决定是否需要启用某些扩展点。如果启用了组件库，则通过动态创建 link 标签来加载对应的样式文件，并在需要的地方生成额外的 HTML 结构；如果用户需要在底部添加一些自定义内容，则在弹框底部留出空间，并将相关的内容插入进去。这样就可以充分发挥插件的可扩展性，让其能够适应各种不同的需求。

示例

下面是一个使用自定义弹框插件的示例代码：

customDialog({
    title: '提示',
    content: '这是一个自定义弹框',
    buttons: ['确定', '取消'],
    onConfirm: function() {
        console.log('点击了确定');
    },
    onCancel: function() {
        console.log('点击了取消');
    },
    library: {
        css: 'style.css'
    },
    extend: function(element) {
        element.innerHTML = '<div>自定义扩展内容</div>';
    }
});

这个示例中，我们首先调用了 customDialog 函数，并传入了一些参数来配置弹框的基本信息，包括弹框的标题、内容、按钮等，以及确定和取消按钮的回调函数。

其中 library 参数用于加载组件库，我们指定了一个 css 文件；extend 参数用于在底部留出一些扩展空间，我们通过传入一个回调函数来动态插入自定义内容。 以上就是封装自定义弹框插件的完整攻略，通过这种方式，我们可以方便地实现各种不同样式和功能的弹框，并且可以通过参数来定制化弹框的行为，让其可以适应各种场景。