bootstrap源码阅读（一）——modal原理

模态框

关于如何读源码。
其实发现bootstrap的源码真的很好读，可能真的是这样，越是成熟的东西，它的源码也就越好读。

这是它的js目录文件，可以看到bootstrap其实就是这么一点儿js文件，我对于bootstrap的dropdown、tab、modal、transition比较感兴趣，所以我会从这几个js文件看起。
之所以先看modal.js，是因为是前人的铺垫，网上有很多前辈写过相关的博文，
比如说：http://www.cnblogs.com/aaronjs/p/3160863.html
所以先从这里读起。

modal API以及使用

先说一下模态框的用法(阅读API)

通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 body 元素添加
.modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop
元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。

这里很惊奇，因为自己以前写过这类的模态框，
一般来说是单独写一个遮罩层，没想到bootstrap居然是用的为body添加类的方法，顿时觉得确实是妙，因为单独写遮罩层的话，还需要查询文档高度。

使用方法一——通过 data 属性
不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle=”modal” 属性，或者 data-target=”#foo” 属性，再或者 href=”#foo” 属性，用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

指定data-toggle=”modal” 以及data-target=”#[id]”。
这里说一点的是，bootstrap的精妙之处就在于它定义了data-属性，以使得很多标签有了灵活性：
比如下拉框的实现也是绑定data-toggle=”dropdown”；
标签页 data-toggle=”tab”

使用方法二——通过 JavaScript 调用

$('#myModal').modal(options)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

modal部分源码

从源码开始阅读：
test.html

$('#myModal').modal('show');

只在这里写了一句，并且打了断点。首先看代码
1、这是全局的boostrap方法，初始化jQuery

2、模态框开始
首先调用Plugin方法：
这里我们调的modal(‘show’)，参数就是show， _relatedTarget没有定义

之所以会调这个方法，是因为bootstrap在对全局进行初始化：
具体源码在modal.js 261-279

  // MODAL DATA-API
  // ==============

  $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this   = $(this)
    var href    = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
    var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

    if ($this.is('a')) e.preventDefault()

    $target.one('show.bs.modal', function (showEvent) {
      if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
      $target.one('hidden.bs.modal', function () {
        $this.is(':visible') && $this.trigger('focus')
      })
    })
    Plugin.call($target, option, this)
  })

说明：页面监听到on事件 $(document).on(‘click.bs.modal.data-api’, ‘[data-toggle=”modal”]’, function (e){}
虽然这个click.bs.modal.data-api我不懂什么意思，但是写一个demo就知道jquery.on的强大。

  <button type="button" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

$(document).on('click', '[data-toggle="modal"]', function(e) {
    alert('我被唤醒了!')
})

会弹出“我被唤醒了，将click事件绑定在body对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理,发现捕获到p元素就执行了代码了
这个是jquery利用了事件的冒泡机制，[data-toggle=”modal”]事件点击被冒泡到document上，因此就执行了。

 var $this = $(this)
 var href = $this.attr('href')
 var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7

接着初始化target和this以及href

当然，如果是通过js调用的就没有上面的click事件处理了；就是直接调用Plugin了。
其实写到这里，modal的精髓就出来了。