读zepto核心源码学习JS笔记(3)--zepto.init()
上篇已经讲解了zepto.init()的几种情况,这篇就继续记录这几种情况下的具体分析.
1. 首先是第一种情况,selector为空
既然是反向分析,那我们先看看这句话的代码;
if (!selector) return zepto.Z()
这里的返回值为zepto.Z();那我们继续往上找zepto.Z()函数
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
这个函数仍然拥有一个返回值,Z函数的实例,同样的道理,我们继续去找Z() ;
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 || ''
}
根据以上代码可以分析出,当没有参数时,会得到一个length:0,selector:''的对象.
2. 当selector为字符串的时候,又分为三种情况;
同样的,我们先看看这句话的代码
else if (typeof selector == 'string') {
selector = selector.trim()
}
- 第一种,当selector为html片段
if (selector[0] == '<' && fragmentRE.test(selector))
dom = zepto.fragment(selector, RegExp.$1, context), selector = null
这里有两个知识点:
1 fragmentRE.test(selector)
这里的fragmentRE是Zepto函数在之前定义的一段正则;
```java
//<div>erfwef</div> 取出<div>
fragmentRE = /^\s*<(\w+|!)[^>]*>/,
```
2 zepto.fragment(selector, RegExp.$1, context)
* RegExp.$1
RegExp.$1为RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串;
例子:
java var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; r.exec('1985-10-15'); s1=RegExp.$1; s2=RegExp.$2; s3=RegExp.$3; alert(s1+" "+s2+" "+s3)//结果为1985 10 15
* zepto.fragment()函数
```java
//对应上面的代码,这里第一个参数是selector,就是我们在写代码时的$('xxx')中的xxx,name为RegExp.$1,即正则匹配的第一个()里的东西,就是标签元素,例如 div p h1等,properties为执行环境.
zepto.fragment = function(html, name, properties) {
var dom, nodes, container
// singleTagRE仍为之前定义的变量,singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/, 匹配值如下截图
//如html传入值为<p></p>,匹配singleTagRE,则创建<p></p>,并调用$('<p></p>')
if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))
//如果不匹配
if (!dom) {
//这是一段修复代码,将<div/>之类的不正常的代码修复成<div></div>;具体的下面再讲解
if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")
//如果没有标签名,,给他一个标签,fragmentRE = /^\s*<(\w+|!)[^>]*>/,
if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
//containers = {tr': document.createElement('tbody'),tbody': table, 'thead': table, 'tfoot': table,td': tableRow, 'th': tableRow,'*': document.createElement('div')},
//如果name值不在container范围内,则标签名为div
if (!(name in containers)) name = '*'
//创建容器
container = containers[name]
//把html片段放入到容器中
container.innerHTML = '' + html
//这里调用了$.each();一会再详细讲解,这里是涉及到哪个函数我就去解析哪个函数,虽然看起来比较乱,但是符合我自己的逻辑线路.
//emptyArray = [], slice = emptyArray.slice,所以这里的slice.call即为Array.prototype.slice.call(),能将具有length属性的对象转成数组;
dom = $.each(slice.call(container.childNodes), function(){
//删除
container.removeChild(this)
})
}
if (isPlainObject(properties)) {
nodes = $(dom)
$.each(properties, function(key, value) {
if (methodAttributes.indexOf(key) > -1) nodes[key](value)
else nodes.attr(key, value)
})
}
return dom
}
```
以上代码出现了singleTagRE
- singleTagRE
- tagExpanderRE
- fragmentRE
- 第二种 当context有值
else if (context !== undefined) return $(context).find(selector)
这里涉及到一个方法find,是$.fn中的方法,之后做统一分析;
- 第三种 selector为普通选择器
else dom = zepto.qsa(document, selector)
zepto.qsa = function(element, selector){
var found,
//判断是不是ID
maybeID = selector[0] == '#',
//判断是不是css
maybeClass = !maybeID && selector[0] == '.',
//看是不是class和id名,如果是,将'#'或者'.'去除,然后赋值给nameOnlt;
//否则,直接将值赋值;
nameOnly = maybeID || maybeClass ? selector.slice(1) : selector,
//simpleSelectorRE = /^[\w-]*$/,
//匹配字母数字下划线和减号的组合;
isSimple = simpleSelectorRE.test(nameOnly)
//如果有内置getElementById方法,并且是id名;
return (element.getElementById && isSimple && maybeID) ?
//则返回element.getElementByID(nameOnly)
( (found = element.getElementById(nameOnly)) ? [found] : [] ) :
//反之的话,再做一次判断
//若element不为元素节点,document,DocumentFragment时;为空,
(element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] :
//否则,将节点转换成数组;
slice.call(
//这里是一个三元运算符里套着另一个三元运算符;
isSimple && !maybeID && element.getElementsByClassName ?
//当为class,则调用element.getElementsByClassName(nameOnly)
maybeClass ? element.getElementsByClassName(nameOnly) :
//否则调用tagName;
element.getElementsByTagName(selector) :
//这个否则是最外层的判断;
element.querySelectorAll(selector)
)
}
3. 当传入的值为函数时,则在dom加载后执行它;
else if (isFunction(selector)) return $(document).ready(selector)
4. 如果selector为Z的实例对象.则返回他自己;
else if (zepto.isZ(selector)) return selector
5. 最后,又分为5种情况;
-
如果selector为数组;
// if (isArray(selector)) dom = compact(selector)这里用到了一个compact方法;
//这里调用了一个filter方法,是在$.fn内,以后统一分析; //这个函数是去除数组中的null和undefined; function compact(array) { return filter.call(array, function(item){ return item != null }) }所以当为数组的时候,去除数组中的null和undefined;
-
selector为对象
else if (isObject(selector)) dom = [selector], selector = null如果selector为对象,将对象变为一个数组;
-
selector为html片段;则将其转换成dom
else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null -
有context的时候
else if (context !== undefined) return $(context).find(selector) -
没有context
else dom = zepto.qsa(document, selector)
