我查看了 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
这将导致每个方法或属性都被暴露,包括私有(private)的。然而,这在最终产品中不会发生。例如,类似 $('#myModal').modal('_getConfig')
的内容将不起作用。发生了什么事?
最佳答案
它只是向 jQuery 原型(prototype)添加一个函数_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
的结果是什么。
关于javascript - 为什么 Bootstrap 4 在 es6 类中使用私有(private)方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38685134/