为什么Bootstrap4在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)
    }
  })
}

如果我们仔细观察，您会看到 class 模态框的实例被保存为 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 的结果。

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

Why does Bootstrap 4 use private methods in es6 classes?

javascript

twitter-bootstrap

class

ecmascript-6

private