bootstrap插件学习-bootstrap.scrollspy.js

先看bootstrap.dropdown.js的结构

function ScrollSpy(){} //构造函数
ScrollSpy.prototype = {} //构造器的原型
$.fn.scrollspy = function ( option ){} //jQuery原型上的自定义方法
$.fn.scrollspy.Constructor = ScrollSpy // jQuery原型上的自定义方法
$.fn.scrollspy.defaults = {} //默认参数
$(function(){}) //初始化执行

HTML结构

<style type="text/css">
        .scrollspy-example { height: 200px; overflow: auto; position: relative;}
    </style>

<div id="navbarExample" class="navbar navbar-static">
    <div class="navbar-inner">
        <div class="container" style="width: auto;">
            <a class="brand" href="#">项目名称</a>
            <ul class="nav">
                <li class="active">
                    <a href="#fat">红利</a>
                </li>
                <li>
                    <a href="#mdo">哈芬</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="scrollspy-example" data-offset="0" data-target="#navbarExample" data-spy="scroll">
    <h4 id="fat">红利</h4>
    <p>
        中方向美方承诺提高国有企业红利上缴比例，增加上缴利润的中央国企和省级国企的数量，将国有资本经营预算纳入国家预算体系。还承诺，鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。
        <br>
        <br>
        美方认为，提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支，从而有可能降低中国人大量储蓄的必要性，让他们提高消费支出，从而达到刺激中国内需的目的。
    </p>
    <h4 id="mdo">哈芬</h4>
    <p>
        据估，中国高铁槽道市场约十几亿元，德国哈芬占70%。业内人士称，中铁设计院的铁道图纸，直接指定使用哈芬，而非技术标准。哈芬在德国使用成本高昂的不锈钢，在中国则是碳钢。更有业内人士证实，目前中国高铁用的实为国内生产，原产几乎不足四分之一。（财新）
    </p>
    <h4 id="one">遛狗</h4>
    <p> 近日，拍摄于四川绵阳街头的一张照片引起热议，一辆在路上行驶的法院警车，车窗里伸出一个宠物狗的脑袋，四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知，这是我国新近引进的一批特殊品种警犬，为麻痹犯罪分子，故意化妆成宠物狗的样子。 </p>
    <h4 id="two">失踪</h4>
    <p> 4月25日，19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时，竟然发现这一区域已先后有8名青少年失踪，其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车，被扔进黑砖窑强迫劳动，后逃离黑砖窑重获自由。 </p>
    <h4 id="three">耳光</h4>
    <p> 30多岁女人直接吐东西在刚扫过的地上，环卫大姐上去说了两句，结果挨了三巴掌三脚。见到被打的环卫大姐时，她精神不好，坐在凳子上不说话，左脸的伤痕还很显眼，工友在一旁照料她。2012年5月4日，浙江省，杭州市。 </p>
    <p> 尹大姐说：“小孩子都知道不能在街上乱吐。”那女人说：那不就是你们环卫应该做的事情吗？尹大姐说：难道我们环卫工人就低人一等吗？”话音刚落，“啪”“啪”“啪”三个巴掌落在尹大姐脸上。 </p>
</div>

我们从初始化开始

/*
  * 初始化执行
  * */
  $(function () {
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this)
      $spy.scrollspy($spy.data())
    })
  })

根据HTML结构，这个很简单，获取body对象，并执行jQuery原型上的方法scrollspy，其中$spy.data()中的值，前几次的源码分析，这个值已经很清楚了，它拥有{spy:'scroll',target:'#navbarExample',offset :0 }，进入jQuery的原型方法

 /*
  * jQuery原型上的自定义方法
  * */
  $.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)))//实例化ScrollSpy
      if (typeof option == 'string') data[option]()//传入方法名，执行该方法
    })
  }

跟modal的原型源码差不多，如果$this.data()中没有scrollspy属性则实例化构造器，另外该方法支持传入方法名，执行拥有方法名的方法。下面是构造器

/*
  * 构造器
  * */
  function ScrollSpy( element, options) {
    var process = $.proxy(this.process, this)//给原型上的process方法在该作用域下取了个别称
      , $element = $(element).is('body') ? $(window) : $(element)
      , href
    //console.log($element);//window对象
    this.options = $.extend({}, $.fn.scrollspy.defaults, options)

    //console.log(this.options);
    this.$scrollElement = $element.on('scroll.scroll.data-api', process)//绑定scorll事件，执行process方法,返回window的jQuery对象

    this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a' //获取头标题的各个a标签

    this.$body = $('body').on('click.scroll.data-api', this.selector, process)//给头标题的各个a标签绑定事件，以便点击后可以跳到指定的内容，返回body的jQuery对象
    this.refresh()
    this.process()//调用原型上的process方法
  }

