Bootstrap button.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文件.

现在,当我点击"单击我"按钮时,按钮显示"正在加载..."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"按钮,插件仍能正常运行.

现在我有一种感觉,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()
      }) 

更多与"使用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) {

1. 创建一个委托事件处理程序,该事件处理程序侦听自定义click.bs.button.data-api事件以冒泡到document元素.
2. 过滤bubble-chain中的元素(从单击的项目到文档),以查看是否有任何元素具有以字符串开头的data-toggle=属性"button"
3. 调用提供的函数,使其this等于上面的元素data-toggle=.注意:this在函数中被忽略.

var $btn = $(e.target)

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

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

5. 如果单击的元素在元素上没有类btn,则在祖先中搜索具有此类的最近元素(这允许按钮包装其他元素).

Plugin.call($btn, 'toggle')

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

e.preventDefault()

7. 停止点击执行其正常操作(可能是链接或以其他方式提交).

注意:如果您仍有疑问,请具体说明