說明

popper是參考popper.js來實(shí)現(xiàn)浮動的工具岸蜗，結(jié)構(gòu)十分清晰明了惠豺，通過modifiers來處理數(shù)據(jù)的思路在vue中也有相應(yīng)的體現(xiàn)，因此值得學(xué)習(xí)努隙，源碼較長，建議大家復(fù)制到自己的 IDE 中觀看辜昵。

源碼解讀

/**
 * 模塊處理荸镊，支持：Node，AMD堪置，瀏覽器全局變量
 * root 指代全局變量
 * factory 指代下面的 Popper
 */
;(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. 注冊一個(gè)匿名模塊
        define(factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node環(huán)境躬存。
        // 并不支持嚴(yán)格的 CommonJS，但是支持類似 Node 這樣支持 module.exports 的類 CommonJS 環(huán)境
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        // 瀏覽器的全局變量舀锨，root指代window
        root.Popper = factory();
    }
}(this, function () {

    'use strict';

    // 全局變量岭洲，其實(shí)這里有更好的方法，但是因?yàn)橹恍枰幚頌g覽器環(huán)境下的全局變量所以直接這樣寫了
    var root = window;

    // 默認(rèn)選項(xiàng)
    var DEFAULTS = {
        // popper 放置位置
        placement: 'bottom',

        // 是否開啟 GPU 加速
        gpuAcceleration: true,

        // 根據(jù)給定的像素值將 popper 從原位置進(jìn)行偏移（可以是負(fù)值）
        offset: 0,

        // popper 的邊界元素
        boundariesElement: 'viewport',

        // popper 與邊界元素的最小距離
        boundariesPadding: 5,

        // popper 會嘗試以如下順序防止溢出坎匿，默認(rèn)情況下他可能在邊界元素的左邊界和上邊界出現(xiàn)溢出
        preventOverflowOrder: ['left', 'right', 'top', 'bottom'],

        // 改變 popper 位置時(shí)的選項(xiàng)盾剩，默認(rèn)是翻轉(zhuǎn)到對稱面上雷激。
        flipBehavior: 'flip',

        // 箭頭元素
        arrowElement: '[x-arrow]',

        // popper 偏移值的修飾符，用來在偏移值應(yīng)用到 popper 之前進(jìn)行修改
        modifiers: [ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],

        // 不使用的函數(shù)
        modifiersIgnored: [],

        // 絕對定位
        forceAbsolute: false
    };

    /**
     * 創(chuàng)建 Popper.js 的實(shí)例
     * @constructor Popper
     * @param {HTMLElement} reference - 用來定位popper的相關(guān)元素
     * @param {HTMLElement|Object} popper 用來作為 popper 的HTML元素彪腔，或者用來生成 popper 的配置
     * @param {String} [popper.tagName='div'] 生成的 popper 的標(biāo)簽名
     * @param {Array} [popper.classNames=['popper']] 給生成的 popper 添加的類名數(shù)組
     * @param {Array} [popper.attributes] 通過 `attr:value` 的形式給 popper 添加屬性
     * @param {HTMLElement|String} [popper.parent=window.document.body] 父元素的HTML元素或者查詢字符串
     * @param {String} [popper.content=''] popper 的內(nèi)容侥锦，可以是文本、HTML或者結(jié)點(diǎn)德挣；如果不是文本恭垦，應(yīng)當(dāng)將 `contentType` 設(shè)置為 `html` 或者 `node`
     * @param {String} [popper.contentType='text'] 如果是 `html` 內(nèi)容會變當(dāng)做 HTML 解析；如果是 `node` 會原樣插入
     * @param {String} [popper.arrowTagName='div'] 箭頭元素的標(biāo)簽名
     * @param {Array} [popper.arrowClassNames='popper__arrow'] 應(yīng)用于箭頭元素的類名數(shù)組
     * @param {String} [popper.arrowAttributes=['x-arrow']] 應(yīng)用于箭頭元素的屬性
     * @param {Object} options 選項(xiàng)
     * @param {String} [options.placement=bottom]
     *      popper 放置位置格嗅，可接受如下值：
     *          top(-start, -end)
     *          right(-start, -end)
     *          bottom(-start, -right)
     *          left(-start, -end)
     *
     * @param {HTMLElement|String} [options.arrowElement='[x-arrow]']
     *      用于 popper 的箭頭的 DOM 結(jié)點(diǎn)番挺，或者用來獲取該節(jié)點(diǎn)的 CSS 選擇器。
     *      它應(yīng)當(dāng)是父級 Popper 的孩子節(jié)點(diǎn)屯掖。
     *      Popper.js 會給該元素添加必須的樣式來和它相關(guān)的元素對其玄柏。
     *      默認(rèn)情況下，他會尋找 popper 子結(jié)點(diǎn)中包含 `x-arrow` 屬性的結(jié)點(diǎn)贴铜。
     *
     * @param {Boolean} [options.gpuAcceleration=true]
     *      If set to false, the popper will be placed using `top` and `left` properties, not using the GPU.
     *      當(dāng)這一屬性被設(shè)置為 true 時(shí)粪摘，popper 的位置將通過 CSS3 的 translate3d 來改變。
     *      這樣會讓瀏覽器使用 GPU 來加速渲染過程绍坝。
     *      如果設(shè)置為 false徘意，popper 將通過 `top` 和 `left` 屬性來定位，并不會使用 GPU轩褐。
     *
     * @param {Number} [options.offset=0]
     *      popper 偏移的像素值（可以是負(fù)數(shù)）椎咧。
     *
     * @param {String|Element} [options.boundariesElement='viewport']
     *      用來定義 popper 邊界的元素。
     *      popper 絕不會超出該邊界（除非允許 `keepTogether`）把介。
     *
     * @param {Number} [options.boundariesPadding=5]
     *      邊界的內(nèi)邊距勤讽。
     *
     * @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']]
     *      Popper.js 根據(jù)這個(gè)順序來避免溢出邊界，他們會依次檢測拗踢，這意味著最后的情況絕對不會溢出（即 right 和 bottom）脚牍。
     *
     * @param {String|Array} [options.flipBehavior='flip']
     *      用來指定 `flip` 修飾符的行為，這一修飾符是用來在 popper 要覆蓋其相關(guān)元素時(shí)改變 popper 位置的巢墅。
     *      如果設(shè)置為 `flip`诸狭，popper 的位置將根據(jù)對稱軸翻轉(zhuǎn)（左右或者上下）。
     *      也可以傳遞位置數(shù)組（如 `['right', 'left', 'top']`）來手動指定需要改變時(shí)的位置順序砂缩。
     *      （例如作谚，在這個(gè)例子里三娩，首先會從右邊翻轉(zhuǎn)到左邊庵芭，然后如果仍然覆蓋了相關(guān)元素，將會移動到上邊）
     *
     * @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']]
     *      用來改變應(yīng)用到 popper 的數(shù)值的修飾符雀监。
     *      可以添加自定義的函數(shù)來改變偏移值和位置双吆。
     *      自定義的函數(shù)應(yīng)當(dāng)有 preventOverflow 的參數(shù)和返回值眨唬。
     *
     * @param {Array} [options.modifiersIgnored=[]]
     *      指定需要移除的內(nèi)置的修飾符。
     *
     * @param {Boolean} [options.removeOnDestroy=false]
     *      當(dāng)你想要在調(diào)用 `destroy` 方法時(shí)自動移除 popper 時(shí)好乐，應(yīng)當(dāng)將此項(xiàng)設(shè)置為 true匾竿。
     */
    function Popper(reference, popper, options) {
        // 保存相關(guān)元素的引用，如果是 jQuery 實(shí)例蔚万，則取[0]岭妖，即獲得原始的 HTML 結(jié)點(diǎn)
        this._reference = reference.jquery ? reference[0] : reference;
        // 狀態(tài)對象初始化
        this.state = {};

        // 如果 popper 變量是一個(gè)用來配置的對象，就通過解析它來生成 HTMLElement反璃， 如果沒有指定就生成一個(gè)默認(rèn)的 popper
        var isNotDefined = typeof popper === 'undefined' || popper === null;  // 判斷是否定義了 popper
        var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]';  // 判斷 popper 是不是對象
        if (isNotDefined || isConfig) {  // 如果沒有定義并且有配置對象
            this._popper = this.parse(isConfig ? popper : {});  // 通過該配置生成昵慌，或者生成一個(gè)默認(rèn)的
        }
        else {  // 否則使用給定的 HTMLElement 作為 popper
            this._popper = popper.jquery ? popper[0] : popper;
        }

        // 合并默認(rèn)選項(xiàng)和傳參的選項(xiàng)生成新的選項(xiàng)
        this._options = Object.assign({}, DEFAULTS, options);

        // 重新生成修飾符列表
        this._options.modifiers = this._options.modifiers.map(function(modifier){
            // 移除忽略的修飾符
            if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return;

            // 將設(shè)置 x-placement 提到最前面，因?yàn)樗鼤挥脕斫o popper 增加邊距
            // 而邊距將被用來計(jì)算正確的 popper 的偏移
            if (modifier === 'applyStyle') {
                this._popper.setAttribute('x-placement', this._options.placement);
            }

            // 返回內(nèi)置的修飾符或者自定義的
            return this.modifiers[modifier] || modifier;
        }.bind(this));

        // 確保在計(jì)算前已經(jīng)應(yīng)用了 popper 的位置
        this.state.position = this._getPosition(this._popper, this._reference);
        setStyle(this._popper, { position: this.state.position});

        // 觸發(fā) update 來讓 popper 定位到正確的位置
        this.update();

        // 添加相關(guān)的事件監(jiān)聽淮蜈，它們會在一定的情況下處理位置更新
        this._setupEventListeners();
        return this;
    }


    //
    // 方法
    //
    /**
     * 銷毀 popper
     * @method
     * @memberof Popper
     */
    Popper.prototype.destroy = function() {
        this._popper.removeAttribute('x-placement');  // 移除 x-placement 屬性
        this._popper.style.left = '';  // left 設(shè)置為空
        this._popper.style.position = '';  // position 設(shè)置為空
        this._popper.style.top = '';  // top 設(shè)置為空
        this._popper.style[getSupportedPropertyName('transform')] = '';  // transform 設(shè)置為空
        this._removeEventListeners();  // 移除事件監(jiān)聽

        // 如果用戶顯式的調(diào)用了 destroy斋攀，就移除 popper
        if (this._options.removeOnDestroy) {
            this._popper.remove();  // 移除
        }
        return this;
    };

    /**
     * 更新 popper 的位置，計(jì)算新的偏移并引用新的樣式
     * @method
     * @memberof Popper
     */
    Popper.prototype.update = function() {
        var data = { instance: this, styles: {} };

        // 在 data 對象中存儲位置信息梧田，修飾符可以在需要的時(shí)候編輯該信息
        // 通過 _originalPlacement 保存原始的信息
        data.placement = this._options.placement;
        data._originalPlacement = this._options.placement;

        // 計(jì)算 popper 和相關(guān)元素的偏移淳蔼，將結(jié)果放到 data.offsets 中
        data.offsets = this._getOffsets(this._popper, this._reference, data.placement);

        // 獲取邊界信息
        data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement);

        // 執(zhí)行相應(yīng)的修飾符
        data = this.runModifiers(data, this._options.modifiers);

        // 調(diào)用更新的回調(diào)函數(shù)
        if (typeof this.state.updateCallback === 'function') {
            this.state.updateCallback(data);
        }

    };

    /**
     * 如果傳了一個(gè)函數(shù)，將會以 popper 作為第一個(gè)參數(shù)執(zhí)行
     * @method
     * @memberof Popper
     * @param {Function} callback
     */
    Popper.prototype.onCreate = function(callback) {
        callback(this);
        return this;
    };

    /**
     * 如果傳遞了函數(shù)裁眯，將會在 popper 每次更新是執(zhí)行鹉梨。第一個(gè)參數(shù)是坐標(biāo)等信息用來改變 popper 和它的箭頭的樣式
     * 注：在構(gòu)造函數(shù)中的 `Popper.update()` 處并不會觸發(fā)
     * @method
     * @memberof Popper
     * @param {Function} callback
     */
    Popper.prototype.onUpdate = function(callback) {
        this.state.updateCallback = callback;
        return this;
    };

    /**
     * 用來根據(jù)配置文件來生成 popper
     * @method
     * @memberof Popper
     * @param config {Object} configuration 配置信息
     * @returns {HTMLElement} popper
     */
    Popper.prototype.parse = function(config) {
        // 默認(rèn)配置
        var defaultConfig = {
            tagName: 'div',
            classNames: [ 'popper' ],
            attributes: [],
            parent: root.document.body,
            content: '',
            contentType: 'text',
            arrowTagName: 'div',
            arrowClassNames: [ 'popper__arrow' ],
            arrowAttributes: [ 'x-arrow']
        };
        // 合并配置
        config = Object.assign({}, defaultConfig, config);

        // 文檔對象
        var d = root.document;

        // 創(chuàng)建 popper 元素
        var popper = d.createElement(config.tagName);
        // 添加相關(guān)的類名
        addClassNames(popper, config.classNames);
        // 添加相關(guān)的屬性
        addAttributes(popper, config.attributes);

        if (config.contentType === 'node') {  // 如果內(nèi)容是結(jié)點(diǎn)
            popper.appendChild(config.content.jquery ? config.content[0] : config.content);  // 直接插入相應(yīng)的結(jié)點(diǎn)
        }else if (config.contentType === 'html') {  // 如果結(jié)點(diǎn)是 HTML
            popper.innerHTML = config.content;  // 作為 HTML 渲染
        } else {
            popper.textContent = config.content;  // 作為文本
        }

        if (config.arrowTagName) {  // 如果有箭頭的標(biāo)簽名
            var arrow = d.createElement(config.arrowTagName);  // 創(chuàng)建相應(yīng)標(biāo)簽
            addClassNames(arrow, config.arrowClassNames);  // 添加相應(yīng)的類名
            addAttributes(arrow, config.arrowAttributes);  // 添加相應(yīng)的屬性
            popper.appendChild(arrow);  // 插入箭頭
        }

        // 獲取父元素
        var parent = config.parent.jquery ? config.parent[0] : config.parent;

        // 如果 parent 是字符串，使用它來匹配元素
        // 如果匹配到多個(gè)元素未状，使用第一個(gè)元素作為父元素
        // 如果沒有匹配到元素俯画，拋出錯誤
        if (typeof parent === 'string') {
            parent = d.querySelectorAll(config.parent);  // 匹配相關(guān)元素
            if (parent.length > 1) {  // 警告匹配到多個(gè)元素
                console.warn('WARNING: the given `parent` query(' + config.parent + ') matched more than one element, the first one will be used');
            }
            if (parent.length === 0) {  // 沒有匹配到元素則拋出錯誤
                throw 'ERROR: the given `parent` doesn\'t exists!';
            }
            parent = parent[0];  // 取第一個(gè)作為父元素
        }

        // 如果給定的 parent 是 DOM 結(jié)點(diǎn)列表或者多余一個(gè)元素的數(shù)組列表，都取第一個(gè)作為父元素
        if (parent.length > 1 && parent instanceof Element === false) {
            console.warn('WARNING: you have passed as parent a list of elements, the first one will be used');
            parent = parent[0];
        }

        // 將生成的 popper 插入父元素
        parent.appendChild(popper);

        // 返回 popper
        return popper;

        /**
         * 為指定的元素添加類名
         * @function
         * @ignore
         * @param {HTMLElement} target 要添加類名的元素
         * @param {Array} classes 要添加的類名數(shù)組
         */
        function addClassNames(element, classNames) {
            classNames.forEach(function(className) {
                element.classList.add(className);
            });
        }

        /**
         * 為指定的元素添加屬性
         * @function
         * @ignore
         * @param {HTMLElement} target 要添加屬性的元素
         * @param {Array} attributes 要添加的屬性數(shù)組司草，鍵值對通過 : 分割
         * @example
         * addAttributes(element, [ 'data-info:foobar' ]);
         */
        function addAttributes(element, attributes) {
            attributes.forEach(function(attribute) {
                element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || '');
            });
        }

    };

    /**
     * 用來獲取要應(yīng)用到 popper 上的 position 信息
     * @method
     * @memberof Popper
     * @param popper {HTMLElement} popper元素
     * @param reference {HTMLElement} 相關(guān)元素
     * @returns {String} position 信息
     */
    Popper.prototype._getPosition = function(popper, reference) {
        var container = getOffsetParent(reference);  // 獲取父元素的偏移

        if (this._options.forceAbsolute) {  // 強(qiáng)制使用絕對定位
            return 'absolute';
        }

        // 判斷 popper 是否使用固定定位
        // 如果相關(guān)元素位于固定定位的元素中艰垂，popper 也應(yīng)當(dāng)使用固定固定定位來使它們可以同步滾動
        var isParentFixed = isFixed(reference, container);
        return isParentFixed ? 'fixed' : 'absolute';
    };

    /**
     * 獲得 popper 的偏移量
     * @method
     * @memberof Popper
     * @access private
     * @param {Element} popper - popper 元素
     * @param {Element} reference - 相關(guān)元素（popper 將根據(jù)它定位）
     * @returns {Object} 包含將應(yīng)用于 popper 的位移信息的對象
     */
    Popper.prototype._getOffsets = function(popper, reference, placement) {
        // 獲取前綴
        placement = placement.split('-')[0];
        var popperOffsets = {};

        // 設(shè)置 position
        popperOffsets.position = this.state.position;
        // 判斷父元素是否固定定位
        var isParentFixed = popperOffsets.position === 'fixed';

        //
        // 獲取相關(guān)元素的位置
        //
        var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);

        //
        // 獲取 popper 的大小
        //
        var popperRect = getOuterSizes(popper);

        //
        // 計(jì)算 popper 的偏移
        //

        // 根據(jù) popper 放置位置的不同，我們用不同的方法計(jì)算
        if (['right', 'left'].indexOf(placement) !== -1) {  // 如果在水平方向埋虹，應(yīng)當(dāng)和相關(guān)元素垂直居中對齊
            // top 應(yīng)當(dāng)為相關(guān)元素的 top 加上二者的高度差的一半猜憎，這樣才能保證垂直居中對齊
            popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2;
            if (placement === 'left') {  // 如果在左邊，則 left 應(yīng)為相關(guān)元素的 left 減去 popper 的寬度
                popperOffsets.left = referenceOffsets.left - popperRect.width;
            } else {  // 如果在右邊搔课，則 left 應(yīng)為相關(guān)元素的 right
                popperOffsets.left = referenceOffsets.right;
            }
        } else {  // 如果在垂直方向胰柑，應(yīng)當(dāng)和相關(guān)元素水平居中對齊
            // left 應(yīng)當(dāng)為相關(guān)元素的 left 加上二者的寬度差的一半
            popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2;
            if (placement === 'top') {  // 如果在上邊，則 top 應(yīng)當(dāng)為相關(guān)元素的 top 減去 popper 的高度
                popperOffsets.top = referenceOffsets.top - popperRect.height;
            } else {  // 如果在下邊爬泥，則 top 應(yīng)當(dāng)為 相關(guān)元素的 bottom
                popperOffsets.top = referenceOffsets.bottom;
            }
        }

        // 給 popperOffsets 對象增加寬度和高度值
        popperOffsets.width   = popperRect.width;
        popperOffsets.height  = popperRect.height;


        return {
            popper: popperOffsets,  // popper 的相關(guān)信息
            reference: referenceOffsets  // 相關(guān)元素的相關(guān)信息
        };
    };


    /**
     * 初始化更新 popper 位置時(shí)用到的事件監(jiān)聽器
     * @method
     * @memberof Popper
     * @access private
     */
    Popper.prototype._setupEventListeners = function() {
        // 1 DOM access here
        // 注：這里會訪問 DOM柬讨，原作者回復(fù)我說，這是他用來記錄哪里訪問到了 DOM
        this.state.updateBound = this.update.bind(this);
        // 瀏覽器窗口改變的時(shí)候更新邊界
        root.addEventListener('resize', this.state.updateBound);
        // 如果邊界元素是窗口袍啡，就不需要監(jiān)聽滾動事件
        if (this._options.boundariesElement !== 'window') {
            var target = getScrollParent(this._reference);  // 獲取相關(guān)元素可滾動的父級
            // 這里可能是 `body` 或 `documentElement`（Firefox上）踩官，等價(jià)于要監(jiān)聽根元素
            if (target === root.document.body || target === root.document.documentElement) {
                target = root;
            }
            // 監(jiān)聽滾動事件
            target.addEventListener('scroll', this.state.updateBound);
        }
    };

    /**
     * 移除更新 popper 位置時(shí)用到的事件監(jiān)聽器
     * @method
     * @memberof Popper
     * @access private
     */
    Popper.prototype._removeEventListeners = function() {
        // 注：這里會訪問 DOM
        // 移除 resize 事件監(jiān)聽
        root.removeEventListener('resize', this.state.updateBound);
        if (this._options.boundariesElement !== 'window') {  // 如果邊界元素不是窗口，說明還監(jiān)聽了滾動事件
            var target = getScrollParent(this._reference);
            if (target === root.document.body || target === root.document.documentElement) {
                target = root;
            }
            // 移除滾動事件監(jiān)聽
            target.removeEventListener('scroll', this.state.updateBound);
        }
        // 更新回調(diào)攝者為空
        this.state.updateBound = null;
    };

    /**
     * 計(jì)算邊界限制并返回它們的值
     * @method
     * @memberof Popper
     * @access private
     * @param {Object} data - 通過 `_getOffsets` 生成的包含 offsets 屬性信息的對象
     * @param {Number} padding - 邊界內(nèi)邊距
     * @param {Element} boundariesElement - 用于定義邊界的元素
     * @returns {Object} 邊界的坐標(biāo)
     */
    Popper.prototype._getBoundaries = function(data, padding, boundariesElement) {
        // 注：這里會訪問 DOM
        var boundaries = {};
        var width, height;
        if (boundariesElement === 'window') {  // 如果邊界元素是窗口
            var body = root.document.body,
                html = root.document.documentElement;

            // 取最大值
            height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
            width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );

            boundaries = {
                top: 0,
                right: width,
                bottom: height,
                left: 0
            };
        } else if (boundariesElement === 'viewport') {  // 如果邊界元素時(shí)視窗
            var offsetParent = getOffsetParent(this._popper);  // 尋找 popper 定位的父元素
            var scrollParent = getScrollParent(this._popper);  // 尋找 popper 可滾動的父元素
            var offsetParentRect = getOffsetRect(offsetParent);  // 尋找 offsetParent 定位的父元素

            // 如果 popper 是固定定位境输，就不需要減去邊界的滾動值
            var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : scrollParent.scrollTop;
            var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : scrollParent.scrollLeft;

            boundaries = {
                top: 0 - (offsetParentRect.top - scrollTop),
                right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
                bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
                left: 0 - (offsetParentRect.left - scrollLeft)
            };
        } else {
            if (getOffsetParent(this._popper) === boundariesElement) {
                boundaries = {
                    top: 0,
                    left: 0,
                    right: boundariesElement.clientWidth,
                    bottom: boundariesElement.clientHeight
                };
            } else {
                boundaries = getOffsetRect(boundariesElement);
            }
        }
        boundaries.left += padding;
        boundaries.right -= padding;
        boundaries.top = boundaries.top + padding;
        boundaries.bottom = boundaries.bottom - padding;
        return boundaries;
    };


    /**
     * 循環(huán)遍歷修飾符列表并且按順序執(zhí)行它們蔗牡，它們都會修改數(shù)據(jù)對象
     * @method
     * @memberof Popper
     * @access public
     * @param {Object} data 數(shù)據(jù)
     * @param {Array} modifiers 修飾符列表
     * @param {Function} ends 要截止的修飾符名
     */
    Popper.prototype.runModifiers = function(data, modifiers, ends) {
        var modifiersToRun = modifiers.slice();  // 創(chuàng)建一個(gè)新的修飾符數(shù)組
        if (ends !== undefined) {  // 如果制定了 ends颖系，就截?cái)嘣摂?shù)組
            modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends));
        }

        modifiersToRun.forEach(function(modifier) {
            if (isFunction(modifier)) {  // 依次調(diào)用
                data = modifier.call(this, data);
            }
        }.bind(this));

        return data;
    };

    /**
     * 用來得知給定的修飾符是否依賴另外一個(gè)
     * @method
     * @memberof Popper
     * @param {String} requesting - 要判斷的修飾符
     * @param {String} requested - 被依賴的修飾符
     * @returns {Boolean}
     */
    Popper.prototype.isModifierRequired = function(requesting, requested) {
        var index = getArrayKeyIndex(this._options.modifiers, requesting);  // 獲取要判斷的修飾符的索引
        return !!this._options.modifiers.slice(0, index).filter(function(modifier) {  // 判斷這之前有沒有被依賴的修飾符
            return modifier === requested;
        }).length;
    };

    //
    // 修飾符
    //

    /**
     * 修飾符列表
     * @namespace Popper.modifiers
     * @memberof Popper
     * @type {Object}
     */
    Popper.prototype.modifiers = {};

    /**
     * 為 popper 元素應(yīng)用計(jì)算后的樣式
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 方法生成的數(shù)據(jù)對象
     * @returns {Object} 同一個(gè)數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.applyStyle = function(data) {
        // 給 popper 應(yīng)用最終的偏移
        // 注：這里會訪問 DOM
        var styles = {
            position: data.offsets.popper.position
        };

        // 舍入 top 和 left 來放置文字模糊
        var left = Math.round(data.offsets.popper.left);
        var top = Math.round(data.offsets.popper.top);

        // 如果將 gpuAcceleration 設(shè)置為 true，并且瀏覽器支持 transform辩越，將使用 translate3d 來應(yīng)用位置
        // 如果需要我們會自動加上支持的瀏覽器前綴
        var prefixedProperty;
        if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName('transform'))) {
            styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
            styles.top = 0;
            styles.left = 0;
        }
        else {  // 否則嘁扼，使用標(biāo)準(zhǔn)的 left 和 top 屬性
            styles.left =left;
            styles.top = top;
        }

        // `data.styles` 里面的每一個(gè)出現(xiàn)的屬性都會被應(yīng)用到 popper 上
        // 通過這種方式我們可以制作第三方的修飾符并且對其自定義樣式
        // 需要注意的是，修飾符可能會覆蓋掉之前修飾符中定義的屬性
        Object.assign(styles, data.styles);

        setStyle(this._popper, styles);

        // 賦值用來為 tooltip 設(shè)置樣式的屬性（用來正確定位箭頭）
        // 注：這里會訪問 DOM
        this._popper.setAttribute('x-placement', data.placement);

        // 如果用到了箭頭修飾符并且箭頭樣式已經(jīng)計(jì)算過就應(yīng)用樣式
        if (this.isModifierRequired(this.modifiers.applyStyle, this.modifiers.arrow) && data.offsets.arrow) {
            setStyle(data.arrowElement, data.offsets.arrow);
        }

        return data;
    };

    /**
     * 用來將將 popper 移動到它相關(guān)聯(lián)的元素的頭或尾
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 通過 `update` 生成的數(shù)據(jù)對象
     * @returns {Object} 正確修改后的數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.shift = function(data) {
        var placement = data.placement;
        var basePlacement = placement.split('-')[0];  // 基本位置
        var shiftVariation = placement.split('-')[1];  // 偏移位置

        // if shift shiftVariation is specified, run the modifier
        // 如果制定了 shift shiftVariation 就執(zhí)行該修飾符
        if (shiftVariation) {
            var reference = data.offsets.reference;
            var popper = getPopperClientRect(data.offsets.popper);

            var shiftOffsets = {
                y: {
                    start:  { top: reference.top },
                    end:    { top: reference.top + reference.height - popper.height }
                },
                x: {
                    start:  { left: reference.left },
                    end:    { left: reference.left + reference.width - popper.width }
                }
            };

            // 判斷坐標(biāo)軸
            var axis = ['bottom', 'top'].indexOf(basePlacement) !== -1 ? 'x' : 'y';

            // 調(diào)整 popper
            data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftVariation]);
        }

        return data;
    };


    /**
     * 用來保證 popper 不會覆蓋邊界的修飾符
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 通過 `update` 生成的數(shù)據(jù)對象
     * @returns {Object} 正確修改后的數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.preventOverflow = function(data) {
        var order = this._options.preventOverflowOrder;  // 檢測順序
        var popper = getPopperClientRect(data.offsets.popper);

        var check = {
            left: function() {  // 檢測左邊
                var left = popper.left;
                if (popper.left < data.boundaries.left) {  // 如果 popper 更靠左
                    left = Math.max(popper.left, data.boundaries.left);  // left 取較大的
                }
                return { left: left };
            },
            right: function() {
                var left = popper.left;
                if (popper.right > data.boundaries.right) {
                    left = Math.min(popper.left, data.boundaries.right - popper.width);
                }
                return { left: left };
            },
            top: function() {
                var top = popper.top;
                if (popper.top < data.boundaries.top) {
                    top = Math.max(popper.top, data.boundaries.top);
                }
                return { top: top };
            },
            bottom: function() {
                var top = popper.top;
                if (popper.bottom > data.boundaries.bottom) {
                    top = Math.min(popper.top, data.boundaries.bottom - popper.height);
                }
                return { top: top };
            }
        };

        order.forEach(function(direction) {
            // 修正位置
            data.offsets.popper = Object.assign(popper, check[direction]());
        });

        return data;
    };

    /**
     * 確保 popper 總是靠近它的相關(guān)元素
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 通過 `_update` 生成的數(shù)據(jù)對象
     * @returns {Object} 正確修改后的數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.keepTogether = function(data) {
        var popper  = getPopperClientRect(data.offsets.popper);
        var reference = data.offsets.reference;
        var f = Math.floor;  // 向下取整

        if (popper.right < f(reference.left)) {  // 修正在左邊的 popper
            data.offsets.popper.left = f(reference.left) - popper.width;
        }
        if (popper.left > f(reference.right)) {  // 修正在右邊的 popper
            data.offsets.popper.left = f(reference.right);
        }
        if (popper.bottom < f(reference.top)) {  // 修正在上邊的 popper
            data.offsets.popper.top = f(reference.top) - popper.height;
        }
        if (popper.top > f(reference.bottom)) {  // 修正在下邊的 popper
            data.offsets.popper.top = f(reference.bottom);
        }

        return data;
    };

    /**
     * 如果 popper 覆蓋了它的相關(guān)元素黔攒，就通過這個(gè)修飾符來讓它翻轉(zhuǎn)
     * 需要在 `preventOverflow` 修飾符后運(yùn)行
     * **注：** 每當(dāng)這個(gè)修飾符要翻轉(zhuǎn) popper 的時(shí)候趁啸，都會將它之前的修飾符執(zhí)行一遍
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 通過 `_update` 生成的數(shù)據(jù)對象
     * @returns {Object} 正確修改后的數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.flip = function(data) {
        // 檢測 preventOverflow 在 flip 修飾符之前被應(yīng)用
        // 否則 flip 并不會正確執(zhí)行
        if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.preventOverflow)) {
            console.warn('WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!');
            return data;
        }

        if (data.flipped && data.placement === data._originalPlacement) {
            // 如果四周都沒有足夠的空間，flip 會一直循環(huán)
            return data;
        }

        var placement = data.placement.split('-')[0];
        var placementOpposite = getOppositePlacement(placement);
        var variation = data.placement.split('-')[1] || '';

        var flipOrder = [];
        if(this._options.flipBehavior === 'flip') {
            flipOrder = [
                placement,
                placementOpposite
            ];
        } else {
            flipOrder = this._options.flipBehavior;
        }

        flipOrder.forEach(function(step, index) {
            if (placement !== step || flipOrder.length === index + 1) {
                return;
            }

            placement = data.placement.split('-')[0];
            placementOpposite = getOppositePlacement(placement);

            var popperOffsets = getPopperClientRect(data.offsets.popper);

            // 用來區(qū)分左上和右下督惰，用來區(qū)分翻轉(zhuǎn)時(shí)不同的計(jì)算方式
            var a = ['right', 'bottom'].indexOf(placement) !== -1;

            // 使用 Math.floor 來消除我們不想考慮的偏移的小數(shù)部分
            if (
                a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite]) ||
                !a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite])
            ) {
                // 使用這個(gè)布爾值來檢測循環(huán)
                data.flipped = true;
                data.placement = flipOrder[index + 1];
                if (variation) {
                    data.placement += '-' + variation;
                }
                data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper;

                data = this.runModifiers(data, this._options.modifiers, this._flip);
            }
        }.bind(this));
        return data;
    };

    /**
     * 用來給 popper 增加偏移的修飾符莲绰。可以用來更加精確的控制 popper 的位置姑丑。
     * 偏移將為改變 popper 距離它相關(guān)元素的位置蛤签。
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 通過 `_update` 生成的數(shù)據(jù)對象
     * @returns {Object} 正確修改后的數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.offset = function(data) {
        var offset = this._options.offset;
        var popper  = data.offsets.popper;

        // 根據(jù)不同方向就行修改
        if (data.placement.indexOf('left') !== -1) {
            popper.top -= offset;
        }
        else if (data.placement.indexOf('right') !== -1) {
            popper.top += offset;
        }
        else if (data.placement.indexOf('top') !== -1) {
            popper.left -= offset;
        }
        else if (data.placement.indexOf('bottom') !== -1) {
            popper.left += offset;
        }
        return data;
    };

    /**
     * Modifier used to move the arrows on the edge of the popper to make sure them are always between the popper and the reference element
     * It will use the CSS outer size of the arrow element to know how many pixels of conjuction are needed
     * 用來移動箭頭來使其保持在相關(guān)元素和 popper 中間的修飾符。
     * 它會使用箭頭元素 CSS 的外圍尺寸來計(jì)算連接需要多少像素
     * @method
     * @memberof Popper.modifiers
     * @argument {Object} data - 通過 `_update` 生成的數(shù)據(jù)對象
     * @returns {Object} 正確修改后的數(shù)據(jù)對象
     */
    Popper.prototype.modifiers.arrow = function(data) {
        var arrow  = this._options.arrowElement;

        // 如果 arrowElement 是字符串栅哀，就假定它是 CSS 選擇器震肮，并尋找它
        if (typeof arrow === 'string') {
            arrow = this._popper.querySelector(arrow);
        }

        // 如果沒有找到箭頭元素就不要運(yùn)行這一個(gè)修飾符
        if (!arrow) {
            return data;
        }

        // 箭頭元素必須是 popper 的子元素
        if (!this._popper.contains(arrow)) {
            console.warn('WARNING: `arrowElement` must be child of its popper element!');
            return data;
        }

        // 箭頭依賴于 keepTogether
        if (!this.isModifierRequired(this.modifiers.arrow, this.modifiers.keepTogether)) {
            console.warn('WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!');
            return data;
        }

        var arrowStyle  = {};
        var placement   = data.placement.split('-')[0];
        var popper      = getPopperClientRect(data.offsets.popper);
        var reference   = data.offsets.reference;
        var isVertical  = ['left', 'right'].indexOf(placement) !== -1;  // 是否垂直

        var len         = isVertical ? 'height' : 'width';
        var side        = isVertical ? 'top' : 'left';
        var altSide     = isVertical ? 'left' : 'top';
        var opSide      = isVertical ? 'bottom' : 'right';
        var arrowSize   = getOuterSizes(arrow)[len];

        //
        // 擴(kuò)展 keepTogether 來保證 popper 和它的相關(guān)元素有足夠的空間來連接
        //

        // 上/左邊
        if (reference[opSide] - arrowSize < popper[side]) {
            data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);
        }
        // 下/右邊
        if (reference[side] + arrowSize > popper[opSide]) {
            data.offsets.popper[side] += (reference[side] + arrowSize) - popper[opSide];
        }

        // 計(jì)算 popper 的中心
        var center = reference[side] + (reference[len] / 2) - (arrowSize / 2);

        var sideValue = center - popper[side];

        // 防止箭頭處于無法連接 popper 的位置
        sideValue = Math.max(Math.min(popper[len] - arrowSize, sideValue), 0);
        arrowStyle[side] = sideValue;
        arrowStyle[altSide] = ''; // 確保移除肩頭上的舊元素

        data.offsets.arrow = arrowStyle;
        data.arrowElement = arrow;

        return data;
    };


    //
    // 工具函數(shù)
    //

    /**
     * 獲得給定元素的外圍尺寸（offset大小 + 外邊距）
     * @function
     * @ignore
     * @argument {Element} element 要檢測的元素
     * @returns {Object} 包含寬高信息的對象
     */
    function getOuterSizes(element) {
        // 注：這里會訪問 DOM
        var _display = element.style.display,
            _visibility = element.style.visibility;
        element.style.display = 'block'; element.style.visibility = 'hidden';
        var calcWidthToForceRepaint = element.offsetWidth;

        // original method
        // 原始方法
        var styles = root.getComputedStyle(element);  // 獲取計(jì)算后的樣式
        var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);  // 上下邊距
        var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);  // 左右邊距
        var result = { width: element.offsetWidth + y, height: element.offsetHeight + x };

        // 重置元素樣式
        element.style.display = _display; element.style.visibility = _visibility;
        return result;
    }

    /**
     * 獲取給定放置位置的相反位置
     * @function
     * @ignore
     * @argument {String} placement 給定位置
     * @returns {String} 給定位置的相反位置
     */
    function getOppositePlacement(placement) {
        var hash = {left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
        return placement.replace(/left|right|bottom|top/g, function(matched){
            return hash[matched];
        });
    }

    /**
     * 對于給定的 popper 的偏移大小等屬性，生成一個(gè)類似于 getBoundingClientRect 的輸出
     * @function
     * @ignore
     * @argument {Object} popperOffsets 相關(guān)屬性
     * @returns {Object}
     */
    function getPopperClientRect(popperOffsets) {
        var offsets = Object.assign({}, popperOffsets);
        offsets.right = offsets.left + offsets.width;
        offsets.bottom = offsets.top + offsets.height;
        return offsets;
    }

    /**
     * 尋找數(shù)組中某個(gè)值的索引
     * @function
     * @ignore
     * @argument {Array} arr 要查詢的數(shù)組
     * @argument keyToFind 要查詢的值
     * @returns index or null
     */
    function getArrayKeyIndex(arr, keyToFind) {
        var i = 0, key;
        for (key in arr) {  // 遍歷
            if (arr[key] === keyToFind) {
                return i;  // 尋找到了就返回索引
            }
            i++;
        }
        return null;
    }

    /**
     * 獲取給定元素的 CSS 計(jì)算屬性
     * @function
     * @ignore
     * @argument {Eement} element 給定的元素
     * @argument {String} property 屬性
     */
    function getStyleComputedProperty(element, property) {
        // 注：這里會訪問 DOM
        var css = root.getComputedStyle(element, null);
        return css[property];
    }

    /**
     * 返回給定元素用來計(jì)算偏移的父元素
     * @function
     * @ignore
     * @argument {Element} element
     * @returns {Element} offset parent
     */
    function getOffsetParent(element) {
        // 注：這里會訪問 DOM
        var offsetParent = element.offsetParent;
        return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent;
    }

    /**
     * 返回給定元素用來計(jì)算滾動的父元素
     * @function
     * @ignore
     * @argument {Element} element
     * @returns {Element} scroll parent
     */
    function getScrollParent(element) {
        var parent = element.parentNode;

        if (!parent) {  // 沒有父級
            return element;
        }

        if (parent === root.document) {
            // Firefox 會將 scrollTop的判斷放置的 `documentElement` 而非 `body` 上
            // 我們將判斷二者誰大于0來返回正確的元素
            if (root.document.body.scrollTop) {
                return root.document.body;
            } else {
                return root.document.documentElement;
            }
        }

        // Firefox 要求我們也要檢查 `-x` 以及 `-y`
        if (
            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 ||
            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 ||
            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1
        ) {
            // 如果檢測到的 scrollParent 是 body留拾，我們將對其父元素做一次額外的檢測
            // 這樣在 Chrome 系的瀏覽器中會得到 body戳晌，其他情況下會得到 documentElement
            // 修復(fù) issue #65
            return parent;
        }
        return getScrollParent(element.parentNode);
    }

    /**
     * 判斷給定元素是否固定或者在一個(gè)固定元素中
     * @function
     * @ignore
     * @argument {Element} element 給定的元素
     * @argument {Element} customContainer 自定義的容器
     * @returns {Boolean}
     */
    function isFixed(element) {
        if (element === root.document.body) {  // body 返回 false
            return false;
        }
        if (getStyleComputedProperty(element, 'position') === 'fixed') {  // position 為 fixed
            return true;
        }
        // 判斷父元素是否固定
        return element.parentNode ? isFixed(element.parentNode) : element;
    }

    /**
     * 為給定的 popper 設(shè)定樣式
     * @function
     * @ignore
     * @argument {Element} element - 要設(shè)定樣式的元素
     * @argument {Object} styles - 包含樣式信息的對象
     */
    function setStyle(element, styles) {
        function is_numeric(n) {  // 是否是數(shù)字
            return (n !== '' && !isNaN(parseFloat(n)) && isFinite(n));
        }
        Object.keys(styles).forEach(function(prop) {
            var unit = '';
            // 為如下的屬性增加單位
            if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && is_numeric(styles[prop])) {
                unit = 'px';
            }
            element.style[prop] = styles[prop] + unit;
        });
    }

    /**
     * 判斷給定的變量是否是函數(shù)
     * @function
     * @ignore
     * @argument {*} functionToCheck - 要檢測的變量
     * @returns {Boolean}
     */
    function isFunction(functionToCheck) {
        var getType = {};
        return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
    }

    /**
     * 獲取給定元素相對于其 offset 父元素的位置
     * @function
     * @ignore
     * @param {Element} element
     * @return {Object} position - 元素的坐標(biāo)和 `scrollTop`
     */
    function getOffsetRect(element) {
        var elementRect = {
            width: element.offsetWidth,
            height: element.offsetHeight,
            left: element.offsetLeft,
            top: element.offsetTop
        };

        elementRect.right = elementRect.left + elementRect.width;
        elementRect.bottom = elementRect.top + elementRect.height;

        // 位置
        return elementRect;
    }

    /**
     * Get bounding client rect of given element
     * 獲取給定元素的邊界
     * @function
     * @ignore
     * @param {HTMLElement} element
     * @return {Object} client rect
     */
    function getBoundingClientRect(element) {
        var rect = element.getBoundingClientRect();

        // IE11以下
        var isIE = navigator.userAgent.indexOf("MSIE") != -1;

        // 修復(fù) IE 的文檔的邊界 top 值總是 0 的bug
        var rectTop = isIE && element.tagName === 'HTML'
            ? -element.scrollTop
            : rect.top;

        return {
            left: rect.left,
            top: rectTop,
            right: rect.right,
            bottom: rect.bottom,
            width: rect.right - rect.left,
            height: rect.bottom - rectTop
        };
    }

    /**
     * 給定元素和它的一個(gè)父元素，返回 offset
     * @function
     * @ignore
     * @param {HTMLElement} element
     * @param {HTMLElement} parent
     * @return {Object} rect
     */
    function getOffsetRectRelativeToCustomParent(element, parent, fixed) {
        var elementRect = getBoundingClientRect(element);
        var parentRect = getBoundingClientRect(parent);

        if (fixed) {  // 固定定位
            var scrollParent = getScrollParent(parent);
            parentRect.top += scrollParent.scrollTop;
            parentRect.bottom += scrollParent.scrollTop;
            parentRect.left += scrollParent.scrollLeft;
            parentRect.right += scrollParent.scrollLeft;
        }

        var rect = {
            top: elementRect.top - parentRect.top ,
            left: elementRect.left - parentRect.left ,
            bottom: (elementRect.top - parentRect.top) + elementRect.height,
            right: (elementRect.left - parentRect.left) + elementRect.width,
            width: elementRect.width,
            height: elementRect.height
        };
        return rect;
    }

    /**
     * 獲取帶有瀏覽器支持的前綴的屬性名
     * @function
     * @ignore
     * @argument {String} property 駝峰式寫法
     * @returns {String} 駝峰式的帶有前綴的屬性名
     */
    function getSupportedPropertyName(property) {
        var prefixes = ['', 'ms', 'webkit', 'moz', 'o'];

        for (var i = 0; i < prefixes.length; i++) {
            var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;
            if (typeof root.document.body.style[toCheck] !== 'undefined') {
                return toCheck;
            }
        }
        return null;
    }

    /**
     * 用來合并對象的可枚舉屬性
     * 這個(gè) polyfill 并不支持 symbol 屬性痴柔，因?yàn)?ES5 根本沒有 symbol
     * 源代碼: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
     * @function
     * @ignore
     */
    if (!Object.assign) {
        Object.defineProperty(Object, 'assign', {
            enumerable: false,  // 不可枚舉
            configurable: true,  // 可配置
            writable: true,  // 可寫
            value: function(target) {
                if (target === undefined || target === null) {  // 目標(biāo)對象不合法
                    throw new TypeError('Cannot convert first argument to object');
                }

                var to = Object(target);
                // 依次賦值
                for (var i = 1; i < arguments.length; i++) {
                    var nextSource = arguments[i];
                    if (nextSource === undefined || nextSource === null) {
                        continue;
                    }
                    nextSource = Object(nextSource);

                    var keysArray = Object.keys(nextSource);
                    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
                        var nextKey = keysArray[nextIndex];
                        var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
                        if (desc !== undefined && desc.enumerable) {
                            to[nextKey] = nextSource[nextKey];
                        }
                    }
                }
                return to;
            }
        });
    }

    return Popper;
}));