bootstrap源码学习与示例：bootstrap-scrollspy - 司徒正美
bootstrap源码学习与示例：bootstrap-scrollspy
bootstrap-scrollspy(滚动侦测)是一个很有趣的组件，它会将某一个存在滚动条的区域中一些元素的ID值收集起来，然后在它们靠近滚动区顶部时高亮这些ID值代表的A元素。
它也明显的缺陷，对格式限得太死。它由两部分组成。一部分是滚动区，滚动区有个data-target用于指向包含菜单的某父元素。滚动区有一些元素，我们赖以称之为“锚点”，用于提供ID值。另一部分是菜单区，要求是.nav类型的菜单，它下面有些链接，href="#"+ID。
然后你引入bootstrap-scrollspy.js就行了，如果你的菜单还有二级菜单，还要引入bootstrap-dropdown.js
在这个组件中我们还可以绑定一种叫activate的自定义事件，它绑定菜单区的菜单项中，也是那些链接的父元素上。这些菜单项在高亮时会添加一个叫active的类名。
!function ($) {
"use strict"; // jshint ;_;
/* SCROLLSPY CLASS DEFINITION
* ========================== */
function ScrollSpy(element, options) {
//将实例绑到回调的this中
var process = $.proxy(this.process, this)
//决定绑定滚动事件的元素
, $element = $(element).is(\'body\') ? $(window) : $(element)
, href
this.options = $.extend({}, $.fn.scrollspy.defaults, options)
//绑定事件
this.$scrollElement = $element.on(\'scroll.scroll-spy.data-api\', process)
//取得要监控的元素的CSS表达式：1 通过data-target指定 2 通过href属性得到 （监控元素必须是一个位于LI元素的链接）
this.selector = (this.options.target
|| ((href = $(element).attr(\'href\')) && href.replace(/.*(?=#[^\s]+$)/, \'\')) //strip for ie7
|| \'\') + \' .nav li > a\' //第2种情况作为导航元素的某个菜单的链接存在
this.$body = $(\'body\')
this.refresh()
//先执行一次
this.process()
}
ScrollSpy.prototype = {
constructor: ScrollSpy
,
refresh: function () {
var self = this
this.offsets = $([])
this.targets = $([])
this.$body
.find(this.selector)
.map(function () {
var $el = $(this)
, href = $el.data(\'target\') || $el.attr(\'href\')
, $href = /^#\w/.test(href) && $(href)
return ( $href
&& $href.length //返回一个二维数组，它到页面顶部的距离及href的值
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
})
.sort(function (a, b) {
return a[0] - b[0]
})
.each(function () {
self.offsets.push(this[0])//收集偏离值
self.targets.push(this[1])//收集href值（ID值）
})
//self.targets里都是ID选择器
}
,
process: function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
, scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
//最大可以滚动的高度
, maxScroll = scrollHeight - this.$scrollElement.height()
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i
if (scrollTop >= maxScroll) {
return activeTarget != (i = targets.last()[0])
&& this.activate ( i )
}
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]//遍历offset中，寻找一个最接近顶部的元素
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate( targets[i] )
}
}
,
activate: function (target) {
var active
, selector
this.activeTarget = target//重写activeTarget
$(this.selector)
.parent(\'.active\')
.removeClass(\'active\')
//取得新的要高亮的元素
selector = this.selector
+ \'[data-target="\' + target + \'"],\'
+ this.selector + \'[href="\' + target + \'"]\'
//#navbarExample .nav li > a[data-target="#doomsday"],#navbarExample .nav li > a[href="#doomsday"]
active = $(selector)
.parent(\'li\')
.addClass(\'active\')
if (active.parent(\'.dropdown-menu\').length) {
active = active.closest(\'li.dropdown\').addClass(\'active\')
}
active.trigger(\'activate\')
}
}
/* SCROLLSPY PLUGIN DEFINITION
* =========================== */
var old = $.fn.scrollspy
$.fn.scrollspy = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data(\'scrollspy\')
, options = typeof option == \'object\' && option
if (!data) $this.data(\'scrollspy\', (data = new ScrollSpy(this, options)))
if (typeof option == \'string\') data[option]()
})
}
$.fn.scrollspy.Constructor = ScrollSpy
$.fn.scrollspy.defaults = {
offset: 10
}
/* SCROLLSPY NO CONFLICT
* ===================== */
$.fn.scrollspy.noConflict = function () {
$.fn.scrollspy = old
return this
}
/* SCROLLSPY DATA-API
* ================== */
$(window).on(\'load\', function () {
//取得元素上带data-spy="scroll"的元素（它是一个带滚动条的容器）
$(\'[data-spy="scroll"]\').each(function () {
var $spy = $(this);
$spy.scrollspy($spy.data());//收集其所有data-*属性，组成配置对象与默认配置合并
})
})
}(window.jQuery);
最近读源码发现，bootstrap的JS组件写得很geek。比如大量的短路与短路或代替了if分支，与data API的巧妙利用，现在这个bootstrap-scrollspy，直接把jQuery对象当成一个强化版数组容器来用。大家都是用它放元素节点，bootstrap-scrollspy在refresh方法中搞了两个jQuery对象，一个单纯放数值，一个单纯放ID选择器（字符串）。