zepto源码学习-03 $()

在第一篇的时候提到过关于$()的用法，一个接口有很多重载，用法有很多种，总结了下，大概有一以下几种

　　1、$(selector,context?) 传入一个选择器返回一个zepto对象

　　2、$(function(){}) 传入一个函数，dom ready时执行

　　3、$(html，attrs?) 传入一个html字符串，构建元素，返回一个或zepto对象

　　4、$(dom obj)传入dom对象返回zepto对象

$()最终调用的zepto.init方法，对以上四种情况做相应处理，该方法有6个return，内部有六中情况，虽然是六种返回的情况，但是里面具体的处理更复杂一点。

　　1、return zepto.Z()，返回一个空的zepto对象：

　　2、return $(context).find(selector)

　　3、return $(document).ready(selector)

　　4、if (zepto.isZ(selector)) return selector

　　5、return $(context).find(selector)

　　6、return zepto.Z(dom, selector)

先看一个demo，都是$的相关用法

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <meta content="telephone=no" name="format-detection">

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="description" content="">

    <meta name="keywords" content="">

</head>

<body>

    <h1 id='test'>test</h1>

    <ul id='items'>

        <li>List item 1 <span class='delete'>DELETE</span></li>

        <li>List item 2 <span class='delete'>DELETE</span></li>

    </ul>

    <div id='block'></div>

    <div id='block2'></div>

    <script type="text/javascript" src="../zepto-full-1.1.6.js"></script>

    <script>

        //1 传入选择器

        var d1=$('div');  //=> 所有页面中得div元素

        var d2=$('#test'); //=> ID 为 "test" 的元素

        var d3=$('div:first');  //=> 所有页面中第一个div元素

        // 创建元素:

        var p1=$("<p>Hello</p>"); //=> 新的p元素

        // 创建带有属性的元素:

        var p2=$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} });

        //=> <p id=greeting style="color:darkblue">Hello</p>

        //传入原生dom对象 或者zepto对象

        var items=document.getElementById('items');

        // 传入原生dom对象

        var $items=$(items);

        //传入zepto实例对象

        var $$items=$($items);

        // 当页面ready的时候，执行回调:

        $(function($){

            alert('Ready to Zepto!')

        })

        console.log(d1);

        console.log(d2)

        console.log(d3)

        console.log(p1)

        console.log(p2)

        console.log(items)

        console.log($items)

        console.log($$items)

    </script>

</body>

</html>

$(选择器)元素查找

//1 传入选择器
var d1=$('div'); //=> 所有页面中得div元素
var d2=$('#test'); //=> ID 为 "test" 的元素
var d3=$('div:first'); //=> 页面中第一个div元素

以上情况全都是没有指定context，d1、d2最终都是在这里处理dom = zepto.qsa(document, selector) ，然后最后执行 return zepto.Z(dom, selector)。zepto.Z的实现之前已经分析过了，所以只需要分析下zepto.qsa(document, selector)的实现。

zepto默认没有添加selector模块，selector模块有限提供了支持几个最常用的伪选择器，而且可以被丢弃，与现有的代码或插件的兼容执行。d3的写法必须要有selector模块的支持。

如果我们把selector加进来的话，zepto.qsa的实现又稍有不一样，我们这里分析最原始的 zepto.qsa

补习基础，先看下nodetype

最初的qsa实现

zepto.qsa 方法相对简单，就是做一些判断，然后根据判断最后调用相应的方法，目的是提高性能。使用getElementById、getElementsByClassName、getElementsByTagName这些方法比querySelectorAll性能要好（我没测试，推测的，如果性能一样何必话力气去做相关判断）。作者为了减少if else 嵌套，大量使用三元表达式，看起来怪怪的，不过习惯了就好。

现在分析var d3=$('div:first'); //=> 所有页面中第一个div元素

这样使用必须加如selector模块，不然浏览器会报错，如下

报错就是说div:first 不是一个有效的选择器，因为这个需要selector模块的支持，如果加入了selector模块，在selector里面重写了qsa和matches，selector源码如下。

;

