zepto源码研究 - zepto.js - 1
简要：网上已经有很多人已经将zepto的源码研究得很细致了，但我还是想写下zepto源码系列，将别人的东西和自己的想法写下来以加深印象也是自娱自乐，文章中可能有许多错误，望有人不吝指出，烦请赐教。
首先是整个大致流程：
Zepto 的整体结构 var Zepto = (function() { //实际构造函数` function Z(dom, selector) { var i, len = dom ? dom.length : 0 for (i = 0; i < len; i++) this[i] = dom[i] this.length = len this.selector = selector || '' } zepto.Z = function(dom, selector) { return new Z(dom, selector) } //是否Zepto对象 instanceof 会循环查找左边的_prop_和右边的原型链中的原型是否匹配 zepto.isZ = function(object) { return object instanceof zepto.Z } // 初始化参数、DOM zepto.init = function(selector, context) { ... return zepto.Z(dom, selector) } //构造函数 $ = function(selector, context){ return zepto.init(selector, context) } //原型设置 $.fn = { ... } zepto.Z.prototype = Z.prototype = $.fn $.zepto = zepto return $ })() // If `$` is not yet defined, point it to `Zepto` window.Zepto = Zepto window.$ === undefined && (window.$ = Zepto)
zepto开头就是变量的初始化： concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice，由于这些变量会经常用到，因此在这里缩短作用域链是优化的一种方法。
接下来是正则表达式：
//匹配HTML代码 fragmentRE = /^\s*<(\w+|!)[^>]*>/, //TODO 匹配单个HTML标签 singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/, //TODO 匹配自闭合标签 tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, //匹配根节点 rootNodeRE = /^(?:body|html)$/i, //匹配A-Z capitalRE = /([A-Z])/g,
zepto.matches ：
/** * 元素是否匹配选择器 * @param element * @param selector * @returns {*} */ zepto.matches = function(element, selector) { //没参数，非元素，直接返回 if (!selector || !element || element.nodeType !== 1) return false //如果浏览器支持MatchesSelector 直接调用 var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector if (matchesSelector) return matchesSelector.call(element, selector) //浏览器不支持MatchesSelector var match, parent = element.parentNode, temp = !parent //元素没有父元素，存入到临时的div tempParent if (temp) (parent = tempParent).appendChild(element) //再通过父元素来搜索此表达式。 找不到-1 找到有索引从0开始 //注意 ~取反位运算符 作用是将值取负数再减1 如-1变成0 0变成-1 match = ~zepto.qsa(parent, selector).indexOf(element) //清理临时父节点 temp && tempParent.removeChild(element) //返回匹配 return match }
elem.matchesSelector(selector) 判断元素elem 是否匹配 selector，
例如：
$("#id").click(function (e) {
if(e.target.matches('a.btn')) {
e.preventDefault();
//TODO something
}
});
如果matchesSelector不支持,则找出elem的父元素(若没有则创造一个)利用zepto.qsa(parent, selector)来找出满足条件的元素
zepto.qsa(parent, selector)：
/** * 通过选择器表达式查找DOM * 原理 判断下选择器的类型（id/class/标签/表达式） * 使用对应方法getElementById getElementsByClassName getElementsByTagName querySelectorAll 查找 * @param element * @param selector * @returns {Array} */ zepto.qsa = function(element, selector){ var found, maybeID = selector[0] == '#',//ID标识 maybeClass = !maybeID && selector[0] == '.',//class 标识 //是id/class,就取'#/.'后的字符串，如‘#test’取‘test' nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, isSimple = simpleSelectorRE.test(nameOnly) //TODO:是否为单个选择器 没有空格 return (element.getElementById && isSimple && maybeID) ? // Safari DocumentFragment doesn't have getElementById //通过getElementById查找DOM，找到返回[dom],找不到返回[] ( (found = element.getElementById(nameOnly)) ? [found] : [] ) : //当element不为元素节点或document fragment时，返回空 //元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 片段 fragment 11 (element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] : slice.call( //如果是class，通过getElementsByClassName查找DOM， isSimple && !maybeID && element.getElementsByClassName ? // DocumentFragment doesn't have getElementsByClassName/TagName maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class element.getElementsByTagName(selector) : // Or a tag //如果是标签名,调用getElementsByTagName //最后调用querySelectorAll // Or it's not simple, and we need to query all ) }
1：首先判断selector是ID类型还是class类型，将标识先赋值准备好
if(maybeID){
//如果是Id，则取Id return found = element.getElementById(nameOnly)?[found]:[] }
if(element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11){
//如果不是正常的节点，则返回空
return []; }else{ if(isSimple&&element.getElementsByClassName){ if(maybeClass){ return element.getElementsByClassName(nameOnly); }else{ return element.getElementsByTagName(selector); } }else{ element.querySelectorAll(selector) } }
这里的nodeType 判断 1：是否为element元素，9：是否为document，11:是否为DocumentFragment
引用http://www.cnblogs.com/blueSkys/p/3685740.html中的一句话对DocumentFragment进行解释
DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。
不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作
element.querySelectorAll(selector)意思是 查找element的子元素并且document内css选择器符合selector的元素（这里并不像jquery.find一样查找
element的符合selector的子元素）
引用http://www.zhangxinxu.com/wordpress/2015/11/know-dom-queryselectorall/里面的内容：
<img id="outside">
<div id="my-id">
<img id="inside">
<div class="lonely"></div>
<div class="outer">
<div class="inner"></div>
</div>
</div>
document.querySelectorAll("#my-id div div").length === 1; ----> <div class="inner"></div>
document.querySelector("#my-id").querySelectorAll("div div").length === 3; ----> <div class="lonely"> <div class="outer"></div> <div class="inner"></div>
find：$(element).find(args); $(element)和args都可以是数组，这里主要介绍一下Array.filter和emptyArray.some,
/* 在当前集合中查找selector，selector可以是集合，选择器，以及节点 */ find: function(selector){ var result, $this = this //如果selector为node或者zepto集合时 if (!selector) result = $() //遍历selector，筛选出父级为集合中记录的selector else if (typeof selector == 'object') result = $(selector).filter(function(){ var node = this //如果$.contains(parent, node)返回true，则emptyArray.some也会返回true,外层的filter则会收录该条记录 //Array.some 如果有一个为true，则整体返回为true return emptyArray.some.call($this, function(parent){ return $.contains(parent, node) }) }); //如果selector是css选择器 //如果当前集合长度为1时，调用zepto.qsa，将结果转成zepto对象 else if (this.length == 1) result = $(zepto.qsa(this[0], selector)) //如果长度大于1，则调用map遍历 else result = this.map(function(){ return zepto.qsa(this, selector) }) return result },
Array.filter(function(value){return true}) 将不符合条件的数组元素过滤掉，Array.some(function(){return true}) ,用来检查数组中是否
有满足条件的元素，如果有则返回true，find函数会先处理selector为对象和数组的情况，然后在处理为css选择器的情况。
本文主要介绍zepto的整体流程和初始化操作以及查询选择DOM的具体过程，下一篇具体介绍$()通过zepto.init使如何运作的
