bootstrap 原码transition解释

Question

初学完javascript，jquery，知道自己学的很不扎实，所以就找了bootstrap的源代码，想看看别人的代码，来提升提升自己写代码的水平

于是找到了transition的原码，并进行了注释。仅供和我一样的初学者参考，写的不对的请多多指正

Code

/* ========================================================================
 * Bootstrap: transition.js v3.3.5
 * http://getbootstrap.com/javascript/#transitions
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */
​
//  Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的，而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡。
//+号是函数立即执行的意思。
+function ($) {
   //使用严格模式的好处
  //1.警告对象中重复的键
  // 2.不允许未声明的变量
  // 3.函数中不允许出现重复的参数
  // 4.限制arguments
  // 5.以后发现在更新
  'use strict';
​
  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================
  //判断浏览是否支持transition转换的插件，若支持则在动画结束时执行一些代码。否则使用另外一个事件。
  function transitionEnd() {
    //创建一个元素用于测试
    var el = document.createElement('bootstrap')
​
    // 创建一个对象，是为了后期区分是那种浏览器，因为不同的浏览器有不同的前缀。 
    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      // 低版本的 Chrome 和 Safari 
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }
    // 遍历这个对象的每一个键值对，然后与当前dom文档的属性进行比较，比较的方式在于，如果el。style[]属性存在，那么当前浏览器就是有这个属性的，否则就没有。如果在这个对象当中，那么就使用这个属性作为动画结束的函数，如果都没有，那么久返回一个false。过度结束事件是有兼容性的，所以专门创建一个方法，来获取每个浏览器兼容的TransitionEnd（用的应当是状态模式）
    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }
    //  IE8 不支持过度，(  ._.) 
    return false // explicit for ie8 (  ._.)
  }
​
  // http://blog.alexmaccaw.com/css-transitions
  //  jQuery.fn =jQuery.prototype.
  // $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。这个函数的作用是
   /*事件名称的问题基本上解决了，但是这个事件有个问题就是有时根本不会触发，这是因为属性值没有发生变化或没有绘制行为发生。要确保每次回调都会被调用，我们增加一个定时器即可：
   所以我们要模拟事件结束*/
  $.fn.emulateTransitionEnd = function (duration) {
    // duration 参数是动画持续的时长
    // 事件是否已经触发过
    var called = false
    // $el指向this，我感觉这边就是为了防止后期函数作用域的问题，所以把this的值赋给了el
    var $el = this
​
    $(this).one('bsTransitionEnd', function () { called = true })
    // 表示我这个函数已经触发过，所以将called修改为true
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    // 上面的callback的意思是，如果我没有触发，我就强制性的触发，我在网上看，感觉他们说的好像都是这里就已经触发一样，实际好像不是的，实在下面的setTimeout函数里才真正使用。
    setTimeout(callback, duration)
    // 一段时间后检测是否触发，如果没有，那就强制触发。
    return this
  }
​
  $(function () {
    // 挂载到$.support下面，然后调用transitionEnd函数，取得当前浏览器的动画结束事件的名称
    $.support.transition = transitionEnd()
    // 如果当前浏览器不存在动画这个功能，直接就返回
    if (!$.support.transition) return
    // 否则 就调用这个函数
    // $.event 通过 jQuery.Event 构造，然后通过 jQuery.trigger 触发
    // 例如//创建一个新的jQuery事件对象 
    // var e = jQuery.Event( "click" );
    // trigger 触发事件
    // jQuery( "body" ).trigger( e );
    $.event.special.bsTransitionEnd = {
      // 首先这是个回调函数，我在网上查了很久，没有详细解释。然后我没看懂。。可能以后能接着更新，把这里的注释再次修改吧
      bindType: $.support.transition.end,
      // 绑定类型
      delegateType: $.support.transition.end,
      // 代表类型
      // 权柄事件
      handle: function (e) {
        // 取到e。target这个元素集合，判断如果有this这个元素，就执行下面的函数
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })
​
}(jQuery);
​
​
// 想要知道过渡什么时候结束，就要监听 transitionend 事件(事件名称全是小写字母)。
// $('.circle').one('transitionend', function() {
//   alert('过渡结束啦!');
// });
// 这里使用 one 方法而不是 on 方法是为了避免 transitionend 事件多次执行。one 方法添加的事件回调只会执行一次，更多信息参考官方 API。
​
// 不过这只是标准的事件名称写法，在标准之前浏览器有各自的实现方式以及不同的事件名称(比如低版本的 Chrome 和 Safari 的该事件名称就叫 webkitTransitionEnd)