5.3.3　源码分析

5.3.3　源码分析

分析源码之前，我们先来回顾一下下拉菜单的HTML布局规则的定义。示例如下：

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        ...
    </ul>
</div>

上述示例可以看出下拉菜单的几个重要属性：触发属性（data-toggle="dropdown"）、目标父容器属性（href="#"）、按钮元素容器（带dropdown-menu样式的<ul>）。

步骤1　立即调用的函数。此步骤与Modal插件的步骤1一样，此处不赘述。

步骤2　插件核心代码。Dropdown插件的核心源码如下：

var backdrop = '.dropdown-backdrop'        // 弹出下拉菜单时的背景样式
var toggle = '[data-toggle=dropdown]'   // dropdown触发元素的自定义属性
var Dropdown = function (element) {
    var $el = $(element).on('click.bs.dropdown', this.toggle)
    // 插件类函数定义，一旦触发，就在click事件上绑定toggle，所以不能再用自定义代码进行toggle了
}
// 控制下拉菜单的打开、关闭操作
Dropdown.prototype.toggle = function (e){};
// 利用箭头控制下拉菜单（例如，按向下箭头的时候，打开下拉菜单）
Dropdown.prototype.keydown = function (e){};
// 关闭所有的下拉菜单
function clearMenus(){};
// 获取下拉菜单的父元素容器
function getParent($this) {};

上述源码，除了定义Dropdown插件类函数外，还定义了两个原型方法和两个内部函数。原型方法toggle和keydown分别是处理下拉菜单的展开、关闭操作，以及支持按键对下拉菜单的选择操作的功能。clearMenus函数用于在打开特定的下拉菜单之前，关闭所有其他的下拉菜单；getParent函数则用于查找目标元素（即下拉菜单的父元素用于在上面判断是否有open样式，不过通常触发元素和菜单项都同属于一个父元素容器，就像示例中的代码一样）。代码如下：

