为什么Bootstrap 4在es6类中使用私有方法？

Question

我正在查看Bootstrap 4的源代码，并且发现他们使用了es6类以及某种显示模块模式。

这是一个取自here的代码的简单示例。

const Modal = (($) => { 


    const NAME       = 'modal' 
    const VERSION      = '4.0.0-alpha.3' 
    ... 

    const Default = { 
    ... 
    } 


    class Modal { 

    constructor(element, config) { 
     this._config    = this._getConfig(config) 
     this._element    = element 
     ... 
    } 


    // public 

    toggle(relatedTarget) { 
     ... 
    } 

    show(relatedTarget) { 
     ... 
    } 

    hide(event) { 
     ... 
    } 

    dispose() { 
     ... 
    } 


    // private 

    _getConfig(config) { 
     ... 
    } 

    _showElement(relatedTarget) { 
     ... 
    } 

    _enforceFocus() { 
     ... 
    } 

    _setEscapeEvent() { 
     ... 
    } 

    _setResizeEvent() { 
     ... 
    } 

    } 

    return Modal 

})(jQuery) 

export default Modal 

这会导致每个方法或属性被暴露，包括私人的。但是，这在最终产品中不会发生。例如，像$('#myModal').modal('_getConfig')这样的东西不起作用。发生什么事？

Answer 1

这只是增加一个功能，jQuery的原型_jQueryInterface：

$.fn[NAME]    = Modal._jQueryInterface 
    $.fn[NAME].Constructor = Modal 
    $.fn[NAME].noConflict = function() { 
    $.fn[NAME] = JQUERY_NO_CONFLICT 
    return Modal._jQueryInterface 
    } 

    return Modal 

})(jQuery) 

如果你看看_jQueryInterface的代码，你会看到：

static _jQueryInterface(config, relatedTarget) { 
    return this.each(function() { 
    let data = $(this).data(DATA_KEY) 
    let _config = $.extend(
     {}, 
     Modal.Default, 
     $(this).data(), 
     typeof config === 'object' && config 
    ) 

    if (!data) { 
     data = new Modal(this, _config) 
     $(this).data(DATA_KEY, data) 
    } 

    if (typeof config === 'string') { 
     if (data[config] === undefined) { 
     throw new Error(`No method named "${config}"`) 
     } 
     data[config](relatedTarget) 
    } else if (_config.show) { 
     data.show(relatedTarget) 
    } 
    }) 
} 

如果我们仔细观察，你会请参阅Modal类的实例正在保存为data：

if (!data) { 
     data = new Modal(this, _config) 
     $(this).data(DATA_KEY, data) 
    } 

你可以以同样的方式对脚本做它访问它（但只在第一次创建后）：

let data = $(this).data(DATA_KEY) 

DATA_KEY是bs.modal

编辑：

$('#myModal').modal('_getConfig'); 

函数_getConfig实际上被调用，它只是该函数返回的jQuery对象不是任何结果_getConfig是。