(function($) {

    var zepto = $.zepto,

        //存储以前的zepto.qsa

        oldQsa = zepto.qsa,

        //存储以前的 zepto.matches

        oldMatches = zepto.matches

    function visible(elem) {

        elem = $(elem)

        return !!(elem.width() || elem.height()) && elem.css("display") !== "none"

    }

    // Implements a subset from:

    // http://api.jquery.com/category/selectors/jquery-selector-extensions/

    //

    // Each filter function receives the current index, all nodes in the

    // considered set, and a value if there were parentheses. The value

    // of `this` is the node currently being considered. The function returns the

    // resulting node(s), null, or undefined.

    //

    // Complex selectors are not supported:

    //   li:has(label:contains("foo")) + li:has(label:contains("bar"))

    //   ul.inner:first > li

    var filters = $.expr[':'] = {

        visible: function() {

            if (visible(this)) return this

        },

        hidden: function() {

            if (!visible(this)) return this

        },

        selected: function() {

            if (this.selected) return this

        },

        checked: function() {

            if (this.checked) return this

        },

        parent: function() {

            return this.parentNode

        },

        first: function(idx) {

            if (idx === 0) return this

        },

        last: function(idx, nodes) {

            if (idx === nodes.length - 1) return this

        },

        eq: function(idx, _, value) {

            if (idx === value) return this

        },

        contains: function(idx, _, text) {

            if ($(this).text().indexOf(text) > -1) return this

        },

        has: function(idx, _, sel) {

            if (zepto.qsa(this, sel).length) return this

        }

    }

    var filterRe = new RegExp('(.*):(\\w+)(?:\\(([^)]+)\\))?$\\s*'),

        childRe = /^\s*>/,

        classTag = 'Zepto' + (+new Date())

    function process(sel, fn) {

        // quote the hash in `a[href^=#]` expression

        // 把# 加上引号

        sel = sel.replace(/=#\]/g, '="#"]')

            //$('div:first')=====>["div:first", "div", "first", undefined]

            //$('div:eq(0)')=====>["div:eq(0)", "div", "eq", "0"]

        var filter, arg, match = filterRe.exec(sel)

            //匹配到的伪类选择必须是filters中有的visible、hidden、selected、checked、parent、first、last、eq、contains、has

        if (match && match[2] in filters) {

            //取出对应的处理函数

            filter = filters[match[2]],

                //数组的地四个元素，其实就是元素索引值，eq的时候会有

                arg = match[3]

                //第一个值

            sel = match[1]

                //取得eq(num) 里面的num

            if (arg) {

                var num = Number(arg)

                if (isNaN(num)) arg = arg.replace(/^["']|["']$/g, '')

                else arg = num

            }

        }

        //调用fn 传入选择器、filter、和索引值

        return fn(sel, filter, arg)

    }

    zepto.qsa = function(node, selector) {

        //直接调用process 然后返回

        return process(selector, function(sel, filter, arg) {

            try {

                var taggedParent

                    //如果没有传入selector 又有filter 此时设置sel=*

                if (!sel && filter) sel = '*'

                else if (childRe.test(sel))

                // support "> *" child queries by tagging the parent node with a

                // unique class and prepending that classname onto the selector

                //给node添加一个class， sel=随即字符串加上之前的slector，最后再当前node下面去寻找对应的元素

                    taggedParent = $(node).addClass(classTag), sel = '.' + classTag + ' ' + sel

                //调用以前的zepto.qsa 查找对应元素，这里var，是因为js没有块级作用域

                var nodes = oldQsa(node, sel)

            } catch (e) {

                console.error('error performing selector: %o', selector)

                throw e

            } finally {

                //去掉taggedParent之前添加的class

                if (taggedParent) taggedParent.removeClass(classTag)

            }

            //是否有filter，如果有就过滤查找到的nodes节点

            /*

            *

            * 先调用$.map方法，过滤nodes

            *

            $.map([1,2,3,4,5],function(item,index){

                    if(item>1) return item*item;

            });    // =>[4, 9, 16, 25]

            //得到经过filter函数过滤后的节点集合，再次调用zepto.uniq去掉重复的元素

            zepto.uniq=return emptyArray.filter.call(array, function(item, idx) {

                return array.indexOf(item) == idx

            })

             */

            return !filter ? nodes :

                zepto.uniq($.map(nodes, function(n, i) {

                    //调用filter,传入item、index、nodes、索引值

                    return filter.call(n, i, nodes, arg)

                }))

        })

    }

    zepto.matches = function(node, selector) {

        return process(selector, function(sel, filter, arg) {

            return (!sel || oldMatches(node, sel)) &&

                (!filter || filter.call(node, null, arg) === node)

        })

    }

})(Zepto);

关于选择器基本上没什么难的，selector的代码相对简单，涉及一些正则，js没有块级作用域。

说完了元素查找，接下来看看元素创建

// 创建元素:

var p1=$("<p>Hello</p>"); //=> 新的p元素

// 创建带有属性的元素:

var p2=$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} });