// 控制下拉菜单的打开、关闭操作
Dropdown.prototype.toggle = function (e) {
    var $this = $(this)
 
    if ($this.is('.disabled, :disabled')) return         // 如果有禁用标记，则不处理
 
    var $parent = getParent($this)               // 获取触发元素的父元素
    var isActive = $parent.hasClass('open')      // 判断父元素是否有open样式，有，
                                                         // 则代表当前下拉菜单正在打开状态
 
    clearMenus()  // 关闭所有其他的下拉菜单，即同一个页面，只允许同时出现一个下拉菜单
 
    // 判断：单击时当前下拉菜单是否是打开状态
    // 如果是，在clearMenus阶段就已经关闭了，所以就不需要再次关闭了
    // 如果不是，说明默认是关闭状态，则需要展开下拉菜单
    if (!isActive) {
        // 如果是移动设备，则使用dropdown-backdrop样式，因为移动设备不支持click单击委托
        if ('ontouchstart' in document.documentElement && !$parent.closest
            ('.navbar-nav').length) {
            $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on
                ('click', clearMenus)
        }
 
        var relatedTarget = { relatedTarget: this }
        $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
                                                         // 展开下拉菜单前，触发show事件
 
        if (e.isDefaultPrevented()) return       // 如果已经阻止了默认行为，就不再处理了
 
        $parent
            .toggleClass('open')                 // 添加open样式，打开下拉菜单，因为
                                                         // dropdown-menu在open样式内会自动显示
            .trigger('shown.bs.dropdown', relatedTarget) 
                                                        // 展开下拉菜单后，触发shown事件
 
        $this.focus()           // 给当前触发元素加上焦点
    }
 
    return false                        // 阻止该元素后续的默认行为
}
// 利用箭头控制下拉菜单（例如，按向下箭头的时候，打开下拉菜单）
Dropdown.prototype.keydown = function (e) {
    // 如果按键不是Esc、或上下方向箭头，则忽略处理
    if (!/(38|40|27)/.test(e.keyCode)) return
 
    var $this = $(this)
    e.preventDefault()          // 阻止默认行为
    e.stopPropagation()         // 阻止冒泡
 
    if ($this.is('.disabled, :disabled')) return // 如果有禁用标记，则不做处理
 
    var $parent = getParent($this)      // 获取触发元素的父元素
    var isActive = $parent.hasClass('open')   
                                // 判断父元素是否有open样式，有，则代表当前下拉菜单正在打开状态
 
    // 如果有open样式，或者没有open样式（但按键是向下箭头的话），也打开下拉菜单
    if (!isActive || (isActive && e.keyCode == 27)) {
        if (e.which == 27) $parent.find(toggle).focus()
                                        // 如果按了向下箭头，则给触发元素加上焦点
        return $this.click()            // 默认单击事件，打开下拉菜单
    }
    // 返回可以利用箭头选择的下拉菜单项
    // 打开下拉菜单时，上下箭头只操作（选中）设置了role = menu（或role=listbox）的链接项
    // 必须是可见的a链接，并且不包括分隔符
    var desc = ' li:not(.divider):visible a'
    var $items = $parent.find('[role=menu]' + desc + ', [role=listbox]' + desc)
 
    if (!$items.length) return  // 如果没有，则不做处理
    var index = $items.index($items.filter(':focus')) 
                                        // 找出当前处于焦点状态的第一个下拉菜单项的索引
 
    if (e.keyCode == 38 && index > 0) index--   // 按向上箭头的话，index减1
    if (e.keyCode == 40 && index < $items.length - 1) index++        
                                        // 按向下箭头的话，index加1
    if (!~index) index = 0              // 特殊意外情况，设置为第一个菜单项
 
    $items.eq(index).focus()    // 给所选择的菜单项设置焦点
}
// 关闭所有的下拉菜单
function clearMenus(e) {
    $(backdrop).remove()                // 删除用于移动设备的背景
    $(toggle).each(function () {        // 根据选择器，遍历所有的dropdown标记，然后全部关闭
        var $parent = getParent($(this))
        var relatedTarget = { relatedTarget: this }
        if (!$parent.hasClass('open')) return
        $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
                                                        // 关闭前，触发hide事件
        if (e.isDefaultPrevented()) return
        $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
                                                        // 关闭后，触发hidden事件
    })
}
// 获取下拉菜单的父元素容器
function getParent($this) {
    var selector = $this.attr('data-target')
                                // 如果设置了target，就针对该traget元素进行处理
    if (!selector) {
        selector = $this.attr('href')           // 如果没有target，则查找href里设置的值
        selector = selector && /#[A-Za-z]/.test(selector) && selector.replace
            (/.*(?=#[^\s]*$)/, '') 
    }
    var $parent = selector && $(selector)       // 如果上述两个步骤满足其一，设置其为
                                                          parent元素（下拉菜单的容器元素）
    // 如果都不满足，就使用当前触发元素（$this）的父元素
    return $parent && $parent.length ? $parent : $this.parent()
}

步骤3　jQuery插件定义。在jQuery上定义$.fn.dropdown插件的代码和Modal插件类似，也是遍历元素、实例化或触发动作。源码如下：

var old = $.fn.dropdown
// 保留其他库的$.fn.dropdown代码（如果定义的话），以便在noConflict之后，可以继续使用该老代码
$.fn.dropdown = function (option) {
    return this.each(function () {              // 根据选择器，遍历所有符合规则的元素
        var $this = $(this)
        var data = $this.data('bs.dropdown')    // 获取自定义属性dropdown的值
 
        // 如果值不存在，则将Dropdown实例设置为data-dropdown的值
        if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
        // 如果option传递了string，则表示要执行某个方法
        // 比如传入了toggle，则要执行Dropdown实例的toggle方法，data["toggle"]相当于
         data.toggle();
        if (typeof option == 'string') data[option].call($this)
    })
}
$.fn.dropdown.Constructor = Dropdown // 重设插件构造器,可以通过该属性获取插件的真实类函数

步骤4　防冲突处理。源码如下：

// 防冲突处理
$.fn.dropdown.noConflict = function () {
    $.fn.dropdown = old                         // 恢复以前的旧代码
    return this  // 将$.fn.dropdown.noConflict()设置为Bootstrap的dropdown插件
}

步骤5　绑定触发事件。源码如下：

// 绑定触发事件
$(document)
    // 为声明式的HTML绑定单击事件，在单击以后先关闭左右的下拉菜单
    .on('click.bs.dropdown.data-api', clearMenus)
    // 如果内部有form元素，则阻止冒泡，不做处理
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    // 默认行为，一般都要进行toggle操作（打开或关闭）
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    // 为触发元素和下拉菜单项绑定keydown按钮事件，以便可以进行打开或选择操作
    // toggle = [data-toggle=dropdown]表示所有带有自定义属性data-toggle="dropdown"的元素
    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]',
         Dropdown.prototype.keydown)

在绑定触发事件上，dropdown插件做了很多操作，首先是确保关闭所有的下拉菜单，如果有form元素，则进行特殊忽略处理，接着才绑定真正的单击事件所要触发的内容（Dropdown.prototype.toggle），最后也提供了keydown事件的绑定，用于让键盘方向键也可以选择下拉菜单项。

5.3.3 源码分析