zepto.fragment = function(html, name, properties) {
var dom, nodes, container
// 如果是简单的标签<div></div> <p/> $1 = div / p
// 创建节点
if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))
// 不存在,即不是简单的标签
if (!dom) {
if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")
if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
if (!(name in containers)) name = '*'
container = containers[name]
container.innerHTML = '' + html
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
}
我们从入口开始吧 $ 函数就是执行了 zepto的init()函数
$ = function(selector, context){
return zepto.init(selector, context)
}
zepto.init = function(selector, context) {
var dom
// 返回一个空的 Z实例
if (!selector) return zepto.Z()
// 字符串
else if (typeof selector == 'string') {
selector = selector.trim()
// 如果是标签字符串,创建节点框架,返回一个节点数组
if (selector[0] == '<' && fragmentRE.test(selector))
dom = zepto.fragment(selector, RegExp.$1, context), selector = null
// 如果存在context 在上下文中查找 selector
else if (context !== undefined) return $(context).find(selector)
// 不存在 上下文context 在document上选择
else dom = zepto.qsa(document, selector)
}
// 如果是fn 直接调用ready函数
else if (isFunction(selector)) return $(document).ready(selector)
// 如果是Z实例 ,直接返回实例selector
else if (zepto.isZ(selector)) return selector
else {
// 给定的节点数组
if (isArray(selector)) dom = compact(selector)
// 单个节点,转为数组
else if (isObject(selector))
dom = [selector], selector = null
// If it's a html fragment, create nodes from it
else if (fragmentRE.test(selector))
dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
// If there's a context, create a collection on that context first, and select
// nodes from there
else if (context !== undefined) return $(context).find(selector)
// And last but no least, if it's a CSS selector, use it to select nodes.
else dom = zepto.qsa(document, selector)
}
// 实例化节点集合
return zepto.Z(dom, selector)
}
selector 几种形式:
没有 返回一个dom类数组list
string 如果是选择器,直接返回dom的list对象
function 直接执行$(document).ready()函数
如果是Z实例 直接返回selector
array 对象数组,直接返回dom的list对象
object 返回单个dom对象
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
每次使用 $ 符都会创建一个 节点集合实例
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 || ''
}
创建节点集合类 dom为节点数组
代码仅供参考,具体功能可以自己扩展。
http://www.cnblogs.com/jiebba/p/6529854.html
http://www.cnblogs.com/jiebba 我的博客,来看吧!
如果有错误,请留言修改下 哦!