Bootstrapbutton.js代码理解

Question

正在挖掘 bootstrap 3.3.1 button.js 源代码，因为我想构建一个类似的插件。

您可以在此处查看源代码：[源代码][1]

我的问题： 现在 button.js 源代码中的以下行在做什么：

 $(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault()
  })

我仔细阅读了 jQuery 关于功能的文档，甚至为自己做了几个例子，以便我更好地理解它，但不知何故，上面的代码行有点太复杂了，我无法理解。

现在我使用 button.js 插件运行了一些测试：我写了以下内容 HTML :

<button id="myButton">Click me</button>

和以下 jQuery：

$(document).ready(function(){
        $("#myButton").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
                $(this).button('complete');
                $(this).dequeue();
            });        
        });
    });

现在当然以上所有内容都在 index.html 文件中，我在脚本标记中导入 button.js 文件。

现在当我点击"click me"按钮时，按钮显示'loading...'1秒（按钮处于禁用状态），之后按钮仍然显示'loading...'但再次启用。

现在是测试的重要部分，我转到 button.js 文件的源代码并摘下以下代码（是的，我难以理解的同一段代码）：

$(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault()
  })

现在我再次按下按钮'click me'，插件仍然可以正常工作。

现在我有一种感觉 bootstrap 插件的构建方式可以让你使用 jQuery 甚至数据属性来初始化它们，不知何故我也有这种感觉代码（抱歉再次重复同一段代码！！:D）：

 $(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
        var $btn = $(e.target)
        if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
        Plugin.call($btn, 'toggle')
        e.preventDefault()
      })

与"initializing the button.js plugin using data-attributes"有更多关系。但这只是一个猜测。

谢谢。

亚历山大

[1]: https://github.com/twbs/bootstrap/blob/master/js/button.js#L16

Answer 1

下面代码的逐行解释：

$(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {

创建一个 委托事件处理程序 来侦听自定义 click.bs.button.data-api 事件以冒泡到 document 元素。
过滤气泡链中的元素（从单击的项目到文档）以查看是否有任何元素具有以字符串 [=] 开头的 data-toggle= 属性14=]
调用提供的函数 this 等于其上具有 data-toggle= 的元素。注意：this在函数中被忽略。

var $btn = $(e.target)

e.target是被点击的原始对象。 $(this) 会做同样的工作（除非按钮被包裹）。该代码似乎允许任意数量的 DOM 更改 inside/outside 实际按钮。

if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')

如果单击的元素在元素上没有 class btn，则在祖先中搜索最近的具有此 class 的元素（这允许按钮换行其他元素）。

Plugin.call($btn, 'toggle')

在 Plugin 命名空间中调用静态 call 方法。在这种情况下调用按钮的 toggle 方法。

e.preventDefault()

阻止点击执行其正常操作（可能是 link 或以其他方式提交）。

注意：如果您还有问题，请具体说明

Bootstrapbutton.js代码理解

Bootstrap button.js code understanding

jquery

jquery-plugins

twitter-bootstrap-3