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使如何运作的