为什么Bootstrap4在es6类中使用私有方法?
Why does Bootstrap 4 use private methods in es6 classes?
我正在查看 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')
这样的东西是行不通的。发生了什么事?
它只是向 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
的结果。
我正在查看 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')
这样的东西是行不通的。发生了什么事?
它只是向 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
的结果。