非常适合新手的jq/zepto源码分析03

 

        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    我的博客，来看吧！

如果有错误，请留言修改下 哦！