前端js弹层组件

/**
 *  全局展示操作反馈信息：例
 *  import message from 'message';
 *  message.error('这是一条普通的提醒', 2000);
 */

let defaultDuration = 2; // 默认停留时间 单位：s
let tipBoxInstance; // 唯一实例
let setTimeoutPointer; // settimeout指针
let onHideFuncQueue = {};// 视图隐藏时的回调函数HASH MAP
let onHideFuncID = 0;// 视图隐藏时的回调函数ID

function getOnHideFuncID() {
    // 临界值判断
    if (onHideFuncID === Number.MAX_VALUE) {
        onHideFuncID = 0;
    }
    return onHideFuncID++;
}

function getTipBoxInstance(type, textTip) {
    if (tipBoxInstance === void 0 || tipBoxInstance === null) {
        if (window.jQuery === void 0 || window.jQuery === null) {
            throw "The jQeury framework is missing";
        }
        if(!type){
            return;
        }
        let content;
        switch (type) {
            case 'success':
                content =
                    `<div class="c-global-tips-pack">
                        <div class="c-global-tips">
                            <span class="l-flex_align-center">
                                <i class="i-icon i-icon--success"></i>
                            </span>
                            <span class="tip-text"></span>
                        </div>
                    </div>`;
                break;
            case 'error':
                content =
                    `<div class="c-global-tips-pack">
                        <div class="c-global-tips">
                            <span class="l-flex_align-center">
                                <i class="i-icon i-icon--faile-02"></i>
                            </span>
                            <span class="tip-text"></span>
                        </div>
                    </div>`;
                break;
            default:
                break;
        }
        tipBoxInstance = {
            isShow: false,// 是否显示
            type: undefined, // 显示类型
            textTip: undefined, // 提示文字
            show: function () {
                if (this.isShow === true) {
                    return;
                }
                window.jQuery(document.body).append(this.$dom);
                this.isShow = true;
            },
            removeFromSuperView: function () { // 从父级视图移除
                if (this.isShow === false) {
                    return;
                }
                this.$dom.remove();
                this.isShow = false;
            },
            $dom: window.jQuery(
                content
            )
        };
    }
    const _$textP = tipBoxInstance.$dom.find(".tip-text");
    _$textP.text(textTip);
    return tipBoxInstance;
}

function show(content, duration = defaultDuration, type, onHide) {
    let instance = getTipBoxInstance(type, content);
    instance.show();
    // 清除之前的隐藏视图计划任务
    clearSettimeoutQueue();
    // 触发所有回调函数
    emitAllOnnHideFuncQueue();
    // 将回调函数加入队列
    let _onHideFuncID = addOnnHideFuncQueue(onHide);
    const _hideViewFunc = instance.removeFromSuperView.bind(instance);
    // 在视图隐藏时的计划任务
    const _task = () => {
        // 隐藏视图
        _hideViewFunc();
        // 触发回调函数
        emitOnnHideFuncQueue(_onHideFuncID);
    };
    setTimeoutPointer = setTimeout(_task, duration * 1000);
    return ()=>{
        // 立即执行在视图隐藏时的计划任务
        _task();
        // 取消在视图隐藏时的计划任务
        clearTimeout(setTimeoutPointer);
    };
}

// 加入回调函数队列
function addOnnHideFuncQueue(onHideCallbackFunc) {
    let _onHideFuncID;
    if (onHideCallbackFunc && typeof onHideCallbackFunc === "function") {
        _onHideFuncID = getOnHideFuncID();
        onHideFuncQueue[_onHideFuncID] = onHideCallbackFunc;
    }
    return _onHideFuncID;
}

// 触发回调函数
function emitOnnHideFuncQueue(id) {
    if(onHideFuncQueue[id]){
        onHideFuncQueue[id]();
        delete onHideFuncQueue[id];
    }
}

// 触发所有回调函数
function emitAllOnnHideFuncQueue() {
    for(let id in onHideFuncQueue){
        emitOnnHideFuncQueue(id);
    }
}

function clearSettimeoutQueue() {
    if (setTimeoutPointer !== void 0 || setTimeoutPointer !== null) {
        clearTimeout(setTimeoutPointer);
        setTimeoutPointer = null;
    }
}

export default {
    success(content, duration, onHide) {
        return show(content, duration, 'success', onHide);
    },
    error(content, duration, onHide) {
        return show(content, duration, 'error', onHide);
    },
    destroy() {
        if (tipBoxInstance !== void 0 || tipBoxInstance !== null) {
            clearSettimeoutQueue();
            tipBoxInstance.removeFromSuperView(); // 从父级视图移除
            tipBoxInstance = null;
        }
    },
};