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文件。

现在，当我点击“点击我”按钮时，按钮显示“正在加载...”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()
  })

现在我再次按下“click me”按钮，插件仍能正常运行。

现在我有一种感觉，引导插件的构建方式可以让你使用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()
      })

更多与“使用data-attributes初始化button.js插件”有关。但这只是猜测。

谢谢。

亚历山大

[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元素。
过滤bubble-chain中的元素（从点击的项目到文档），看看是否有任何元素具有以字符串data-toggle=开头的"button"属性
调用提供的函数，this等于其上data-toggle=的元素。注意：函数中忽略this。

var $btn = $(e.target)

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

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

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

Plugin.call($btn, 'toggle')

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

e.preventDefault()

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

注意：如果您仍有疑问，请将其设为具体

Bootstrap button.js代码理解

1 个答案: