Bootstrap插件modal源码的学习

使用说明

两部分需要定义：

模态框的触发元素，需要data-toggle="modal"，以便被初始化；需要data-target="#example"或href指定模态框
模态框，模态框容器需要与data-target对应的类或id，其内容部分可以用"modal-content"的类来美化样式

 <button type="button" class="btn" data-toggle="modal" data-target="#myModal"> 触发按钮 </button> 
  <div class="modal" id="myModal"> 
   <div class="modal-content"> 
    <div class="modal-header">
      title 
    </div> 
    <div class="modal-body">
      body 
    </div> 
   </div> 
  </div>

核心思想

页面完成加载后，为所有含有data-toggle="modal"的元素绑定点击事件
模态框出现的逻辑：先出现遮罩层，再出现模态框
1. 为body增加"modal-open"类，作用是给body增加overflow：hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式
2. 调用dropback函数，变量shown为true，所以插入出现遮罩层（若遮罩层需要过渡，过渡的逻辑也在这里）
3. 在传给dropback的回调里（即完成遮罩层出现后），调用$el.show()方法使模态框出现（display:block），再增加"in"类使他过渡的出现
模态框的隐藏逻辑：先隐藏模态框，再隐藏遮罩层
1. 先去除"in“类，使模态框opacity变为0先去除”in"类，使模态框opacity变为0
2. 在过渡效果的完成后用$el.hide()隐藏模态框调用dropback函数，变量shown为false，所以移除遮罩层
3. 在出给dropback的回调里（即完成遮罩层的隐藏后），清除"modal-open"类

初始化

为触发元素绑定点击事件

// 在初始化时为含data-toggle属性的元素绑定点击事件
$(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')
            })
        })
        // 把对应的模态框的juqery对象作为this，传入Plugin中
        // 把参数和触发元素作为参数参数Plugin中
    Plugin.call($target, option, this)
})

结构分析

模态框的核心是

show()检查并绑定键盘、调整大小的事件，然后调用backdrop()使遮罩层和模态框顺序出现
hide()接触事件绑定，然后调用hideModal()隐藏模态框，移除遮罩层

但是为了考虑全面。Bootstrap做了太多情况的考虑，导致代码变得很复杂。。。

Plugin入口分析

默认在这里调用了show方法

/**
 * 取触发元素上的data()，获得对应参数并实例化Modal
 * @param {object} option         触发元素的缓存数据对象，或字符串直接调用方法
 * @param {object} _relatedTarget 触发元素的dom对象
 */
function Plugin(option, _relatedTarget) {
  return this.each(function () {
    var $this   = $(this)
    var data    = $this.data('bs.modal')
    var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
 
    if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
    if (typeof option == 'string') data[option](_relatedTarget)
    else if (options.show) data.show(_relatedTarget)
  })
}

具体分析

构造函数

/**
 * 初始化实例属性，如有有remote则从远端加载内容
 * @param {object} element 模态框的dom对象
 * @param {object} options 参数
 */
var Modal = function (element, options) {
  this.options             = options
  this.$body               = $(document.body)
  this.$element            = $(element) // 模态框的jquery对象
  this.$dialog             = this.$element.find('.modal-dialog')
  this.$backdrop           = null
  this.isShown             = null
  this.originalBodyPad     = null
  this.scrollbarWidth      = 0
  this.ignoreBackdropClick = false
  // 从指定url中load内容
  if (this.options.remote) {
    this.$element
      .find('.modal-content')
      .load(this.options.remote, $.proxy(function () {
        this.$element.trigger('loaded.bs.modal')
      }, this))
  }
}

show方法

/**
 * 完成滚动条的检查，键盘事件，窗口大小事件的绑定。在backdrop遮罩层出现后，才在回调里显示模态框
 * 顺序是checkScrollbar->setScrollbar->escape->resize->backdrop->模态框显示
 * @param  {object} _relatedTarget 触发元素的dom对象
 * @return {undefined}                无返回值
 */
Modal.prototype.show = function (_relatedTarget) {
  var that = this
  var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
 
  this.$element.trigger(e)
 
  if (this.isShown || e.isDefaultPrevented()) return
 
  this.isShown = true
 
  this.checkScrollbar()
  this.setScrollbar()
  this.$body.addClass('modal-open')
 
  this.escape()
  this.resize()
 
  this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
  // 这里不知道干嘛
  this.$dialog.on('mousedown.dismiss.bs.modal', function () {
    that.$element.one('mouseup.dismiss.bs.modal', function (e) {
      if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
    })
  })
  // 调用遮罩层出现和消失的逻辑，并传入回调
  // 在回调里模态框出现，所以是先出现遮罩层再出现模态框。
  this.backdrop(function () {
    var transition = $.support.transition && that.$element.hasClass('fade')
 
    if (!that.$element.parent().length) {
      that.$element.appendTo(that.$body) // don't move modals dom position
    }
    // 这里scrollTop(0)干嘛？
    that.$element
      .show()
      .scrollTop(0)
 
    that.adjustDialog()
 
    if (transition) {
      that.$element[0].offsetWidth // force reflow
    }
 
    that.$element.addClass('in')
 
    that.enforceFocus()
 
    var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
 
    transition ?
      that.$dialog // wait for modal to slide in
        .one('bsTransitionEnd', function () {
          that.$element.trigger('focus').trigger(e)
        })
        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
      that.$element.trigger('focus').trigger(e)
  })
}

hide方法

/** 与show相反，先取消一系列事件，在调用hideModal隐藏模态框，然后移除遮罩层 */
Modal.prototype.hide = function (e) {
  if (e) e.preventDefault()
 
  e = $.Event('hide.bs.modal')
 
  this.$element.trigger(e)
 
  if (!this.isShown || e.isDefaultPrevented()) return
 
  this.isShown = false
 
  this.escape()
  this.resize()
 
  $(document).off('focusin.bs.modal')
 
  this.$element
    .removeClass('in')
    .off('click.dismiss.bs.modal')
    .off('mouseup.dismiss.bs.modal')
 
  this.$dialog.off('mousedown.dismiss.bs.modal')
 
  $.support.transition && this.$element.hasClass('fade') ?
    this.$element
      .one('bsTransitionEnd', $.proxy(this.hideModal, this))
      .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    this.hideModal()
}

backdrop方法：负责遮罩层的出现与消失逻辑

/**
 * 负责模态框出现后，增加遮罩层，及模态框消失时取出遮罩层的逻辑
 * @param  {Function} callback 遮罩层出现后，及消失后的回调
 * @return {undefined}            无
 */
Modal.prototype.backdrop = function (callback) {
  var that = this
  var animate = this.$element.hasClass('fade') ? 'fade' : ''
  // backdrop默认为true
  // 如果已经show了
  if (this.isShown && this.options.backdrop) {
    var doAnimate = $.support.transition && animate
    // 插入遮罩层
    this.$backdrop = $(document.createElement('div'))
      .addClass('modal-backdrop ' + animate)
      .appendTo(this.$body)
 
    this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
      if (this.ignoreBackdropClick) {
        this.ignoreBackdropClick = false
        return
      }
      if (e.target !== e.currentTarget) return
      this.options.backdrop == 'static'
        ? this.$element[0].focus()
        : this.hide()
    }, this))
 
    if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
 
    this.$backdrop.addClass('in')
 
    if (!callback) return
 
    doAnimate ?
      this.$backdrop
        .one('bsTransitionEnd', callback)
        .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
      callback()
 
  } else if (!this.isShown && this.$backdrop) {
    this.$backdrop.removeClass('in')
 
    var callbackRemove = function () {
      that.removeBackdrop()
      callback && callback()
    }
    $.support.transition && this.$element.hasClass('fade') ?
      this.$backdrop
        .one('bsTransitionEnd', callbackRemove)
        .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
      callbackRemove()
 
  } else if (callback) {
    callback()
  }
}

与滚动条相关的checkScrollbar和setScrollbar方法

/**
 1. 检查当前是否overflow，并获取滚动条宽度
 2. @return {[type]} [description]
 */
Modal.prototype.checkScrollbar = function () {
  var fullWindowWidth = window.innerWidth // 窗口大小，包含滚动条的整个窗口
  if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
    var documentElementRect = document.documentElement.getBoundingClientRect()
    // IE8没有window.innerWidth，所以需要用左边减右边来获得窗口大小
    fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
  }
  // 窗口大小是否大于可视窗口大小，来判断body宽度是否overflow。如果大于，则overflow
  // 窗口大小比可视窗口大小大的值，其实就是滚动条的宽度（不用这个方法获取滚动条宽度是，万一页面没有滚动条，那就无法获取滚动条宽度）
  this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
  this.scrollbarWidth = this.measureScrollbar()
}
/**
 3. 如果有滚动条，则body需要padding-right，滚动条宽度的值
 */
Modal.prototype.setScrollbar = function () {
  var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
  this.originalBodyPad = document.body.style.paddingRight || ''
  if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}

总结

window.innerWidth可以获得包含滚动条的整个窗口的大小（但IE8需用document.documentElement.getBoundingClientRect().left减去right）
window.innerWidth > document.body.clientWidth来判断是否有滚动条
也可以利用插入div，然后用el.offsetWidth - el.clientWidth来获得当前浏览器中滚动条的宽度
"fade“类定义了opacity: 0和transition:opacity .15s linear而”.fade.in"类定义了opacity:1。这样能很好的有解耦动画效果和无效果
在利用addClass('in')做过度效果前，需要强制重排。BS常用el.offsetWidth来做强制重排
1. 获取offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()(currentStyle in IE)这些属性时，都会引起重排

Bootstrap插件modal源码的学习

使用说明

核心思想

初始化

结构分析

Plugin入口分析

具体分析

总结

猜你喜欢