//=> <p id=greeting style="color:darkblue">Hello</p>

查看源码，这种情况最后都是调用以下方法处理的

if (selector[0] == '<' && fragmentRE.test(selector))

                dom = zepto.fragment(selector, RegExp.$1, context), selector = null

else if (fragmentRE.test(selector))

                dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null

可见最后都是调用zepto.fragment这个方法，第一个参数传入html字符串，第二个参数为寻找到的name，第三个是上下文

//标签及html注释的正则
fragmentRE = /^\s*<(\w+|!)[^>]*>/; 传入的第二个参数RegExp.$1，RegExp.$1应该是取得最近一次匹配的标签，其实就是找到的name，比如：div、p、span…………

fragment的具体实现如下：

zepto.fragment = function(html, name, properties) {

        var dom, nodes, container

        // A special case optimization for a single tag

        // 如果只是单个标签

        if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

        //dom没有被赋值，不是单个标签

        if (!dom) {

            ////将类似<div class="test"/>替换成<div class="test"></div>  对标签进行修复

            if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")

            //外面没有传name这里指定name

            if (name === undefined) name = fragmentRE.test(html) && RegExp.$1

            //设置容器标签名，如果不是tr,tbody,thead,tfoot,td,th，则容器标签名为div

            if (!(name in containers)) name = '*'

            //取到对应的容器

            container = containers[name]

            //将html代码片断放入容器

            container.innerHTML = '' + html

            //取容器的子节点，这样就直接把字符串转成DOM节点了。

            //先取到容器的子节点，再转换为数组，然后在挨个从容器中移除，最后返回节点数组

            dom = $.each(slice.call(container.childNodes), function() {

                container.removeChild(this)

            })

        }

        //后面有设置相关属性、 则将其当作属性来给添加进来的节点进行设置

        if (isPlainObject(properties)) {

            nodes = $(dom)//将dom转成zepto对象，为了方便下面调用zepto上的方法

            //遍历对象，设置属性

            $.each(properties, function(key, value) {

                //如果设置的是'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'，则调用zepto上相对应的方法

                if (methodAttributes.indexOf(key) > -1) nodes[key](value)

                else nodes.attr(key, value)

            })

        }

        return dom

    }

$(dom对象)、$(zepto对象)

这两种情况的处理相对简单，不说了,之前分析zepto.init的实现有说到

$(function)

这个就是我们经常使用的dom ready，在zepto.init中最后都是 $(document).ready(selector)。这句话的意思是先创建一个zepto实例对象，然后调用其ready方法，所以我们只需要找到$.fn.ready的实现即可。

        ready: function(callback) {

            // need to check if document.body exists for IE as that browser reports

            // document ready when it hasn't yet created the body element

            if (readyRE.test(document.readyState) && document.body) callback($)

            else document.addEventListener('DOMContentLoaded', function() {

                callback($)

            }, false)

            return this

        },

最终发现这个实现很简单，几乎没有要说的。JQuery的ready依赖了Deferred相对复杂点。

最后再说$(selector,context)指定上下文对象，zepto.init方法里面的处理都是$(context).find(selector)。所以我们只需要查看$.fn.find方法即可

find: function(selector) {

            var result, $this = this

            if (!selector) result = $()

            else if (typeof selector == 'object')

                //找到所有符合selector的元素，然后在过滤

                result = $(selector).filter(function() {

                    var node = this

                    return emptyArray.some.call($this, function(parent) {

                        //是mode的子节点

                        return $.contains(parent, node)

                    })

                })

                //this只有一个元素

            else if (this.length == 1) result = $(zepto.qsa(this[0], selector))

                //this包含多个节点对象，挨个查找每个元素下面符合selector的元素

            else result = this.map(function() {

                return zepto.qsa(this, selector)

            })

            return result

        },

到此基本上$(XXXX)的实现已经分析得差不多了，我一边看实现一边写笔记，不是先看完了再写的。

本文地址：http://www.cnblogs.com/Bond/p/4201787.html