构造器完成的事情主要有3件：1.给window对象绑定scroll事件，2.给body对象中的头标题中的a标签绑定click事件，3.初始化执行refresh()和process()方法。我执行初始化的步骤

进入refresh()方法。

/*
      * position() 方法返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。
      * 获取各个标签对应内容的高度
       * */
    , refresh: function () {
        this.targets = this.$body
          .find(this.selector)//查找头标题的各个a标签
          .map(function () {
            var href = $(this).attr('href')
            return /^#\w/.test(href) && $(href).length ? href : null
          })//得到一个object对象，根据index去获取其中类容，有点类数组
        this.offsets = $.map(this.targets, function (id) {
          return $(id).position().top//获取各个标签对应内容的高度
        })
      }

看基于jQuery编写的插件源码的时候，很多时候就是帮助自己提高对jQuery方法的认知。这个refresh方法将各个a标签的top值返回给对象的offsets属性。其中不乏用到map方法去执行遍历操作。进入process方法

/*
      * 逻辑控制
      * 初始化时，activeTarget为空，scrollTop为0，for循环的第二个判断条件scrollTop >= offsets[i]中将判断false，当i为0时
      * ，targets[0]为#fat时，满足for循环的前三个条件，进入activate方法，
      *
      * */
    , process: function () {
        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
          , offsets = this.offsets //div内容的高度集合
          , targets = this.targets //div内容的id集合对象
          , activeTarget = this.activeTarget
          , i
for (i = offsets.length; i--;) {
          activeTarget != targets[i]
            && scrollTop >= offsets[i]
            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
            && this.activate( targets[i] )
        }
      }

javascript在书写判断时，有很多比较简洁的写法，我讲有写的好的，那就是写的骚，对于这个方法里的for循环中的3个&&，如果前3个判断有一个是false的话，都无法进入activate这个方法。注释中，我已经讲了初始化的过程，下面我描述下点击事件中，它是如何工作的。以HTML结构为例。

初始化时，'红利'按钮变色，当点击'哈芬'按钮时，会触发之前绑定的click事件，根据通过命名锚直接跳到命名锚的链接，下面的想对应的信息发生改变，以'哈芬'为标题的信息引入眼帘，但是这里需要注意是，之前我们在window上绑定了scroll事件，下面信息内容的改变，导致了滚动条的移动，触发了window上的scroll事件，所以我们的一次点击，实际上触发了两次事件。

先从点击事件开始，进过初始化之后，activeTarget的值已经被改成#fat，因此点击事件在经过for循环时，是到不了activate这个方法的。大家可以断点调试，或者将源码中的this.$scrollElement = $element.on('scroll.scroll.data-api', process)改成this.$scrollElement = $element之后调试。scroll事件依旧执行process事件。看起来情况跟上次一样，但需要注意此时的scrollTop已经发生改变，满足条件之后，进入activate方法。

/*
      * 逻辑控制后续执行
      * 初始化时将activeTarget设成#fat,所以默认刷新时'红利'这块显示被点击。当我们点击'哈芬'时，通过命名锚直接跳到命名锚的链接
      * 注意其他有两个过程：1.点击'哈芬'按钮，2.滚动条运动，两者都触发了事件。最后都进入了process方法。
      *
      * */
    , activate: function (target) {
        var active
this.activeTarget = target//设置activeTarget属性

        this.$body
          .find(this.selector).parent('.active')
          .removeClass('active')//找到头标题中父节点拥有active类的a标签，并删除a标签的父节点上的active

        active = this.$body
          .find(this.selector + '[href="' + target + '"]')
          .parent('li')
          .addClass('active')//在头标题中，给拥有href='xx'属性的a标签的父节点加上active属性,返回li标签

        if ( active.parent('.dropdown-menu') )  {
          active.closest('li.dropdown').addClass('active')
        }
      }

这个方法主要是收尾工作。让被点击按钮变色，同时也能达到滑倒到响应内容时，对应的按钮变色。这里主要的比较方式是通过内容的top高度跟window的scrollTop想比较，达到某个内容的高度，则获得了该内容对应的a标签。

这里我们在谈一个问题，即为什么我第一次点击'哈芬'时，是先执行的锚跳转还是先执行绑定方法？其实这个问题在之前的测试中，已经得到证明先绑定方法，再执行锚跳转，大家可以在绑定事件中加入alert去调试。答案如我们所预料。

内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。