zepto源码注释

一时失言乱红尘 2022-08-11 17:00 194阅读 0赞

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。这段时间公司的事情比较少，所以就把它的源码看了下，觉得写的挺好的，所以就有了给它写注释的想法。当然，这里面的注释只是我读代码时对它的理解，并不一定正确，如果有错误还请指正，先谢谢了。另外，敬请期待另一个JS大牛（果果）的JS库(then.js)的源码注释。

/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */

2 ;(function(undefined) {
       3   if (String.prototype.trim === undefined) // fix for iOS 3.2
       4   String.prototype.trim = function() {
       5     return this.replace(/^\s+|\s+$/g, '')
       6   }
       7 
       8   // For iOS 3.x
       9   // from https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduce
      10   //这个方法的作用就是累似一个累计处理的作用，将前一条数据的处理结果用作下一次的处理
      11   //比如[1,2,3,4,].reduce(function(x,y){ return x+y}); ==> ((1+2)+3)+4,
      12 
      13   if (Array.prototype.reduce === undefined) Array.prototype.reduce = function(fun) {
      14     if (this === void 0 || this === null) throw new TypeError()
      15     var t = Object(this),
      16       len = t.length >>> 0,
      17       k = 0,
      18       accumulator
      19     if (typeof fun != 'function') throw new TypeError()
      20     if (len == 0 && arguments.length == 1) throw new TypeError()
      21     //取初始值  
      22     if (arguments.length >= 2) accumulator = arguments[1] //如果参数长度大于2个，则将第二个参数作为初始值
      23     else do {
      24       if (k in t) {
      25         accumulator = t[k++] //否则将数组的第一条数据作为初绍值
      26         break
      27       }
      28       if (++k >= len) throw new TypeError() //什么情况下会执行到这里来？？？
      29     } while (true)
      30     //遍历数组，将前一次的结果传入处理函数进行累计处理
      31     while (k < len) {
      32       if (k in t) accumulator = fun.call(undefined, accumulator, t[k], k, t)
      33       k++
      34     }
      35     return accumulator
      36   }
      37 
      38 })()
      39 
      40 var Zepto = (function() {
      41   var undefined, key, $, classList, emptyArray = [],
      42     slice = emptyArray.slice,
      43     filter = emptyArray.filter,
      44     document = window.document,
      45     elementDisplay = {}, classCache = {},
      46     getComputedStyle = document.defaultView.getComputedStyle,
      47     //设置CSS时，不用加px单位的属性
      48     cssNumber = {
      49       'column-count': 1,
      50       'columns': 1,
      51       'font-weight': 1,
      52       'line-height': 1,
      53       'opacity': 1,
      54       'z-index': 1,
      55       'zoom': 1
      56     },
      57     //HTML代码片断的正则
      58     fragmentRE = /^\s*<(\w+|!)[^>]*>/,
      59     //匹配非单独一个闭合标签的标签，类似将<div></div>写成了<div/>
      60     tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
      61     //根节点
      62     rootNodeRE = /^(?:body|html)$/i,
      63 
      64     //需要提供get和set的方法名
      65     // special attributes that should be get/set via method calls
      66     methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'],
      67     //相邻节点的一些操作
      68     adjacencyOperators = ['after', 'prepend', 'before', 'append'],
      69     table = document.createElement('table'),
      70     tableRow = document.createElement('tr'),
      71     //这里的用途是当需要给tr,tbody,thead,tfoot,td,th设置innerHTMl的时候，需要用其父元素作为容器来装载HTML字符串
      72     containers = {
      73       'tr': document.createElement('tbody'),
      74       'tbody': table,
      75       'thead': table,
      76       'tfoot': table,
      77       'td': tableRow,
      78       'th': tableRow,
      79       '*': document.createElement('div')
      80     },
      81     //当DOM ready的时候，document会有以下三种状态的一种
      82     readyRE = /complete|loaded|interactive/,
      83     //class选择器的正则
      84     classSelectorRE = /^\.([\w-]+)$/,
      85     //id选择器的正则
      86     idSelectorRE = /^#([\w-]*)$/,
      87     //DOM标签正则
      88     tagSelectorRE = /^[\w-]+$/,
      89     class2type = {},
      90     toString = class2type.toString,
      91     zepto = {},
      92     camelize, uniq,
      93     tempParent = document.createElement('div');
      94 
      95   //判断一个元素是否匹配给定的选择器
      96   zepto.matches = function(element, selector) {
      97     if (!element || element.nodeType !== 1) return false
      98     //引用浏览器提供的MatchesSelector方法
      99     var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector
     100     if (matchesSelector) return matchesSelector.call(element, selector);
     101     //如果浏览器不支持MatchesSelector方法，则将节点放入一个临时div节点，
     102     //再通过selector来查找这个div下的节点集，再判断给定的element是否在节点集中，如果在，则返回一个非零(即非false)的数字
     103     // fall back to performing a selector:
     104     var match, parent = element.parentNode,temp = !parent
     105     //当element没有父节点，那么将其插入到一个临时的div里面
     106     if (temp)(parent = tempParent).appendChild(element)
     107     //将parent作为上下文，来查找selector的匹配结果，并获取element在结果集的索引，不存在时为－1,再通过~-1转成0，存在时返回一个非零的值
     108     match = ~zepto.qsa(parent, selector).indexOf(element)
     109     //将插入的节点删掉
     110     temp && tempParent.removeChild(element)
     111     return match
     112   }
     113 
     114   //获取对象类型 
     115 
     116   function type(obj) {
     117     //obj为null或者undefined时，直接返回'null'或'undefined'
     118     return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"
     119   }
     120 
     121   function isFunction(value) {
     122     return type(value) == "function"
     123   }
     124 
     125   function isWindow(obj) {
     126     return obj != null && obj == obj.window
     127   }
     128 
     129   function isDocument(obj) {
     130     return obj != null && obj.nodeType == obj.DOCUMENT_NODE
     131   }
     132 
     133   function isObject(obj) {
     134     return type(obj) == "object"
     135   }
     136   //对于通过字面量定义的对象和new Object的对象返回true，new Object时传参数的返回false
     137   //可参考http://snandy.iteye.com/blog/663245
     138 
     139   function isPlainObject(obj) {
     140     return isObject(obj) && !isWindow(obj) && obj.__proto__ == Object.prototype
     141   }
     142 
     143   function isArray(value) {
     144     return value instanceof Array
     145   }
     146   //类数组，比如nodeList，这个只是做最简单的判断，如果给一个对象定义一个值为数据的length属性，它同样会返回true
     147 
     148   function likeArray(obj) {
     149     return typeof obj.length == 'number'
     150   }
     151 
     152   //清除给定的参数中的null或undefined，注意0==null,'' == null为false
     153 
     154   function compact(array) {
     155     return filter.call(array, function(item) {
     156       return item != null
     157     })
     158   }
     159   //类似得到一个数组的副本
     160 
     161   function flatten(array) {
     162     return array.length > 0 ? $.fn.concat.apply([], array) : array
     163   }
     164   //将字符串转成驼峰式的格式
     165   camelize = function(str) {
     166     return str.replace(/-+(.)?/g, function(match, chr) {
     167       return chr ? chr.toUpperCase() : ''
     168     })
     169   }
     170   //将字符串格式化成-拼接的形式,一般用在样式属性上，比如border-width
     171 
     172   function dasherize(str) {
     173     return str.replace(/::/g, '/') //将：：替换成/
     174     .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') //在大小写字符之间插入_,大写在前，比如AAAbb,得到AA_Abb
     175     .replace(/([a-z\d])([A-Z])/g, '$1_$2') //在大小写字符之间插入_,小写或数字在前，比如bbbAaa,得到bbb_Aaa
     176     .replace(/_/g, '-') //将_替换成-
     177     .toLowerCase() //转成小写
     178   }
     179   //数组去重，如果该条数据在数组中的位置与循环的索引值不相同，则说明数组中有与其相同的值
     180   uniq = function(array) {
     181     return filter.call(array, function(item, idx) {
     182       return array.indexOf(item) == idx
     183     })
     184   }
     185 
     186   //将给定的参数生成正则
     187 
     188   function classRE(name) {
     189     //classCache,缓存正则
     190     return name in classCache ? classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)'))
     191   }
     192   //给需要的样式值后面加上'px'单位，除了cssNumber里面的指定的那些
     193 
     194   function maybeAddPx(name, value) {
     195     return (typeof value == "number" && !cssNumber[dasherize(name)]) ? value + "px" : value
     196   }
     197   //获取节点的默认display属性
     198 
     199   function defaultDisplay(nodeName) {
     200     var element, display
     201     if (!elementDisplay[nodeName]) { //缓存里不存在
     202       element = document.createElement(nodeName)
     203       document.body.appendChild(element)
     204       display = getComputedStyle(element, '').getPropertyValue("display")
     205       element.parentNode.removeChild(element)
     206       display == "none" && (display = "block") //当display等于none时，设置其值为block,搞不懂为毛要这样
     207       elementDisplay[nodeName] = display //缓存元素的默认display属性
     208     }
     209     return elementDisplay[nodeName]
     210   }
     211   //获取指定元素的子节点(不包含文本节点),Firefox不支持children，所以只能通过筛选childNodes
     212 
     213   function children(element) {
     214     return 'children' in element ? slice.call(element.children) : $.map(element.childNodes, function(node) {
     215       if (node.nodeType == 1) return node
     216     })
     217   }
     218 
     219   // `$.zepto.fragment` takes a html string and an optional tag name
     220   // to generate DOM nodes nodes from the given html string.
     221   // The generated DOM nodes are returned as an array.
     222   // This function can be overriden in plugins for example to make
     223   // it compatible with browsers that don't support the DOM fully.
     224   zepto.fragment = function(html, name, properties) {
     225     //将类似<div class="test"/>替换成<div class="test"></div>,算是一种修复吧
     226     if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")
     227     //给name取标签名
     228     if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
     229     //设置容器标签名，如果不是tr,tbody,thead,tfoot,td,th，则容器标签名为div
     230     if (!(name in containers)) name = '*'
     231 
     232     var nodes, dom, container = containers[name] //创建容器
     233     container.innerHTML = '' + html //将html代码片断放入容器
     234     //取容器的子节点，这样就直接把字符串转成DOM节点了
     235     dom = $.each(slice.call(container.childNodes), function() {
     236       container.removeChild(this) //逐个删除
     237     })
     238     //如果properties是对象, 则将其当作属性来给添加进来的节点进行设置
     239     if (isPlainObject(properties)) {
     240       nodes = $(dom) //将dom转成zepto对象，为了方便下面调用zepto上的方法
     241       //遍历对象，设置属性
     242       $.each(properties, function(key, value) {
     243         //如果设置的是'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'，则调用zepto上相对应的方法
     244         if (methodAttributes.indexOf(key) > -1) nodes[key](value)
     245         else nodes.attr(key, value)
     246       })
     247     }
     248     //返回将字符串转成的DOM节点后的数组，比如'<li></li><li></li><li></li>'转成[li,li,li]
     249     return dom
     250   }
     251 
     252   // `$.zepto.Z` swaps out the prototype of the given `dom` array
     253   // of nodes with `$.fn` and thus supplying all the Zepto functions
     254   // to the array. Note that `__proto__` is not supported on Internet
     255   // Explorer. This method can be overriden in plugins.
     256   zepto.Z = function(dom, selector) {
     257     dom = dom || []
     258     dom.__proto__ = $.fn //通过给dom设置__proto__属性指向$.fn来达到继承$.fn上所有方法的目的
     259     dom.selector = selector || ''
     260     return dom
     261   }
     262 
     263   // `$.zepto.isZ` should return `true` if the given object is a Zepto
     264   // collection. This method can be overriden in plugins.
     265   //判断给定的参数是否是Zepto集
     266   zepto.isZ = function(object) {
     267     return object instanceof zepto.Z
     268   }
     269 
     270   // `$.zepto.init` is Zepto's counterpart to jQuery's `$.fn.init` and
     271   // takes a CSS selector and an optional context (and handles various
     272   // special cases).
     273   // This method can be overriden in plugins.
     274   zepto.init = function(selector, context) {
     275     // If nothing given, return an empty Zepto collection
     276     if (!selector) return zepto.Z() //没有参数，返回空数组
     277     //如果selector是个函数，则在DOM ready的时候执行它
     278     else if (isFunction(selector)) return $(document).ready(selector)
     279     //如果selector是一个zepto.Z实例，则直接返回它自己
     280     else if (zepto.isZ(selector)) return selector
     281     else {
     282       var dom
     283       //如果selector是一个数组，则将其里面的null,undefined去掉
     284       if (isArray(selector)) dom = compact(selector)
     285       //如果selector是个对象，注意DOM节点的typeof值也是object，所以在里面还要再进行一次判断
     286       else if (isObject(selector))
     287       //如果是申明的对象，如{}， 则将selector属性copy到一个新对象，并将结果放入数组
     288       //如果是该对象是DOM，则直接放到数组中
     289       dom = [isPlainObject(selector) ? $.extend({}, selector) : selector], selector = null
     290       //如果selector是一段HTML代码片断，则将其转换成DOM节点
     291       else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
     292       //如果存在上下文context，则在上下文中查找selector，此时的selector为普通的CSS选择器
     293       else if (context !== undefined) return $(context).find(selector)
     294       //如果没有给定上下文，则在document中查找selector，此时的selector为普通的CSS选择器
     295       else dom = zepto.qsa(document, selector)
     296       //最后将查询结果转换成zepto集合
     297       return zepto.Z(dom, selector)
     298     }
     299   }
     300 
     301   // `$` will be the base `Zepto` object. When calling this
     302   // function just call `$.zepto.init, which makes the implementation
     303   // details of selecting nodes and creating Zepto collections
     304   // patchable in plugins.
     305   $ = function(selector, context) {
     306     return zepto.init(selector, context)
     307   }
     308 
     309   //扩展，deep表示是否深度扩展
     310 
     311   function extend(target, source, deep) {
     312     for (key in source)
     313     //如果深度扩展
     314     if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
     315       //如果要扩展的数据是对象且target相对应的key不是对象
     316       if (isPlainObject(source[key]) && !isPlainObject(target[key])) target[key] = {}
     317       //如果要扩展的数据是数组且target相对应的key不是数组
     318       if (isArray(source[key]) && !isArray(target[key])) target[key] = []
     319       extend(target[key], source[key], deep)
     320     } else if (source[key] !== undefined) target[key] = source[key]
     321   }
     322 
     323   // Copy all but undefined properties from one or more
     324   // objects to the `target` object.
     325   $.extend = function(target) {
     326     var deep, args = slice.call(arguments, 1)
     327     if (typeof target == 'boolean') { //当第一个参数为boolean类型的值时，表示是否深度扩展
     328       deep = target
     329       target = args.shift() //target取第二个参数
     330     }
     331     //遍历后面的参数，全部扩展到target上
     332     args.forEach(function(arg) {
     333       extend(target, arg, deep)
     334     })
     335     return target
     336   }
     337 
     338   // `$.zepto.qsa` is Zepto's CSS selector implementation which
     339   // uses `document.querySelectorAll` and optimizes for some special cases, like `#id`.
     340   // This method can be overriden in plugins.
     341   zepto.qsa = function(element, selector) {
     342     var found
     343     //当element为document,且selector为ID选择器时
     344     return (isDocument(element) && idSelectorRE.test(selector)) ?
     345     //直接返回document.getElementById,RegExp.$1为ID的值,当没有找节点时返回[]
     346     ((found = element.getElementById(RegExp.$1)) ? [found] : []) :
     347     //当element不为元素节点或者document时，返回[]
     348     (element.nodeType !== 1 && element.nodeType !== 9) ? [] :
     349     //否则将获取到的结果转成数组并返回
     350     slice.call(
     351     //如果selector是标签名,直接调用getElementsByClassName
     352     classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) :
     353     //如果selector是标签名,直接调用getElementsByTagName
     354     tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) :
     355     //否则调用querySelectorAll
     356     element.querySelectorAll(selector))
     357   }
     358 
     359   //在结果中进行过滤
     360 
     361   function filtered(nodes, selector) {
     362     return selector === undefined ? $(nodes) : $(nodes).filter(selector)
     363   }
     364   //判断parent是否包含node
     365   $.contains = function(parent, node) {
     366     return parent !== node && parent.contains(node)
     367   }
     368 
     369   //这个函数在整个库中取着很得要的作用，处理arg为函数或者值的情况
     370   //下面很多设置元素属性时的函数都有用到
     371 
     372   function funcArg(context, arg, idx, payload) {
     373     return isFunction(arg) ? arg.call(context, idx, payload) : arg
     374   }
     375 
     376   function setAttribute(node, name, value) {
     377     //如果设置的值为null或undefined,则相当于删除该属性，否则设置name属性为value
     378     value == null ? node.removeAttribute(name) : node.setAttribute(name, value)
     379   }
     380 
     381   // access className property while respecting SVGAnimatedString
     382 
     383   function className(node, value) {
     384     var klass = node.className,
     385       svg = klass && klass.baseVal !== undefined
     386 
     387     if (value === undefined) return svg ? klass.baseVal : klass
     388     svg ? (klass.baseVal = value) : (node.className = value)
     389   }
     390 
     391   // "true"  => true
     392   // "false" => false
     393   // "null"  => null
     394   // "42"    => 42
     395   // "42.5"  => 42.5
     396   // JSON    => parse if valid
     397   // String  => self
     398 
     399   function deserializeValue(value) {
     400     var num
     401     try {
     402       return value ? value == "true" || (value == "false" ? false : value == "null" ? null : !isNaN(num = Number(value)) ? num : /^[\[\{]/.test(value) ? $.parseJSON(value) : value) : value
     403     } catch (e) {
     404       return value
     405     }
     406   }
     407 
     408   $.type = type
     409   $.isFunction = isFunction
     410   $.isWindow = isWindow
     411   $.isArray = isArray
     412   $.isPlainObject = isPlainObject
     413 
     414   //空对象
     415   $.isEmptyObject = function(obj) {
     416     var name
     417     for (name in obj) return false
     418     return true
     419   }
     420 
     421   //获取指定的值在数组中的位置
     422   $.inArray = function(elem, array, i) {
     423     return emptyArray.indexOf.call(array, elem, i)
     424   }
     425   //将字符串转成驼峰式的格式
     426   $.camelCase = camelize
     427   //去字符串头尾空格
     428   $.trim = function(str) {
     429     return str.trim()
     430   }
     431 
     432   // plugin compatibility
     433   $.uuid = 0
     434   $.support = {}
     435   $.expr = {}
     436 
     437   //遍历elements，将每条记录放入callback里进宪处理，保存处理函数返回值不为null或undefined的结果
     438   //注意这里没有统一的用for in,是为了避免遍历数据默认属性的情况，如数组的toString,valueOf
     439   $.map = function(elements, callback) {
     440     var value, values = [],
     441       i, key
     442       //如果被遍历的数据是数组或者nodeList
     443     if (likeArray(elements)) for (i = 0; i < elements.length; i++) {
     444       value = callback(elements[i], i)
     445       if (value != null) values.push(value)
     446     } else
     447     //如果是对象
     448     for (key in elements) {
     449       value = callback(elements[key], key)
     450       if (value != null) values.push(value)
     451     }
     452     return flatten(values)
     453   }
     454 
     455   //遍历数组，将每条数据作为callback的上下文，并传入数据以及数据的索引进行处理，如果其中一条数据的处理结果明确返回false，
     456   //则停止遍历，并返回elements
     457   $.each = function(elements, callback) {
     458     var i, key
     459     if (likeArray(elements)) {
     460       for (i = 0; i < elements.length; i++)
     461       if (callback.call(elements[i], i, elements[i]) === false) return elements
     462     } else {
     463       for (key in elements)
     464       if (callback.call(elements[key], key, elements[key]) === false) return elements
     465     }
     466 
     467     return elements
     468   }
     469   //过滤
     470   $.grep = function(elements, callback) {
     471     return filter.call(elements, callback)
     472   }
     473 
     474   if (window.JSON) $.parseJSON = JSON.parse
     475 
     476   // Populate the class2type map
     477   //填充class2type的值
     478   $.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
     479     class2type["[object " + name + "]"] = name.toLowerCase()
     480   })
     481 
     482   //针对DOM的一些操作
     483   // Define methods that will be available on all
     484   // Zepto collections
     485   $.fn = {
     486     // Because a collection acts like an array
     487     // copy over these useful array functions.
     488     forEach: emptyArray.forEach,
     489     reduce: emptyArray.reduce,
     490     push: emptyArray.push,
     491     sort: emptyArray.sort,
     492     indexOf: emptyArray.indexOf,
     493     concat: emptyArray.concat,
     494 
     495     // `map` and `slice` in the jQuery API work differently
     496     // from their array counterparts
     497     map: function(fn) {
     498       return $($.map(this, function(el, i) {
     499         return fn.call(el, i, el)
     500       }))
     501     },
     502     slice: function() {
     503       return $(slice.apply(this, arguments))
     504     },
     505     //DOM Ready
     506     ready: function(callback) {
     507       if (readyRE.test(document.readyState)) callback($)
     508       else document.addEventListener('DOMContentLoaded', function() {
     509         callback($)
     510       }, false)
     511       return this
     512     },
     513     //取集合中对应指定索引的值，如果idx小于0,则idx等于idx+length,length为集合的长度
     514     get: function(idx) {
     515       return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length]
     516     },
     517     //将集合转换为数组
     518     toArray: function() {
     519       return this.get()
     520     },
     521     //获取集合长度
     522     size: function() {
     523       return this.length
     524     },
     525     //将集合从dom中删除
     526     remove: function() {
     527       return this.each(function() {
     528         if (this.parentNode != null) this.parentNode.removeChild(this)
     529       })
     530     },
     531     //遍历集合，将集合中的每一项放入callback中进行处理，去掉结果为false的项，注意这里的callback如果明确返回false
     532     //那么就会停止循环了
     533     each: function(callback) {
     534       emptyArray.every.call(this, function(el, idx) {
     535         return callback.call(el, idx, el) !== false
     536       })
     537       return this
     538     },
     539     //过滤集合，返回处理结果为true的记录
     540     filter: function(selector) {
     541       //this.not(selector)取到需要排除的集合，第二次再取反(这个时候this.not的参数就是一个集合了)，得到想要的集合
     542       if (isFunction(selector)) return this.not(this.not(selector))
     543       //filter收集返回结果为true的记录
     544       return $(filter.call(this, function(element) {
     545         return zepto.matches(element, selector) //当element与selector匹配，则收集
     546       }))
     547     },
     548     //将由selector获取到的结果追加到当前集合中
     549     add: function(selector, context) {
     550       return $(uniq(this.concat($(selector, context)))) //追加并去重
     551     },
     552     //返回集合中的第1条记录是否与selector匹配
     553     is: function(selector) {
     554       return this.length > 0 && zepto.matches(this[0], selector)
     555     },
     556     //排除集合里满足条件的记录，接收参数为：css选择器，function, dom ,nodeList
     557     not: function(selector) {
     558       var nodes = []
     559       //当selector为函数时，safari下的typeof odeList也是function，所以这里需要再加一个判断selector.call !== undefined
     560       if (isFunction(selector) && selector.call !== undefined) {
     561         this.each(function(idx) {
     562           //注意这里收集的是selector.call(this,idx)返回结果为false的时候记录
     563           if (!selector.call(this, idx)) nodes.push(this)
     564         })
     565       } else {
     566         //当selector为字符串的时候，对集合进行筛选，也就是筛选出集合中满足selector的记录
     567         var excludes = typeof selector == 'string' ? this.filter(selector) :
     568         //当selector为nodeList时执行slice.call(selector),注意这里的isFunction(selector.item)是为了排除selector为数组的情况
     569         //当selector为css选择器，执行$(selector)
     570         (likeArray(selector) && isFunction(selector.item)) ? slice.call(selector) : $(selector)
     571         this.forEach(function(el) {
     572           //筛选出不在excludes集合里的记录，达到排除的目的
     573           if (excludes.indexOf(el) < 0) nodes.push(el)
     574         })
     575       }
     576       return $(nodes) //由于上面得到的结果是数组，这里需要转成zepto对象，以便继承其它方法，实现链写
     577     },
     578     /*
     579         接收node和string作为参数，给当前集合筛选出包含selector的集合
     580         isObject(selector)是判断参数是否是node，因为typeof node == 'object'
     581         当参数为node时，只需要判读当前记当里是否包含node节点即可
     582         当参数为string时，则在当前记录里查询selector，如果长度为0，则为false，filter函数就会过滤掉这条记录，否则保存该记录
     583     */
     584     has: function(selector) {
     585       return this.filter(function() {
     586         return isObject(selector) ? $.contains(this, selector) : $(this).find(selector).size()
     587       })
     588     },
     589     /* 
     590         选择集合中指定索引的记录，当idx为-1时，取最后一个记录
     591     */
     592     eq: function(idx) {
     593       return idx === -1 ? this.slice(idx) : this.slice(idx, +idx + 1)
     594     },
     595     /* 
     596         取集合中的第一条记录
     597     */
     598     first: function() {
     599       var el = this[0] //取集合中的第一条记录
     600       //如果集合中的第一条数据本身就已经是zepto对象则直接返回本身，否则转成zepto对象
     601       //el && !isObject(el)在这里取到一个判断el是否为节点的情况，因为如果el是节点，那么isObject(el)的结果就是true
     602       return el && !isObject(el) ? el : $(el)
     603     },
     604     /* 
     605         取集合中的最后一条记录
     606     */
     607     last: function() {
     608       var el = this[this.length - 1] //取集合中的最后一条记录
     609       //如果el为node,则isObject(el)会为true,需要转成zepto对象
     610       return el && !isObject(el) ? el : $(el)
     611     },
     612     /* 
     613         在当前集合中查找selector，selector可以是集合，选择器，以及节点
     614     */
     615     find: function(selector) {
     616       var result, $this = this
     617       //如果selector为node或者zepto集合时
     618       if (typeof selector == 'object')
     619       //遍历selector，筛选出父级为集合中记录的selector
     620       result = $(selector).filter(function() {
     621         var node = this
     622         //如果$.contains(parent, node)返回true，则emptyArray.some也会返回true,外层的filter则会收录该条记录
     623         return emptyArray.some.call($this, function(parent) {
     624           return $.contains(parent, node)
     625         })
     626       })
     627       //如果selector是css选择器
     628       //如果当前集合长度为1时，调用zepto.qsa，将结果转成zepto对象
     629       else if (this.length == 1) result = $(zepto.qsa(this[0], selector))
     630       //如果长度大于1，则调用map遍历
     631       else result = this.map(function() {
     632         return zepto.qsa(this, selector)
     633       })
     634       return result
     635     },
     636     //取集合中第一记录的最近的满足条件的父级元素
     637     closest: function(selector, context) {
     638       var node = this[0],
     639         collection = false
     640       if (typeof selector == 'object') collection = $(selector)
     641       //当selector是node或者zepto集合时，如果node不在collection集合中时需要取node.parentNode进行判断
     642       //当selector是字符串选择器时，如果node与selector不匹配，则需要取node.parentNode进行判断
     643       while (node && !(collection ? collection.indexOf(node) >= 0 : zepto.matches(node, selector)))
     644       //当node 不是context,document的时候，取node.parentNode
     645       node = node !== context && !isDocument(node) && node.parentNode
     646       return $(node)
     647     },
     648     //取集合所有父级元素
     649     parents: function(selector) {
     650       var ancestors = [],
     651         nodes = this
     652         //通过遍历nodes得到所有父级，注意在while里nodes被重新赋值了
     653         //本函数的巧妙之处在于，不停在获取父级，再遍历父级获取父级的父级
     654         //然后再通过去重，得到最终想要的结果，当到达最顶层的父级时，nodes.length就为0了
     655       while (nodes.length > 0)
     656       //nodes被重新赋值为收集到的父级集合
     657       nodes = $.map(nodes, function(node) {
     658         //遍历nodes，收集集合的第一层父级
     659         //ancestors.indexOf(node) < 0用来去重复
     660         if ((node = node.parentNode) && !isDocument(node) && ancestors.indexOf(node) < 0) {
     661           ancestors.push(node) //收集已经获取到的父级元素，用于去重复
     662           return node
     663         }
     664       })
     665       //上面还只是取到了所有的父级元素，这里还需要对其进行筛选从而得到最终想要的结果
     666       return filtered(ancestors, selector)
     667     },
     668     //获取集合的父节点
     669     parent: function(selector) {
     670       return filtered(uniq(this.pluck('parentNode')), selector)
     671     },
     672     children: function(selector) {
     673       return filtered(this.map(function() {
     674         return children(this)
     675       }), selector)
     676     },
     677     contents: function() {
     678       return this.map(function() {
     679         return slice.call(this.childNodes)
     680       })
     681     },
     682     siblings: function(selector) {
     683       return filtered(this.map(function(i, el) {
     684         //先获取该节点的父节点中的所有子节点，再排除本身
     685         return filter.call(children(el.parentNode), function(child) {
     686           return child !== el
     687         })
     688       }), selector)
     689     },
     690     empty: function() {
     691       return this.each(function() {
     692         this.innerHTML = ''
     693       })
     694     },
     695     //根据属性来获取当前集合的相关集合
     696     pluck: function(property) {
     697       return $.map(this, function(el) {
     698         return el[property]
     699       })
     700     },
     701     show: function() {
     702       return this.each(function() {
     703         //清除元素的内联display="none"的样式
     704         this.style.display == "none" && (this.style.display = null)
     705         //当样式表里的该元素的display样式为none时，设置它的display为默认值
     706         if (getComputedStyle(this, '').getPropertyValue("display") == "none") this.style.display = defaultDisplay(this.nodeName) //defaultDisplay是获取元素默认display的方法
     707       })
     708     },
     709     replaceWith: function(newContent) {
     710       //将要替换的内容插入到被替换的内容前面，然后删除被替换的内容
     711       return this.before(newContent).remove()
     712     },
     713     wrap: function(structure) {
     714       var func = isFunction(structure)
     715       if (this[0] && !func)
     716       //如果structure是字符串，则将其转成DOM
     717       var dom = $(structure).get(0),
     718         //如果structure是已经存在于页面上的节点或者被wrap的记录不只一条，则需要clone dom
     719         clone = dom.parentNode || this.length > 1
     720 
     721       return this.each(function(index) {
     722         $(this).wrapAll(
     723         func ? structure.call(this, index) : clone ? dom.cloneNode(true) : dom)
     724       })
     725     },
     726     wrapAll: function(structure) {
     727       if (this[0]) {
     728         //将要包裹的内容插入到第一条记录的前面，算是给structure定位围置
     729         $(this[0]).before(structure = $(structure))
     730         var children
     731         // drill down to the inmost element
     732         //取structure里的第一个子节点的最里层
     733         while ((children = structure.children()).length) structure = children.first()
     734         //将当前集合插入到最里层的节点里，达到wrapAll的目的
     735         $(structure).append(this)
     736       }
     737       return this
     738     },
     739     //在匹配元素里的内容外包一层结构
     740     wrapInner: function(structure) {
     741       var func = isFunction(structure)
     742       return this.each(function(index) {
     743         //原理就是获取节点的内容，然后用structure将内容包起来，如果内容不存在，则直接将structure append到该节点
     744         var self = $(this),
     745           contents = self.contents(),
     746           dom = func ? structure.call(this, index) : structure
     747           contents.length ? contents.wrapAll(dom) : self.append(dom)
     748       })
     749     },
     750     unwrap: function() {
     751       //用子元素替换掉父级
     752       this.parent().each(function() {
     753         $(this).replaceWith($(this).children())
     754       })
     755       return this
     756     },
     757     //clone node
     758     clone: function() {
     759       return this.map(function() {
     760         return this.cloneNode(true)
     761       })
     762     },
     763     //隐藏集合
     764     hide: function() {
     765       return this.css("display", "none")
     766     },
     767     toggle: function(setting) {
     768       return this.each(function() {
     769         var el = $(this);
     770         /* 
     771             这个setting取得作用就是控制显示与隐藏，并不切换，当它的值为true时，一直显示，false时，一直隐藏
     772             这个地方的判断看上去有点绕，其实也简单，意思是说，当不给toogle参数时，根据元素的display是否等于none来决定显示或者隐藏元素
     773             当给toogle参数，就没有切换效果了，只是简单的根据参数值来决定显示或隐藏。如果参数true,相当于show方法，false则相当于hide方法
     774         */
     775         (setting === undefined ? el.css("display") == "none" : setting) ? el.show() : el.hide()
     776       })
     777     },
     778     prev: function(selector) {
     779       return $(this.pluck('previousElementSibling')).filter(selector || '*')
     780     },
     781     next: function(selector) {
     782       return $(this.pluck('nextElementSibling')).filter(selector || '*')
     783     },
     784     //当有参数时，设置集合每条记录的HTML，没有参数时，则为获取集合第一条记录的HTML，如果集合的长度为0,则返回null
     785     html: function(html) {
     786       return html === undefined ?
     787       //参数html不存在时，获取集合中第一条记录的html
     788       (this.length > 0 ? this[0].innerHTML : null) :
     789       //否则遍历集合，设置每条记录的html
     790       this.each(function(idx) {
     791         //记录原始的innerHTMl
     792         var originHtml = this.innerHTML
     793         //如果参数html是字符串直接插入到记录中，
     794         //如果是函数，则将当前记录作为上下文，调用该函数，且传入该记录的索引和原始innerHTML作为参数
     795         $(this).empty().append(funcArg(this, html, idx, originHtml))
     796       })
     797     },
     798     text: function(text) {
     799       //如果不给定text参数，则为获取功能，集合长度大于0时，取第一条数据的textContent，否则返回null,
     800       //如果给定text参数，则为集合的每一条数据设置textContent为text
     801       return text === undefined ? (this.length > 0 ? this[0].textContent : null) : this.each(function() {
     802         this.textContent = text
     803       })
     804     },
     805     attr: function(name, value) {
     806       var result
     807       //当只有name且为字符串时，表示获取第一条记录的属性
     808       return (typeof name == 'string' && value === undefined) ?
     809       //集合没有记录或者集合的元素不是node类型，返回undefined
     810       (this.length == 0 || this[0].nodeType !== 1 ? undefined :
     811       //如果取的是input的value
     812       (name == 'value' && this[0].nodeName == 'INPUT') ? this.val() :
     813       //注意直接定义在node上的属性，在标准浏览器和ie9,10中用getAttribute取不到,得到的结果是null
     814       //比如div.aa = 10,用div.getAttribute('aa')得到的是null,需要用div.aa或者div['aa']这样来取
     815       (!(result = this[0].getAttribute(name)) && name in this[0]) ? this[0][name] : result) :
     816       this.each(function(idx) {
     817         if (this.nodeType !== 1) return
     818         //如果name是一个对象，如{'id':'test','value':11},则给数据设置属性
     819         if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
     820         //如果name只是一个普通的属性字符串，用funcArg来处理value是值或者function的情况最终返回一个属性值
     821         //如果funcArg函数返回的是undefined或者null，则相当于删除元素的属性
     822         else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
     823       })
     824     },
     825     removeAttr: function(name) {
     826       return this.each(function() {
     827         this.nodeType === 1 && setAttribute(this, name)//setAttribute的第三个参数为null时，效果是删除name属性
     828       })
     829     },
     830     //获取第一条数据的指定的name属性或者给每条数据添加自定义属性，注意和setAttribute的区别
     831     prop: function(name, value) {
     832       //没有给定value时，为获取，给定value则给每一条数据添加，value可以为值也可以是一个返回值的函数
     833       return (value === undefined) ? (this[0] && this[0][name]) : this.each(function(idx) {
     834         this[name] = funcArg(this, value, idx, this[name])
     835       })
     836     },
     837     data: function(name, value) {
     838       //通过调用attr方法来实现获取与设置的效果，注意attr方法里，当value存在的时候，返回的是集合本身，如果不存在，则是返回获取的值
     839       var data = this.attr('data-' + dasherize(name), value)
     840       return data !== null ? deserializeValue(data) : undefined
     841     },
     842     val: function(value) {
     843       return (value === undefined) ?
     844       //如果是多选的select，则返回一个包含被选中的option的值的数组
     845       (this[0] && (this[0].multiple ? $(this[0]).find('option').filter(function(o) {
     846         return this.selected
     847       }).pluck('value') : this[0].value)) : this.each(function(idx) {
     848         this.value = funcArg(this, value, idx, this.value)
     849       })
     850     },
     851     offset: function(coordinates) {
     852       if (coordinates) return this.each(function(index) {
     853         var $this = $(this),
     854           //coordinates为{}时直接返回，为函数时返回处理结果给coords
     855           coords = funcArg(this, coordinates, index, $this.offset()),
     856           //取父级的offset
     857           parentOffset = $this.offsetParent().offset(),
     858           //计算出它们之间的差，得出其偏移量  
     859           props = {
     860             top: coords.top - parentOffset.top,
     861             left: coords.left - parentOffset.left
     862           }
     863           //注意元素的position为static时，设置top,left是无效的
     864         if ($this.css('position') == 'static') props['position'] = 'relative'
     865         $this.css(props)
     866       })
     867       //取第一条记录的offset,包括offsetTop,offsetLeft,offsetWidth,offsetHeight
     868       if (this.length == 0) return null
     869       var obj = this[0].getBoundingClientRect()
     870       //window.pageYOffset就是类似Math.max(document.documentElement.scrollTop||document.body.scrollTop)
     871       return {
     872         left: obj.left + window.pageXOffset,
     873         top: obj.top + window.pageYOffset,
     874         width: Math.round(obj.width),
     875         height: Math.round(obj.height)
     876       }
     877     },
     878     css: function(property, value) {
     879       //获取指定的样式
     880       if (arguments.length < 2 && typeof property == 'string') return this[0] && (this[0].style[camelize(property)] || getComputedStyle(this[0], '').getPropertyValue(property))
     881       //设置样式
     882       var css = ''
     883       if (type(property) == 'string') {
     884         if (!value && value !== 0) //当value的值为非零的可以转成false的值时如(null,undefined)，删掉property样式
     885         this.each(function() {
     886           //style.removeProperty 移除指定的CSS样式名(IE不支持DOM的style方法)
     887           this.style.removeProperty(dasherize(property))
     888         })
     889         else css = dasherize(property) + ":" + maybeAddPx(property, value)
     890       } else {
     891         //当property是对象时
     892         for (key in property)
     893         if (!property[key] && property[key] !== 0)
     894         //当property[key]的值为非零的可以转成false的值时，删掉key样式
     895         this.each(function() {
     896           this.style.removeProperty(dasherize(key))
     897         })
     898         else css += dasherize(key) + ':' + maybeAddPx(key, property[key]) + ';'
     899       }
     900       //设置
     901       return this.each(function() {
     902         this.style.cssText += ';' + css
     903       })
     904     },
     905     index: function(element) {
     906       //这里的$(element)[0]是为了将字符串转成node,因为this是个包含node的数组
     907       //当不指定element时，取集合中第一条记录在其父节点的位置
     908       //this.parent().children().indexOf(this[0])这句很巧妙，和取第一记录的parent().children().indexOf(this)相同
     909       return element ? this.indexOf($(element)[0]) : this.parent().children().indexOf(this[0])
     910     },
     911     hasClass: function(name) {
     912       return emptyArray.some.call(this, function(el) {
     913         //注意这里的this是classRE(name)生成的正则
     914         return this.test(className(el))
     915       }, classRE(name))
     916     },
     917     addClass: function(name) {
     918       return this.each(function(idx) {
     919         classList = []
     920         var cls = className(this),
     921           newName = funcArg(this, name, idx, cls)
     922           //处理同时多个类的情况，用空格分开
     923           newName.split(/\s+/g).forEach(function(klass) {
     924             if (!$(this).hasClass(klass)) classList.push(klass)
     925           }, this)
     926           classList.length && className(this, cls + (cls ? " " : "") + classList.join(" "))
     927       })
     928     },
     929     removeClass: function(name) {
     930       return this.each(function(idx) {
     931         if (name === undefined) return className(this, '')
     932         classList = className(this)
     933         funcArg(this, name, idx, classList).split(/\s+/g).forEach(function(klass) {
     934           classList = classList.replace(classRE(klass), " ")
     935         })
     936         className(this, classList.trim())
     937       })
     938     },
     939     toggleClass: function(name, when) {
     940       return this.each(function(idx) {
     941         var $this = $(this),
     942           names = funcArg(this, name, idx, className(this))
     943           names.split(/\s+/g).forEach(function(klass) {
     944             (when === undefined ? !$this.hasClass(klass) : when) ? $this.addClass(klass) : $this.removeClass(klass)
     945           })
     946       })
     947     },
     948     scrollTop: function() {
     949       if (!this.length) return
     950       return ('scrollTop' in this[0]) ? this[0].scrollTop : this[0].scrollY
     951     },
     952     position: function() {
     953       if (!this.length) return
     954 
     955       var elem = this[0],
     956         // Get *real* offsetParent
     957         offsetParent = this.offsetParent(),
     958         // Get correct offsets
     959         offset = this.offset(),
     960         parentOffset = rootNodeRE.test(offsetParent[0].nodeName) ? {
     961           top: 0,
     962           left: 0
     963         } : offsetParent.offset()
     964 
     965         // Subtract element margins
     966         // note: when an element has margin: auto the offsetLeft and marginLeft
     967         // are the same in Safari causing offset.left to incorrectly be 0
     968         offset.top -= parseFloat($(elem).css('margin-top')) || 0
     969         offset.left -= parseFloat($(elem).css('margin-left')) || 0
     970 
     971         // Add offsetParent borders
     972         parentOffset.top += parseFloat($(offsetParent[0]).css('border-top-width')) || 0
     973         parentOffset.left += parseFloat($(offsetParent[0]).css('border-left-width')) || 0
     974 
     975         // Subtract the two offsets
     976       return {
     977         top: offset.top - parentOffset.top,
     978         left: offset.left - parentOffset.left
     979       }
     980     },
     981     offsetParent: function() {
     982       return this.map(function() {
     983         var parent = this.offsetParent || document.body
     984         while (parent && !rootNodeRE.test(parent.nodeName) && $(parent).css("position") == "static")
     985         parent = parent.offsetParent
     986         return parent
     987       })
     988     }
     989   }
     990 
     991   // for now
     992   $.fn.detach = $.fn.remove
     993 
     994   // Generate the `width` and `height` functions
     995   ;
     996   ['width', 'height'].forEach(function(dimension) {
     997     $.fn[dimension] = function(value) {
     998       var offset, el = this[0],
     999         //将width,hegiht转成Width,Height，用于取window或者document的width和height
    1000         Dimension = dimension.replace(/./, function(m) {
    1001           return m[0].toUpperCase()
    1002         })
    1003         //没有参数为获取，获取window的width和height用innerWidth,innerHeight
    1004       if (value === undefined) return isWindow(el) ? el['inner' + Dimension] :
    1005       //获取document的width和height时，用offsetWidth,offsetHeight
    1006       isDocument(el) ? el.documentElement['offset' + Dimension] : (offset = this.offset()) && offset[dimension]
    1007       else return this.each(function(idx) {
    1008         el = $(this)
    1009         el.css(dimension, funcArg(this, value, idx, el[dimension]()))
    1010       })
    1011     }
    1012   })
    1013 
    1014   function traverseNode(node, fun) {
    1015     fun(node)
    1016     for (var key in node.childNodes) traverseNode(node.childNodes[key], fun)
    1017   }
    1018 
    1019   // Generate the `after`, `prepend`, `before`, `append`,
    1020   // `insertAfter`, `insertBefore`, `appendTo`, and `prependTo` methods.
    1021   adjacencyOperators.forEach(function(operator, operatorIndex) {
    1022     var inside = operatorIndex % 2 //=> prepend, append
    1023 
    1024     $.fn[operator] = function() {
    1025       // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings
    1026       var argType, nodes = $.map(arguments, function(arg) {
    1027         argType = type(arg)
    1028         return argType == "object" || argType == "array" || arg == null ? arg : zepto.fragment(arg)
    1029       }),
    1030         parent, copyByClone = this.length > 1 //如果集合的长度大于集，则需要clone被插入的节点
    1031       if (nodes.length < 1) return this
    1032 
    1033       return this.each(function(_, target) {
    1034         parent = inside ? target : target.parentNode
    1035 
    1036         //通过改变target将after，prepend，append操作转成before操作，insertBefore的第二个参数为null时等于appendChild操作
    1037         target = operatorIndex == 0 ? target.nextSibling : operatorIndex == 1 ? target.firstChild : operatorIndex == 2 ? target : null
    1038 
    1039         nodes.forEach(function(node) {
    1040           if (copyByClone) node = node.cloneNode(true)
    1041           else if (!parent) return $(node).remove()
    1042 
    1043           //插入节点后，如果被插入的节点是SCRIPT，则执行里面的内容并将window设为上下文
    1044           traverseNode(parent.insertBefore(node, target), function(el) {
    1045             if (el.nodeName != null && el.nodeName.toUpperCase() === 'SCRIPT' && (!el.type || el.type === 'text/javascript') && !el.src) window['eval'].call(window, el.innerHTML)
    1046           })
    1047         })
    1048       })
    1049     }
    1050 
    1051     // after    => insertAfter
    1052     // prepend  => prependTo
    1053     // before   => insertBefore
    1054     // append   => appendTo
    1055     $.fn[inside ? operator + 'To' : 'insert' + (operatorIndex ? 'Before' : 'After')] = function(html) {
    1056       $(html)[operator](this)
    1057       return this
    1058     }
    1059   })
    1060 
    1061   zepto.Z.prototype = $.fn
    1062 
    1063   // Export internal API functions in the `$.zepto` namespace
    1064   zepto.uniq = uniq
    1065   zepto.deserializeValue = deserializeValue
    1066   $.zepto = zepto
    1067 
    1068   return $
    1069 })();
    1070 
    1071 window.Zepto = Zepto;
    1072 '$' in window || (window.$ = Zepto);
    1073 
    1074 ;(function($) {
    1075   function detect(ua) {
    1076     var os = this.os = {}, browser = this.browser = {},
    1077     webkit = ua.match(/WebKit\/([\d.]+)/),
    1078       android = ua.match(/(Android)\s+([\d.]+)/),
    1079       ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
    1080       iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
    1081       webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),
    1082       touchpad = webos && ua.match(/TouchPad/),
    1083       kindle = ua.match(/Kindle\/([\d.]+)/),
    1084       silk = ua.match(/Silk\/([\d._]+)/),
    1085       blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/),
    1086       bb10 = ua.match(/(BB10).*Version\/([\d.]+)/),
    1087       rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/),
    1088       playbook = ua.match(/PlayBook/),
    1089       chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/),
    1090       firefox = ua.match(/Firefox\/([\d.]+)/)
    1091 
    1092       // Todo: clean this up with a better OS/browser seperation:
    1093       // - discern (more) between multiple browsers on android
    1094       // - decide if kindle fire in silk mode is android or not
    1095       // - Firefox on Android doesn't specify the Android version
    1096       // - possibly devide in os, device and browser hashes
    1097 
    1098     if (browser.webkit = !! webkit) browser.version = webkit[1]
    1099 
    1100     if (android) os.android = true, os.version = android[2]
    1101     if (iphone) os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.')
    1102     if (ipad) os.ios = os.ipad = true, os.version = ipad[2].replace(/_/g, '.')
    1103     if (webos) os.webos = true, os.version = webos[2]
    1104     if (touchpad) os.touchpad = true
    1105     if (blackberry) os.blackberry = true, os.version = blackberry[2]
    1106     if (bb10) os.bb10 = true, os.version = bb10[2]
    1107     if (rimtabletos) os.rimtabletos = true, os.version = rimtabletos[2]
    1108     if (playbook) browser.playbook = true
    1109     if (kindle) os.kindle = true, os.version = kindle[1]
    1110     if (silk) browser.silk = true, browser.version = silk[1]
    1111     if (!silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true
    1112     if (chrome) browser.chrome = true, browser.version = chrome[1]
    1113     if (firefox) browser.firefox = true, browser.version = firefox[1]
    1114 
    1115     os.tablet = !! (ipad || playbook || (android && !ua.match(/Mobile/)) || (firefox && ua.match(/Tablet/)))
    1116     os.phone = !! (!os.tablet && (android || iphone || webos || blackberry || bb10 || (chrome && ua.match(/Android/)) || (chrome && ua.match(/CriOS\/([\d.]+)/)) || (firefox && ua.match(/Mobile/))))
    1117   }
    1118 
    1119   detect.call($, navigator.userAgent)
    1120   // make available to unit tests
    1121   $.__detect = detect
    1122 
    1123 })(Zepto)
    1124 
    1125 /* 
    1126 事件处理部份
    1127  */
    1128 ;
    1129 (function($) {
    1130   var $$ = $.zepto.qsa,
    1131     handlers = {}, _zid = 1,
    1132     specialEvents = {},
    1133     hover = {
    1134       mouseenter: 'mouseover',
    1135       mouseleave: 'mouseout'
    1136     }
    1137 
    1138   specialEvents.click = specialEvents.mousedown = specialEvents.mouseup = specialEvents.mousemove = 'MouseEvents'
    1139 
    1140   //取element的唯一标示符，如果没有，则设置一个并返回
    1141 
    1142   function zid(element) {
    1143     return element._zid || (element._zid = _zid++)
    1144   }
    1145   //查找绑定在元素上的指定类型的事件处理函数集合
    1146 
    1147   function findHandlers(element, event, fn, selector) {
    1148     event = parse(event)
    1149     if (event.ns) var matcher = matcherFor(event.ns)
    1150     return (handlers[zid(element)] || []).filter(function(handler) {
    1151       return handler && (!event.e || handler.e == event.e) //判断事件类型是否相同
    1152       &&
    1153       (!event.ns || matcher.test(handler.ns)) //判断事件命名空间是否相同
    1154       //注意函数是引用类型的数据zid(handler.fn)的作用是返回handler.fn的标示符，如果没有，则给它添加一个，
    1155       //这样如果fn和handler.fn引用的是同一个函数，那么fn上应该也可相同的标示符，
    1156       //这里就是通过这一点来判断两个变量是否引用的同一个函数
    1157       &&
    1158       (!fn || zid(handler.fn) === zid(fn)) && (!selector || handler.sel == selector)
    1159     })
    1160   }
    1161   //解析事件类型，返回一个包含事件名称和事件命名空间的对象
    1162 
    1163   function parse(event) {
    1164     var parts = ('' + event).split('.')
    1165     return {
    1166       e: parts[0],
    1167       ns: parts.slice(1).sort().join(' ')
    1168     }
    1169   }
    1170   //生成命名空间的正则
    1171 
    1172   function matcherFor(ns) {
    1173     return new RegExp('(?:^| )' + ns.replace(' ', ' .* ?') + '(?: |$)')
    1174   }
    1175   //遍历events
    1176 
    1177   function eachEvent(events, fn, iterator) {
    1178     if ($.type(events) != "string") $.each(events, iterator)
    1179     else events.split(/\s/).forEach(function(type) {
    1180       iterator(type, fn)
    1181     })
    1182   }
    1183   //通过给focus和blur事件设置为捕获来达到事件冒泡的目的
    1184 
    1185   function eventCapture(handler, captureSetting) {
    1186     return handler.del && (handler.e == 'focus' || handler.e == 'blur') || !! captureSetting
    1187   }
    1188 
    1189   //修复不支持mouseenter和mouseleave的情况
    1190 
    1191   function realEvent(type) {
    1192     return hover[type] || type
    1193   }
    1194 
    1195   //给元素绑定监听事件,可同时绑定多个事件类型，如['click','mouseover','mouseout'],也可以是'click mouseover mouseout'
    1196 
    1197   function add(element, events, fn, selector, getDelegate, capture) {
    1198     var id = zid(element),
    1199       set = (handlers[id] || (handlers[id] = [])) //元素上已经绑定的所有事件处理函数
    1200       eachEvent(events, fn, function(event, fn) {
    1201         var handler = parse(event)
    1202         //保存fn,下面为了处理mouseenter, mouseleave时，对fn进行了修改
    1203         handler.fn = fn
    1204         handler.sel = selector
    1205         // 模仿 mouseenter, mouseleave
    1206         if (handler.e in hover) fn = function(e) {
    1207           /* 
    1208             relatedTarget为事件相关对象，只有在mouseover和mouseout事件时才有值
    1209             mouseover时表示的是鼠标移出的那个对象，mouseout时表示的是鼠标移入的那个对象
    1210             当related不存在，表示事件不是mouseover或者mouseout,mouseover时!$.contains(this, related)当相关对象不在事件对象内
    1211             且related !== this相关对象不是事件对象时，表示鼠标已经从事件对象外部移入到了对象本身，这个时间是要执行处理函数的
    1212             当鼠标从事件对象上移入到子节点的时候related就等于this了，且!$.contains(this, related)也不成立，这个时间是不需要执行处理函数的
    1213         */
    1214           var related = e.relatedTarget
    1215           if (!related || (related !== this && !$.contains(this, related))) return handler.fn.apply(this, arguments)
    1216         }
    1217         //事件委托
    1218         handler.del = getDelegate && getDelegate(fn, event)
    1219         var callback = handler.del || fn
    1220         handler.proxy = function(e) {
    1221           var result = callback.apply(element, [e].concat(e.data))
    1222           //当事件处理函数返回false时，阻止默认操作和冒泡
    1223           if (result === false) e.preventDefault(), e.stopPropagation()
    1224           return result
    1225         }
    1226         //设置处理函数的在函数集中的位置
    1227         handler.i = set.length
    1228         //将函数存入函数集中
    1229         set.push(handler)
    1230         element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture))
    1231       })
    1232   }
    1233   //删除绑定在元素上的指定类型的事件监听函数，可同时删除多种事件类型指定的函数，用数组或者还空格的字符串即可，同add
    1234 
    1235   function remove(element, events, fn, selector, capture) {
    1236     var id = zid(element)
    1237     eachEvent(events || '', fn, function(event, fn) {
    1238       findHandlers(element, event, fn, selector).forEach(function(handler) {
    1239         delete handlers[id][handler.i]
    1240         element.removeEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture))
    1241       })
    1242     })
    1243   }
    1244 
    1245   $.event = {
    1246     add: add,
    1247     remove: remove
    1248   }
    1249 
    1250   //设置代理
    1251   $.proxy = function(fn, context) {
    1252     if ($.isFunction(fn)) {
    1253       //如果fn是函数，则申明一个新的函数并用context作为上下文调用fn
    1254       var proxyFn = function() {
    1255         return fn.apply(context, arguments)
    1256       }
    1257       //引用fn标示符
    1258       proxyFn._zid = zid(fn)
    1259       return proxyFn
    1260     } else if (typeof context == 'string') {
    1261       return $.proxy(fn[context], fn)
    1262     } else {
    1263       throw new TypeError("expected function")
    1264     }
    1265   }
    1266 
    1267   $.fn.bind = function(event, callback) {
    1268     return this.each(function() {
    1269       add(this, event, callback)
    1270     })
    1271   }
    1272   $.fn.unbind = function(event, callback) {
    1273     return this.each(function() {
    1274       remove(this, event, callback)
    1275     })
    1276   }
    1277   //绑定一次性事件监听函数
    1278   $.fn.one = function(event, callback) {
    1279     return this.each(function(i, element) {
    1280       //添加函数，然后在回调函数里再删除绑定。达到一次性事件的目的
    1281       add(this, event, callback, null, function(fn, type) {
    1282         return function() {
    1283           var result = fn.apply(element, arguments) //这里执行绑定的回调
    1284           remove(element, type, fn) //删除上面的绑定
    1285           return result
    1286         }
    1287       })
    1288     })
    1289   }
    1290 
    1291   var returnTrue = function() {
    1292     return true
    1293   },
    1294   returnFalse = function() {
    1295     return false
    1296   },
    1297   ignoreProperties = /^([A-Z]|layer[XY]$)/,
    1298     eventMethods = {
    1299       preventDefault: 'isDefaultPrevented', //是否调用过preventDefault方法
    1300       //取消执行其他的事件处理函数并取消事件冒泡.如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.
    1301       stopImmediatePropagation: 'isImmediatePropagationStopped', //是否调用过stopImmediatePropagation方法，
    1302       stopPropagation: 'isPropagationStopped' //是否调用过stopPropagation方法
    1303     }
    1304     //创建事件代理
    1305 
    1306     function createProxy(event) {
    1307       var key, proxy = {
    1308         originalEvent: event
    1309       } //保存原始event
    1310       for (key in event)
    1311       if (!ignoreProperties.test(key) && event[key] !== undefined) proxy[key] = event[key] //复制event属性至proxy
    1312 
    1313       //将preventDefault，stopImmediatePropagatio,stopPropagation方法定义到proxy上
    1314       $.each(eventMethods, function(name, predicate) {
    1315         proxy[name] = function() {
    1316           this[predicate] = returnTrue
    1317           return event[name].apply(event, arguments)
    1318         }
    1319         proxy[predicate] = returnFalse
    1320       })
    1321       return proxy
    1322     }
    1323 
    1324     // emulates the 'defaultPrevented' property for browsers that have none
    1325     //event.defaultPrevented返回一个布尔值,表明当前事件的默认动作是否被取消,也就是是否执行了 event.preventDefault()方法.
    1326 
    1327     function fix(event) {
    1328       if (!('defaultPrevented' in event)) {
    1329         event.defaultPrevented = false //初始值false
    1330         var prevent = event.preventDefault // 引用默认preventDefault
    1331         event.preventDefault = function() { //重写preventDefault
    1332           this.defaultPrevented = true
    1333           prevent.call(this)
    1334         }
    1335       }
    1336     }
    1337     //事件委托
    1338     $.fn.delegate = function(selector, event, callback) {
    1339       return this.each(function(i, element) {
    1340         add(element, event, callback, selector, function(fn) {
    1341           return function(e) {
    1342             //如果事件对象是element里的元素,取与selector相匹配的
    1343             var evt, match = $(e.target).closest(selector, element).get(0)
    1344             if (match) {
    1345               //evt成了一个拥有preventDefault，stopImmediatePropagatio,stopPropagation方法，currentTarge,liveFiredn属性的对象,另也有e的默认属性
    1346               evt = $.extend(createProxy(e), {
    1347                 currentTarget: match,
    1348                 liveFired: element
    1349               })
    1350               return fn.apply(match, [evt].concat([].slice.call(arguments, 1)))
    1351             }
    1352           }
    1353         })
    1354       })
    1355     }
    1356     //取消事件委托
    1357     $.fn.undelegate = function(selector, event, callback) {
    1358       return this.each(function() {
    1359         remove(this, event, callback, selector)
    1360       })
    1361     }
    1362 
    1363   $.fn.live = function(event, callback) {
    1364     $(document.body).delegate(this.selector, event, callback)
    1365     return this
    1366   }
    1367   $.fn.die = function(event, callback) {
    1368     $(document.body).undelegate(this.selector, event, callback)
    1369     return this
    1370   }
    1371 
    1372   //on也有live和事件委托的效果，所以可以只用on来绑定事件
    1373   $.fn.on = function(event, selector, callback) {
    1374     return !selector || $.isFunction(selector) ? this.bind(event, selector || callback) : this.delegate(selector, event, callback)
    1375   }
    1376   $.fn.off = function(event, selector, callback) {
    1377     return !selector || $.isFunction(selector) ? this.unbind(event, selector || callback) : this.undelegate(selector, event, callback)
    1378   }
    1379   //主动触发事件
    1380   $.fn.trigger = function(event, data) {
    1381     if (typeof event == 'string' || $.isPlainObject(event)) event = $.Event(event)
    1382     fix(event)
    1383     event.data = data
    1384     return this.each(function() {
    1385       // items in the collection might not be DOM elements
    1386       // (todo: possibly support events on plain old objects)
    1387       if ('dispatchEvent' in this) this.dispatchEvent(event)
    1388     })
    1389   }
    1390 
    1391   // triggers event handlers on current element just as if an event occurred,
    1392   // doesn't trigger an actual event, doesn't bubble
    1393   //触发元素上绑定的指定类型的事件，但是不冒泡
    1394   $.fn.triggerHandler = function(event, data) {
    1395     var e, result
    1396     this.each(function(i, element) {
    1397       e = createProxy(typeof event == 'string' ? $.Event(event) : event)
    1398       e.data = data
    1399       e.target = element
    1400       //遍历元素上绑定的指定类型的事件处理函数集，按顺序执行，如果执行过stopImmediatePropagation，
    1401       //那么e.isImmediatePropagationStopped()就会返回true,再外层函数返回false
    1402       //注意each里的回调函数指定返回false时，会跳出循环，这样就达到的停止执行回面函数的目的
    1403       $.each(findHandlers(element, event.type || event), function(i, handler) {
    1404         result = handler.proxy(e)
    1405         if (e.isImmediatePropagationStopped()) return false
    1406       })
    1407     })
    1408     return result
    1409   }
    1410 
    1411   // shortcut methods for `.bind(event, fn)` for each event type
    1412   ;
    1413   ('focusin focusout load resize scroll unload click dblclick ' +
    1414     'mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave ' +
    1415     'change select keydown keypress keyup error').split(' ').forEach(function(event) {
    1416     $.fn[event] = function(callback) {
    1417       return callback ?
    1418       //如果有callback回调，则认为它是绑定
    1419       this.bind(event, callback) :
    1420       //如果没有callback回调，则让它主动触发
    1421       this.trigger(event)
    1422     }
    1423   })
    1424 
    1425   ;
    1426   ['focus', 'blur'].forEach(function(name) {
    1427     $.fn[name] = function(callback) {
    1428       if (callback) this.bind(name, callback)
    1429       else this.each(function() {
    1430         try {
    1431           this[name]()
    1432         } catch (e) {}
    1433       })
    1434       return this
    1435     }
    1436   })
    1437 
    1438   //根据参数创建一个event对象
    1439   $.Event = function(type, props) {
    1440     //当type是个对象时
    1441     if (typeof type != 'string') props = type, type = props.type
    1442     //创建一个event对象，如果是click,mouseover,mouseout时，创建的是MouseEvent,bubbles为是否冒泡
    1443     var event = document.createEvent(specialEvents[type] || 'Events'),
    1444       bubbles = true
    1445       //确保bubbles的值为true或false,并将props参数的属性扩展到新创建的event对象上
    1446     if (props) for (var name in props)(name == 'bubbles') ? (bubbles = !! props[name]) : (event[name] = props[name])
    1447     //初始化event对象，type为事件类型，如click，bubbles为是否冒泡，第三个参数表示是否可以用preventDefault方法来取消默认操作
    1448     event.initEvent(type, bubbles, true, null, null, null, null, null, null, null, null, null, null, null, null)
    1449     //添加isDefaultPrevented方法，event.defaultPrevented返回一个布尔值,表明当前事件的默认动作是否被取消,也就是是否执行了 event.preventDefault()方法.
    1450     event.isDefaultPrevented = function() {
    1451       return this.defaultPrevented
    1452     }
    1453     return event
    1454   }
    1455 
    1456 })(Zepto)
    1457 
    1458 /**
    1459   Ajax处理部份
    1460 **/
    1461 ;
    1462 (function($) {
    1463   var jsonpID = 0,
    1464     document = window.document,
    1465     key,
    1466     name,
    1467     rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
    1468     scriptTypeRE = /^(?:text|application)\/javascript/i,
    1469     xmlTypeRE = /^(?:text|application)\/xml/i,
    1470     jsonType = 'application/json',
    1471     htmlType = 'text/html',
    1472     blankRE = /^\s*$/
    1473 
    1474     // trigger a custom event and return false if it was cancelled
    1475 
    1476     function triggerAndReturn(context, eventName, data) {
    1477       var event = $.Event(eventName)
    1478       $(context).trigger(event, data)
    1479       return !event.defaultPrevented
    1480     }
    1481 
    1482     // trigger an Ajax "global" event
    1483     //触发 ajax的全局事件
    1484 
    1485     function triggerGlobal(settings, context, eventName, data) {
    1486       if (settings.global) return triggerAndReturn(context || document, eventName, data)
    1487     }
    1488 
    1489     // Number of active Ajax requests
    1490     $.active = 0
    1491 
    1492     //settings.global为true时表示需要触发全局ajax事件
    1493     //注意这里的$.active++ === 0很巧妙，用它来判断开始，因为只有$.active等于0时$.active++ === 0才成立
    1494 
    1495     function ajaxStart(settings) {
    1496       if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')
    1497     }
    1498     //注意这里的 !(--$.active)同上面的异曲同工，--$.active为0，则表示$.active的值为1，这样用来判断结束，也很有意思
    1499 
    1500     function ajaxStop(settings) {
    1501       if (settings.global && !(--$.active)) triggerGlobal(settings, null, 'ajaxStop')
    1502     }
    1503 
    1504     // triggers an extra global event "ajaxBeforeSend" that's like "ajaxSend" but cancelable
    1505     //触发全局ajaxBeforeSend事件，如果返回false,则取消此次请求
    1506 
    1507     function ajaxBeforeSend(xhr, settings) {
    1508       var context = settings.context
    1509       if (settings.beforeSend.call(context, xhr, settings) === false || triggerGlobal(settings, context, 'ajaxBeforeSend', [xhr, settings]) === false) return false
    1510 
    1511       triggerGlobal(settings, context, 'ajaxSend', [xhr, settings])
    1512     }
    1513 
    1514     function ajaxSuccess(data, xhr, settings) {
    1515       var context = settings.context,
    1516         status = 'success'
    1517       settings.success.call(context, data, status, xhr)
    1518       triggerGlobal(settings, context, 'ajaxSuccess', [xhr, settings, data])
    1519       ajaxComplete(status, xhr, settings)
    1520     }
    1521     // type: "timeout", "error", "abort", "parsererror"
    1522 
    1523     function ajaxError(error, type, xhr, settings) {
    1524       var context = settings.context
    1525       settings.error.call(context, xhr, type, error)
    1526       triggerGlobal(settings, context, 'ajaxError', [xhr, settings, error])
    1527       ajaxComplete(type, xhr, settings)
    1528     }
    1529     // status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
    1530 
    1531     function ajaxComplete(status, xhr, settings) {
    1532       var context = settings.context
    1533       settings.complete.call(context, xhr, status)
    1534       triggerGlobal(settings, context, 'ajaxComplete', [xhr, settings])
    1535       ajaxStop(settings)
    1536     }
    1537 
    1538     // Empty function, used as default callback
    1539 
    1540     function empty() {}
    1541     //可参考http://zh.wikipedia.org/zh-cn/JSONP
    1542     $.ajaxJSONP = function(options) {
    1543       if (!('type' in options)) return $.ajax(options)
    1544 
    1545       var callbackName = 'jsonp' + (++jsonpID), //创建回调函数名
    1546         script = document.createElement('script'),
    1547         //js文件加载完毕
    1548         cleanup = function() {
    1549           clearTimeout(abortTimeout) //清除下面的timeout事件处理
    1550           $(script).remove() //移除创建的script标签，因为该文件的JS内容已经解析过了
    1551           delete window[callbackName] //清除掉指定的回调函数
    1552         },
    1553         //取消加载
    1554         abort = function(type) {
    1555           cleanup()
    1556           // In case of manual abort or timeout, keep an empty function as callback
    1557           // so that the SCRIPT tag that eventually loads won't result in an error.
    1558           //这里通过将回调函数重新赋值为空函数来达到看似阻止加载JS的目的，实际上给script标签设置了src属性后，请求就已经产生了，并且不能中断
    1559           if (!type || type == 'timeout') window[callbackName] = empty
    1560           ajaxError(null, type || 'abort', xhr, options)
    1561         },
    1562         xhr = {
    1563           abort: abort
    1564         }, abortTimeout
    1565 
    1566       if (ajaxBeforeSend(xhr, options) === false) {
    1567         abort('abort')
    1568         return false
    1569       }
    1570       //成功加载后的回调函数
    1571       window[callbackName] = function(data) {
    1572         cleanup()
    1573         ajaxSuccess(data, xhr, options)
    1574       }
    1575 
    1576       script.onerror = function() {
    1577         abort('error')
    1578       }
    1579       //将回调函数名追加到请求地址，并赋给script，至此请求产生
    1580       script.src = options.url.replace(/=\?/, '=' + callbackName)
    1581       $('head').append(script)
    1582 
    1583       //如果设置了超时处理
    1584       if (options.timeout > 0) abortTimeout = setTimeout(function() {
    1585         abort('timeout')
    1586       }, options.timeout)
    1587 
    1588       return xhr
    1589     }
    1590 
    1591     //ajax全局设置
    1592     $.ajaxSettings = {
    1593       // Default type of request
    1594       type: 'GET',
    1595       // Callback that is executed before request
    1596       beforeSend: empty,
    1597       // Callback that is executed if the request succeeds
    1598       success: empty,
    1599       // Callback that is executed the the server drops error
    1600       error: empty,
    1601       // Callback that is executed on request complete (both: error and success)
    1602       complete: empty,
    1603       // The context for the callbacks
    1604       context: null,
    1605       // Whether to trigger "global" Ajax events
    1606       global: true,
    1607       // Transport
    1608       xhr: function() {
    1609         return new window.XMLHttpRequest()
    1610       },
    1611       // MIME types mapping
    1612       accepts: {
    1613         script: 'text/javascript, application/javascript',
    1614         json: jsonType,
    1615         xml: 'application/xml, text/xml',
    1616         html: htmlType,
    1617         text: 'text/plain'
    1618       },
    1619       // Whether the request is to another domain
    1620       crossDomain: false,
    1621       // Default timeout
    1622       timeout: 0,
    1623       // Whether data should be serialized to string
    1624       processData: true,
    1625       // Whether the browser should be allowed to cache GET responses
    1626       cache: true
    1627     };
    1628 
    1629   //根据MIME返回相应的数据类型，用作ajax参数里的dataType用，设置预期返回的数据类型
    1630   //如html,json,scirpt,xml,text
    1631 
    1632   function mimeToDataType(mime) {
    1633     if (mime) mime = mime.split(';', 2)[0]
    1634     return mime && (mime == htmlType ? 'html' : mime == jsonType ? 'json' : scriptTypeRE.test(mime) ? 'script' : xmlTypeRE.test(mime) && 'xml') || 'text'
    1635   }
    1636   //将查询字符串追加到URL后面
    1637 
    1638   function appendQuery(url, query) {
    1639     //注意这里的replace,将第一个匹配到的&或者&&,&?,? ?& ??替换成?,用来保证地址的正确性
    1640     return (url + '&' + query).replace(/[&?]{1,2}/, '?')
    1641   }
    1642 
    1643   // serialize payload and append it to the URL for GET requests
    1644   //序列化发送到服务器上的数据，如果是GET请求，则将序列化后的数据追加到请求地址后面
    1645 
    1646   function serializeData(options) {
    1647     //options.processData表示对于非Get请求,是否自动将 options.data转换为字符串,前提是options.data不是字符串
    1648     if (options.processData && options.data && $.type(options.data) != "string")
    1649     //options.traditional表示是否以$.param方法序列化
    1650     options.data = $.param(options.data, options.traditional)
    1651     if (options.data && (!options.type || options.type.toUpperCase() == 'GET'))
    1652     //如果是GET请求，将序列化后的数据追加到请求地址后面
    1653     options.url = appendQuery(options.url, options.data)
    1654   }
    1655 
    1656   $.ajax = function(options) {
    1657     //注意这里不能直接将$.ajaxSettings替换掉$.extend的第一个参数,这样会改变 $.ajaxSettings里面的值
    1658     //这里的做法是创建一个新对象
    1659     var settings = $.extend({}, options || {})
    1660     //如果它没有定义$.ajaxSettings里面的属性的时候，才去将$.ajaxSettings[key] 复制过来
    1661     for (key in $.ajaxSettings) if (settings[key] === undefined) settings[key] = $.ajaxSettings[key]
    1662     //执行全局ajaxStart
    1663     ajaxStart(settings)
    1664 
    1665     //通过判断请求地址和当前页面地址的host是否相同来设置是跨域
    1666     if (!settings.crossDomain) settings.crossDomain = /^([\w-]+:)?\/\/([^\/]+)/.test(settings.url) && RegExp.$2 != window.location.host
    1667     //如果没有设置请求地址，则取当前页面地址
    1668     if (!settings.url) settings.url = window.location.toString();
    1669     //将data进行转换
    1670     serializeData(settings);
    1671     //如果不设置缓存
    1672     if (settings.cache === false) settings.url = appendQuery(settings.url, '_=' + Date.now())
    1673 
    1674     //如果请求的是jsonp，则将地址栏里的=?替换为callback=?,相当于一个简写
    1675     var dataType = settings.dataType,
    1676       hasPlaceholder = /=\?/.test(settings.url)
    1677       if (dataType == 'jsonp' || hasPlaceholder) {
    1678         if (!hasPlaceholder) settings.url = appendQuery(settings.url, 'callback=?')
    1679         return $.ajaxJSONP(settings)
    1680       }
    1681 
    1682     var mime = settings.accepts[dataType],
    1683       baseHeaders = {},
    1684       //如果请求地址没有定请求协议，则与当前页面协议相同
    1685       protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol,
    1686       xhr = settings.xhr(),
    1687       abortTimeout
    1688       //如果没有跨域
    1689     if (!settings.crossDomain) baseHeaders['X-Requested-With'] = 'XMLHttpRequest'
    1690     if (mime) {
    1691       baseHeaders['Accept'] = mime
    1692       if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0]
    1693       xhr.overrideMimeType && xhr.overrideMimeType(mime)
    1694     }
    1695     //如果不是GET请求，设置发送信息至服务器时内容编码类型
    1696     if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET')) baseHeaders['Content-Type'] = (settings.contentType || 'application/x-www-form-urlencoded')
    1697     settings.headers = $.extend(baseHeaders, settings.headers || {})
    1698 
    1699     xhr.onreadystatechange = function() {
    1700       if (xhr.readyState == 4) {
    1701         xhr.onreadystatechange = empty;
    1702         clearTimeout(abortTimeout)
    1703         var result, error = false
    1704         //根据状态来判断请求是否成功
    1705         //状态>=200 && < 300 表示成功
    1706         //状态 == 304 表示文件未改动过，也可认为成功
    1707         //如果是取要本地文件那也可以认为是成功的，xhr.status == 0是在直接打开页面时发生请求时出现的状态，也就是不是用localhost的形式访问的页面的情况
    1708         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
    1709           //获取返回的数据类型
    1710           dataType = dataType || mimeToDataType(xhr.getResponseHeader('content-type'))
    1711           result = xhr.responseText
    1712 
    1713           try {
    1714             // http://perfectionkills.com/global-eval-what-are-the-options/
    1715             if (dataType == 'script')(1, eval)(result) //如果返回的数据类型是JS
    1716             else if (dataType == 'xml') result = xhr.responseXML
    1717             else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result)
    1718           } catch (e) {
    1719             error = e
    1720           }
    1721           //如果解析出错，则执行全局parsererror事件
    1722           if (error) ajaxError(error, 'parsererror', xhr, settings)
    1723           //否则执行ajaxSuccess
    1724           else ajaxSuccess(result, xhr, settings)
    1725         } else {
    1726           //如果请求出错，则根据xhr.status来执行相应的错误处理函数
    1727           ajaxError(null, xhr.status ? 'error' : 'abort', xhr, settings)
    1728         }
    1729       }
    1730     }
    1731 
    1732     var async = 'async' in settings ? settings.async : true
    1733     xhr.open(settings.type, settings.url, async)
    1734     //设置请求头信息
    1735     for (name in settings.headers) xhr.setRequestHeader(name, settings.headers[name])
    1736 
    1737     //如果ajaxBeforeSend函数返回的false，则取消此次请示
    1738     if (ajaxBeforeSend(xhr, settings) === false) {
    1739       xhr.abort()
    1740       return false
    1741     }
    1742 
    1743     //当设置了settings.timeout，则在超时后取消请求，并执行timeout事件处理函数
    1744     if (settings.timeout > 0) abortTimeout = setTimeout(function() {
    1745       xhr.onreadystatechange = empty
    1746       xhr.abort()
    1747       ajaxError(null, 'timeout', xhr, settings)
    1748     }, settings.timeout)
    1749 
    1750     // avoid sending empty string (#319)
    1751     xhr.send(settings.data ? settings.data : null)
    1752     return xhr
    1753   }
    1754 
    1755   // handle optional data/success arguments
    1756   //将参数转换成ajax函数指定的参数格式
    1757 
    1758   function parseArguments(url, data, success, dataType) {
    1759     var hasData = !$.isFunction(data) //如果data是function，则认为它是请求成功后的回调
    1760     return {
    1761       url: url,
    1762       data: hasData ? data : undefined, //如果data不是function实例
    1763       success: !hasData ? data : $.isFunction(success) ? success : undefined,
    1764       dataType: hasData ? dataType || success : success
    1765     }
    1766   }
    1767 
    1768   //简单的get请求
    1769   $.get = function(url, data, success, dataType) {
    1770     return $.ajax(parseArguments.apply(null, arguments))
    1771   }
    1772 
    1773   $.post = function(url, data, success, dataType) {
    1774     var options = parseArguments.apply(null, arguments)
    1775     options.type = 'POST'
    1776     return $.ajax(options)
    1777   }
    1778 
    1779   $.getJSON = function(url, data, success) {
    1780     var options = parseArguments.apply(null, arguments)
    1781     options.dataType = 'json'
    1782     return $.ajax(options)
    1783   }
    1784 
    1785   //这里的url可以是http://www.xxxx.com selector这种形式，就是对加载进来的HTML对行一个筛选
    1786   $.fn.load = function(url, data, success) {
    1787     if (!this.length) return this
    1788     //将请求地址用空格分开
    1789     var self = this,
    1790       parts = url.split(/\s/),
    1791       selector,
    1792       options = parseArguments(url, data, success),
    1793       callback = options.success
    1794     if (parts.length > 1) options.url = parts[0], selector = parts[1]
    1795     //要对成功后的回调函数进行一个改写，因为需要将加载进来的HTML添加进当前集合
    1796     options.success = function(response) {
    1797       //selector就是对请求到的数据就行一个筛选的条件，比如只获取数据里的类名为.test的标签
    1798       self.html(selector ? $('<div>').html(response.replace(rscript, "")).find(selector) : response)
    1799       //这里才是你写的回调
    1800       callback && callback.apply(self, arguments)
    1801     }
    1802     $.ajax(options)
    1803     return this
    1804   }
    1805 
    1806   var escape = encodeURIComponent
    1807 
    1808     function serialize(params, obj, traditional, scope) {
    1809       var type, array = $.isArray(obj)
    1810       $.each(obj, function(key, value) {
    1811         type = $.type(value)
    1812         //scope用作处理value也是object或者array的情况
    1813         //traditional表示是否以传统的方式拼接数据，
    1814         //传统的意思就是比如现有一个数据{a:[1,2,3]},转成查询字符串后结果为'a=1&a=2&a=3'
    1815         //非传统的的结果则是a[]=1&a[]=2&a[]=3
    1816         if (scope) key = traditional ? scope : scope + '[' + (array ? '' : key) + ']'
    1817         // handle data in serializeArray() format
    1818         //当处理的数据为[{},{},{}]这种情况的时候，一般指的是序列化表单后的结果
    1819         if (!scope && array) params.add(value.name, value.value)
    1820         // recurse into nested objects
    1821         //当value值是数组或者是对象且不是按传统的方式序列化的时候，需要再次遍历value
    1822         else if (type == "array" || (!traditional && type == "object")) serialize(params, value, traditional, key)
    1823         else params.add(key, value)
    1824       })
    1825     }
    1826     //将obj转换为查询字符串的格式，traditional表示是否转换成传统的方式，至于传统的方式的意思看上面的注释
    1827     $.param = function(obj, traditional) {
    1828       var params = []
    1829       //注意这里将add方法定到params，所以下面serialize时才不需要返回数据
    1830       params.add = function(k, v) {
    1831         this.push(escape(k) + '=' + escape(v))
    1832       }
    1833       serialize(params, obj, traditional)
    1834       return params.join('&').replace(/%20/g, '+')
    1835     }
    1836 })(Zepto)
    1837 
    1838 ;
    1839 (function($) {
    1840   //序列化表单，返回一个类似[{name:value},{name2:value2}]的数组
    1841   $.fn.serializeArray = function() {
    1842     var result = [],
    1843       el
    1844       //将集合中的第一个表单里的所有表单元素转成数组后进行遍历
    1845       $(Array.prototype.slice.call(this.get(0).elements)).each(function() {
    1846         el = $(this)
    1847         var type = el.attr('type')
    1848         //判断其type属性，排除fieldset，submi,reset,button以及没有被选中的radio和checkbox
    1849         if (this.nodeName.toLowerCase() != 'fieldset' && !this.disabled && type != 'submit' && type != 'reset' && type != 'button' &&
    1850         //注意这里的写法，当元素既不是radio也不是checkbox时,直接返回true，
    1851         //当元素是radio或者checkbox时，会执行后面的this.checked，当radio或者checkbox被选中时this.checked得到true值
    1852         //这样就可以筛选中被选中的radio和checkbox了
    1853         ((type != 'radio' && type != 'checkbox') || this.checked)) result.push({
    1854           name: el.attr('name'),
    1855           value: el.val()
    1856         })
    1857       })
    1858       return result
    1859   }
    1860   //将表单的值转成name1=value1&name2=value2的形式
    1861   $.fn.serialize = function() {
    1862     var result = []
    1863     this.serializeArray().forEach(function(elm) {
    1864       result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
    1865     })
    1866     return result.join('&')
    1867   }
    1868   //表单提交
    1869   $.fn.submit = function(callback) {
    1870     if (callback) this.bind('submit', callback)
    1871     else if (this.length) {
    1872       var event = $.Event('submit')
    1873       this.eq(0).trigger(event)
    1874       if (!event.defaultPrevented) this.get(0).submit()
    1875     }
    1876     return this
    1877   }
    1878 
    1879 })(Zepto)
    1880 
    1881 //CSS3动画
    1882 ;
    1883 (function($, undefined) {
    1884   var prefix = '',
    1885     eventPrefix, endEventName, endAnimationName,
    1886     vendors = {
    1887       Webkit: 'webkit',
    1888       Moz: '',
    1889       O: 'o',
    1890       ms: 'MS'
    1891     },
    1892     document = window.document,
    1893     testEl = document.createElement('div'),
    1894     supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
    1895     transform,
    1896     transitionProperty, transitionDuration, transitionTiming,
    1897     animationName, animationDuration, animationTiming,
    1898     cssReset = {}
    1899     //将驼峰式的字符串转成用-分隔的小写形式，如borderWidth ==> border-width
    1900 
    1901     function dasherize(str) {
    1902       return downcase(str.replace(/([a-z])([A-Z])/, '$1-$2'))
    1903     }
    1904 
    1905     function downcase(str) {
    1906       return str.toLowerCase()
    1907     }
    1908     //用于修正事件名
    1909 
    1910     function normalizeEvent(name) {
    1911       return eventPrefix ? eventPrefix + name : downcase(name)
    1912     }
    1913 
    1914     //根据浏览器的特性设置CSS属性前轻辍和事件前辍，比如浏览器内核是webkit
    1915     //那么用于设置CSS属性的前辍prefix就等于'-webkit-',用来修正事件名的前辍eventPrefix就是Webkit
    1916     $.each(vendors, function(vendor, event) {
    1917       if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
    1918         prefix = '-' + downcase(vendor) + '-'
    1919         eventPrefix = event
    1920         return false
    1921       }
    1922     })
    1923 
    1924     transform = prefix + 'transform'
    1925   cssReset[transitionProperty = prefix + 'transition-property'] = cssReset[transitionDuration = prefix + 'transition-duration'] = cssReset[transitionTiming = prefix + 'transition-timing-function'] = cssReset[animationName = prefix + 'animation-name'] = cssReset[animationDuration = prefix + 'animation-duration'] = cssReset[animationTiming = prefix + 'animation-timing-function'] = ''
    1926 
    1927   $.fx = {
    1928     off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
    1929     speeds: {
    1930       _default: 400,
    1931       fast: 200,
    1932       slow: 600
    1933     },
    1934     cssPrefix: prefix,
    1935     transitionEnd: normalizeEvent('TransitionEnd'),
    1936     animationEnd: normalizeEvent('AnimationEnd')
    1937   }
    1938 
    1939   $.fn.animate = function(properties, duration, ease, callback) {
    1940     if ($.isPlainObject(duration)) ease = duration.easing, callback = duration.complete, duration = duration.duration
    1941     //如果duration是数字时，表示动画持续时间，如果是字符串，则从$.fx.speeds中取出相对应的值，如果没有找到相应的值，对取默认值
    1942     if (duration) duration = (typeof duration == 'number' ? duration : ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000
    1943     return this.anim(properties, duration, ease, callback)
    1944   }
    1945 
    1946   $.fn.anim = function(properties, duration, ease, callback) {
    1947     var key, cssValues = {}, cssProperties, transforms = '',
    1948       that = this,
    1949       wrappedCallback, endEvent = $.fx.transitionEnd
    1950       //动画持续时间默认值
    1951     if (duration === undefined) duration = 0.4
    1952     //如果浏览器不支持CSS3的动画，则duration=0，意思就是直接跳转最终值
    1953     if ($.fx.off) duration = 0
    1954 
    1955     //如果properties是一个动画名keyframe
    1956     if (typeof properties == 'string') {
    1957       // keyframe animation
    1958       cssValues[animationName] = properties
    1959       cssValues[animationDuration] = duration + 's'
    1960       cssValues[animationTiming] = (ease || 'linear')
    1961       endEvent = $.fx.animationEnd
    1962     } else {
    1963       cssProperties = []
    1964       // CSS transitions
    1965       for (key in properties)
    1966       //如果设置 的CSS属性是变形之类的
    1967       if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '
    1968       else cssValues[key] = properties[key], cssProperties.push(dasherize(key))
    1969 
    1970       if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)
    1971       if (duration > 0 && typeof properties === 'object') {
    1972         cssValues[transitionProperty] = cssProperties.join(', ')
    1973         cssValues[transitionDuration] = duration + 's'
    1974         cssValues[transitionTiming] = (ease || 'linear')
    1975       }
    1976     }
    1977 
    1978     wrappedCallback = function(event) {
    1979       if (typeof event !== 'undefined') {
    1980         if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"
    1981         $(event.target).unbind(endEvent, wrappedCallback)
    1982       }
    1983       $(this).css(cssReset)
    1984       callback && callback.call(this)
    1985     }
    1986     //当可以执行动画的时候，那么动画结束后会执行回调，
    1987     //如果不支持持续动画,在直接设置最终值后，不会执行动画结束回调
    1988     if (duration > 0) this.bind(endEvent, wrappedCallback)
    1989 
    1990     // trigger page reflow so new elements can animate
    1991     this.size() && this.get(0).clientLeft
    1992 
    1993     //设置
    1994     this.css(cssValues)
    1995 
    1996     //当持续时间小于等于0时，立刻还原
    1997     if (duration <= 0) setTimeout(function() {
    1998       that.each(function() {
    1999         wrappedCallback.call(this)
    2000       })
    2001     }, 0)
    2002 
    2003     return this
    2004   }
    2005 
    2006   testEl = null
    2007 })(Zepto)