[JavaScript知识库]ElementUI 、AntDesign 、IVIew三大组件库z-index层级管理方案对比总结

ElementUI

elementUI将弹窗层级管理收敛到了一个入口PopupManager中，涉及zIndex层级的弹窗组件实例都需要注册到PopupManager中。源码传送门

// element/src/utils/popup/popup-manager.js
import { addClass, removeClass } from 'element-ui/src/utils/dom';

// 是否有模态层
let hasModal = false;
// 是否有初始zIndex
let hasInitZIndex = false;
// z-index值
let zIndex;

// 获取模态层
const getModal = function() {
  let modalDom = PopupManager.modalDom;
  if (modalDom) {
    hasModal = true;
  } else {
    hasModal = false;
    modalDom = document.createElement('div');
    PopupManager.modalDom = modalDom;

    modalDom.addEventListener('touchmove', function(event) {
      event.preventDefault();
      event.stopPropagation();
    });

    modalDom.addEventListener('click', function() {
      PopupManager.doOnModalClick && PopupManager.doOnModalClick();
    });
  }

  return modalDom;
};

// 组件实例集合
const instances = {};

// 弹窗管理器
const PopupManager = {
  // 模态消失渐退
  modalFade: true,

  getInstance: function(id) {
    return instances[id];
  },

  register: function(id, instance) {
    if (id && instance) {
      instances[id] = instance;
    }
  },

  deregister: function(id) {
    if (id) {
      instances[id] = null;
      delete instances[id];
    }
  },

  nextZIndex: function() {
    return PopupManager.zIndex++;
  },

  modalStack: [],

  doOnModalClick: function() {
    const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
    if (!topItem) return;

    const instance = PopupManager.getInstance(topItem.id);
    if (instance && instance.closeOnClickModal) {
      instance.close();
    }
  },

  // 打开模态层
  openModal: function(id, zIndex, dom, modalClass, modalFade) {
    if (!id || zIndex === undefined) return;
    this.modalFade = modalFade;

    const modalStack = this.modalStack;

    for (let i = 0, j = modalStack.length; i < j; i++) {
      const item = modalStack[i];
      if (item.id === id) {
        return;
      }
    }

    const modalDom = getModal();

    addClass(modalDom, 'v-modal');
    if (this.modalFade && !hasModal) {
      addClass(modalDom, 'v-modal-enter');
    }
    if (modalClass) {
      let classArr = modalClass.trim().split(/\s+/);
      classArr.forEach(item => addClass(modalDom, item));
    }
    setTimeout(() => {
      removeClass(modalDom, 'v-modal-enter');
    }, 200);

    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
      dom.parentNode.appendChild(modalDom);
    } else {
      document.body.appendChild(modalDom);
    }

    if (zIndex) {
      modalDom.style.zIndex = zIndex;
    }
    modalDom.tabIndex = 0;
    modalDom.style.display = '';

    this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
  },
  
  // 关闭模态层
  closeModal: function(id) {
    const modalStack = this.modalStack;
    const modalDom = getModal();

    if (modalStack.length > 0) {
      const topItem = modalStack[modalStack.length - 1];
      if (topItem.id === id) {
        if (topItem.modalClass) {
          let classArr = topItem.modalClass.trim().split(/\s+/);
          classArr.forEach(item => removeClass(modalDom, item));
        }

        modalStack.pop();
        if (modalStack.length > 0) {
          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
        }
      } else {
        for (let i = modalStack.length - 1; i >= 0; i--) {
          if (modalStack[i].id === id) {
            modalStack.splice(i, 1);
            break;
          }
        }
      }
    }

    if (modalStack.length === 0) {
      if (this.modalFade) {
        addClass(modalDom, 'v-modal-leave');
      }
      setTimeout(() => {
        if (modalStack.length === 0) {
          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
          modalDom.style.display = 'none';
          PopupManager.modalDom = undefined;
        }
        removeClass(modalDom, 'v-modal-leave');
      }, 200);
    }
  }
};

// 代理zIndex
Object.defineProperty(PopupManager, 'zIndex', {
  configurable: true,
  get() {
    if (!hasInitZIndex) {
      zIndex = zIndex || 2000;
      hasInitZIndex = true;
    }
    return zIndex;
  },
  set(value) {
    zIndex = value;
  }
});

// 获取最高层的弹窗
const getTopPopup = function() {
  if (PopupManager.modalStack.length > 0) {
    const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
    if (!topPopup) return;
    const instance = PopupManager.getInstance(topPopup.id);

    return instance;
  }
};

// 处理esc按键
window.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) {
    const topPopup = getTopPopup();

    if (topPopup && topPopup.closeOnPressEscape) {
      topPopup.handleClose
        ? topPopup.handleClose()
        : (topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close());
    }
  }
});

export default PopupManager;

AntDesign

AntDesign的层级管理方案，利用了less预处理语言的特性，根据组件类型声明基准zIndex，不同类型组件之间的基准值相差至少10，同时组件内部基于基准值维护各自的zIndex。源码传送门

// ant-design/components/style/themes/default.less
/* z-index列表, 按值从小到大排列 */
@zindex-badge: auto;
@zindex-table-fixed: 2;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-popoconfirm: 1060;
@zindex-tooltip: 1070;
@zindex-image: 1080;

以Table组件为例：
// ant-design/components/table/style/index.less
@import '../../style/themes/index';
 
@table-sticky-zindex: (@zindex-table-fixed + 1);
 
&-summary {
    position: relative;
    z-index: @zindex-table-fixed;
    background: @table-bg;
}

&-cell-fix-left,
&-cell-fix-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: @zindex-table-fixed;
    background: @table-bg;
}

&-sticky {
    &-holder {
        position: sticky;
        z-index: @table-sticky-zindex;
        background: @component-background;
    }
}

IVIew

IView的方案和ElementUI类似，但是看上去更简单直接，全局维护一个transferIndex值，每个组件只要使用了一次transferIndex，就主动调用方法transferIncrease使得transferIndex的值+1。源码传送门

// iview/src/utils/transfer-queue.js
let transferIndex = 0;

function transferIncrease() {
    transferIndex++;
}

export {transferIndex, transferIncrease};

下面以poptip组件为例（已移除无关代码）。其默认基础zIndex为1060，实际zIndex为1060 + transferIndex，当每个Poptip组件实例生成时，获取当前transferIndex，并调用方法transferIncrease。源码传送门

// iview/src/components/poptip/poptip.vue
import { transferIndex, transferIncrease } from '../../utils/transfer-queue';

export default {
    data() {
        return {
            tIndex: this.handleGetIndex()
        }
    },
    computed: {
        styles() {
            let style = {};
    
            if (this.transfer) style['z-index'] = 1060 + this.tIndex;
    
            return style;
        }
    },
    methods: {
        handleGetIndex () {
            transferIncrease();
            return transferIndex;
        }
    }
}

对比总结