zoukankan      html  css  js  c++  java
  • jQuery 2.0.3 源码分析core

    jQuery 2.0.3 源码分析core - 选择器

      声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!

         打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器!

    工欲善其事,必先利其器,所以先从正则入手

    我们来分解一个表达式

    // A simple way to check for HTML strings
    // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
    // Strict HTML recognition (#11290: must start with <)
         rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,

    作者的解释呢很简单,一个简单的检测HTML字符串的表达式

    分解:

    1. 通过选择|分割二义,匹配^开头或者$结尾

    • ^(?:s*(<[wW]+>)[^>]*
    • #([w-]*))$

    2. ^(?:s*(<[wW]+>)[^>]*

    • (?:pattern) : 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用
    • s* : 匹配任何空白字符,包括空格、制表符、换页符等等 零次或多次 等价于{0,}
    • (pattern) : 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,使用 $0$9 属性
    • [wW]+ : 匹配于'[A-Za-z0-9_]'或[^A-Za-z0-9_]' 一次或多次, 等价{1,}
    • (<[wW]+>) :这个表示字符串里要包含用<>包含的字符,例如<p>,<div>等等都是符合要求的
    • [^>]* : 负值字符集合,字符串尾部是除了>的任意字符或者没有字符,零次或多次等价于{0,},

    3. #([w-]*))$

    • 匹配结尾带上#号的任意字符,包括下划线与-

    4. 还要穿插一下exec方法

    • 如果执行exec方法的正则表达式没有分组(没有括号括起来的内容),那么如果有匹配,他将返回一个只有一个元素的数组,这个数组唯一的元素就是该正则表达式匹配的第一个串;如果没有匹配则返回null。
    • exec如果找到了匹配,而且包含分组的话,返回的数组将包含多个元素,第一个元素是找到的匹配,之后的元素依次为该匹配中的第一、第二...个分组(反向引用)

    所以综合起来呢大概的意思就是:匹配HTML标记和ID表达式(<前面可以匹配任何空白字符,包括空格、制表符、换页符等等)


    简单测试下:

    var str = ' <div id=top></div>';
    var match = rquickExpr.exec(str);
    console.log(match)
    //[" <div id=top></div>", "<div id=top></div>", undefined, index: 0, input: " <div id=top></div>"]
    var str = '[?f
    
    	v]<div id=top></div>'; 
    var str = '#test';
    var match = rquickExpr.exec(str);
    console.log(match)
    //["#test", undefined, "test", index: 0, input: "#test"]

    jQuery选择器接口

    API

    image

    jQuery是总入口,选择器支持9种方式的处理

    复制代码
    1.$(document)   
    2.$(‘<div>’) 
    3.$(‘div’) 
    4.$(‘#test’) 
    5.$(function(){}) 
    6.$("input:radio", document.forms[0]); 
    7.$(‘input’, $(‘div’)) 
    8.$() 
    9.$("<div>", { 
             "class": "test", 
             text: "Click me!", 
             click: function(){ $(this).toggleClass("test"); } 
          }).appendTo("body"); 
    10$($(‘.test’))
    复制代码

    jQuery这个选择器重构了几次后,现在逻辑结构相当的清晰了,一看大概就知道

    不能不得说jQuery的反模式,非职责单一深受开发者喜欢,一个接口承载的职责越多内部处理就越复杂了

    jQuery查询的的对象是dom元素,查询到目标元素后,如何存储?

    • 查询的到结果储存到jQuery对象内部,由于查询的dom可能是单一元素,也可能是合集
    • jQuery内部应该要定义一个合集数组,用于存在选择后的dom元素,
    • 当然啦,根据API,jQuery构建的不仅仅只是DOM元素,还有HTML字符串,Object,[] 等等…

    本质上讲jQuery.fn.init构建的出来的对象,就是jQuery对象

    复制代码
    init: function( selector, context, rootjQuery ) {
                var match, elem;
    
                // HANDLE: $(""), $(null), $(undefined), $(false)
                if ( !selector ) {
                    return this;
                }
    
                // Handle HTML strings
                if ( typeof selector === "string" ) {
                    // HANDLE: $(DOMElement)
                } else if ( selector.nodeType ) {
                    // HANDLE: $(function)
                    // Shortcut for document ready
                } else if ( jQuery.isFunction( selector ) ) {
                    return rootjQuery.ready( selector );
                }
    
                if ( selector.selector !== undefined ) {
                    this.selector = selector.selector;
                    this.context = selector.context;
                }
    
                return jQuery.makeArray( selector, this );
            },
    复制代码

    源码缩进后的结构:

    • 处理"",null,undefined,false,返回this ,增加程序的健壮性
    • 处理字符串
    • 处理DOMElement,返回修改过后的this,给this添加了
    • 处理$(function(){})

    匹配模式一:$("#id")

    1. 进入字符串处理 

    if ( typeof selector === "string" ) {

    2. 发现不是 "<"开始,">"结尾 $('<p id="test">My <em>new</em> text</p>')这种的情况

       如果selector是html标签组成的话,直接match = [ null, selector, null ];

       而不用正则检查

    if (selector.charAt(0) === "<" && selector.charAt(selector.length - 1) === ">" && selector.length >= 3) {

    3. 否则的话需要match = rquickExpr.exec( selector )

    match = rquickExpr.exec( selector );

    4. 匹配的html或确保没有上下文指定为# id

    if ( match && (match[1] || !context) ) {

    5. match[1]存在,处理$(html) -> $(array),,也就是处理的是html方式

    if ( match[1] ) {

    6. 处理ID

    复制代码
    elem = document.getElementById( match[2] );
    
    // Check parentNode to catch when Blackberry 4.6 returns
    // nodes that are no longer in the document #6963
    if ( elem && elem.parentNode ) {
        // Inject the element directly into the jQuery object
        this.length = 1;
        this[0] = elem;
    }
    
    this.context = document;
    this.selector = selector;
    return this;
    复制代码

    至此本次检索完毕!

    可以看到

    this就是jQuery工厂化后返回的对象

    • this.length    
    • this[0] = elem
    • this.context = document;
    • this.selector = selector;

    image


    匹配模式二:<htmltag>

    重复的地方跳过直接看处理接口

    复制代码
    if ( match && (match[1] || !context) ) {
        // HANDLE: $(html) -> $(array)
        if ( match[1] ) {
            context = context instanceof jQuery ? context[0] : context;
            // scripts is true for back-compat
            jQuery.merge( this, jQuery.parseHTML(
                match[1],
                context && context.nodeType ? context.ownerDocument || context : document,
                true
            ) );
            // HANDLE: $(html, props)
            if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                for ( match in context ) {
                    // Properties of context are called as methods if possible
                    if ( jQuery.isFunction( this[ match ] ) ) {
                        this[ match ]( context[ match ] );
                        // ...and otherwise set as attributes
                    } else {
                        this.attr( match, context[ match ] );
                    }
                }
            }
            return this;
            // HANDLE: $(#id)
        } else {
    复制代码

    传入上下文:

    context && context.nodeType ? context.ownerDocument || context : document

    ownerDocument和 documentElement的区别

    • ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对象
    • documentElement是Document对象的属性,返回的是文档根节点
    • 对于HTML文档来说,documentElement是<html>标签对应的Element对象,ownerDocument是document对象

    具体请看API手册

    jQuery.merge( first, second ) 合并两个数组内容到第一个数组。

    jQuery.parseHTML

    使用原生的DOM元素的创建函数将字符串转换为一组DOM元素,然后,可以插入到文档中。

    str = "hello, <b>my name is</b> jQuery.",
    html = $.parseHTML( str ),

    image

    源码:

    复制代码
    parseHTML: function( data, context, keepScripts ) {
        if ( !data || typeof data !== "string" ) {
            return null;
        }
        if ( typeof context === "boolean" ) {
            keepScripts = context;
            context = false;
        }
        context = context || document;
        var parsed = rsingleTag.exec( data ),
            scripts = !keepScripts && [];
        // Single tag
        if ( parsed ) {
            return [ context.createElement( parsed[1] ) ];
        }
        parsed = jQuery.buildFragment( [ data ], context, scripts );
        if ( scripts ) {
            jQuery( scripts ).remove();
        }
        return jQuery.merge( [], parsed.childNodes );
    },
    复制代码

    匹配一个独立的标签

    rsingleTag = /^<(w+)s*/?>(?:</1>|)$/,
    • ^<(w+)s*/?>  : 以<开头,至少跟着一个字符和任意个空白字符,之后出现0或1次/>
    • (?:</1>|)$        : 可以匹配<、一个/或者空白并以之为结尾

          这样如果没有任何属性和子节点的字符串(比如'<html></html>'或者'<div></div>'这样)会通过正则的匹配,当通过正则的匹配后则会通过传入的上下文直接创建一个节点:

    只是单一的标签:

    if ( parsed ) {
            return [ context.createElement( parsed[1] ) ];
     }

    而未通过节点的字符串,则通过创建一个div节点,将字符串置入div的innerHTML:

    parsed = jQuery.buildFragment( [ data ], context, scripts );

    它会把传入的复杂的html转为文档碎片并且存储在jQuery.fragments这个对象里。这里要提一下,document.createDocumentFragment()是相当好用的,可以减少对dom的操作.

    创建一个文档碎片DocumentFragment

    • 如果要插入多个DOM元素,可以先将这些DOM元素插入一个文档碎片,然后将文档碎片插入文档中,这时插入的不是文档碎片,而是它的子孙节点;相比于挨个插入DOM元素,使用文档碎片可以获得2-3倍的性能提升;
    • 如果将重复的HTML代码转换为DOM元素,可以将转换后的DOM元素缓存起来,下次(实际是第3次)转换同样的HTML代码时,可以直接缓存的DOM元素克隆返

    当一个HTML比一个没有属性的简单标签复杂的时候,实际上,创建元素的处理是利用了浏览器的innerHTML 机制。

    复制代码
    1 tmp = tmp || fragment.appendChild( context.createElement("div") );
    2 
    3 // Deserialize a standard representation
    4 tag = ( rtagName.exec( elem ) || ["", ""] )[ 1 ].toLowerCase();
    5 wrap = wrapMap[ tag ] || wrapMap._default;
    6 tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];
    复制代码
    • 特别说明,jQuery创建一个新的<div>元素,并且设置innerHTML属性为传入的HTML代码片段。当参数是一个单标签,就像 $('<img />') or $('<a></a>'),jQuery将使用javasrcipt原生的 createElement()函数创建这个元素。
    • 当传入一个复杂的html,一些浏览器可能不会产生一个完全复制HTML源代码所提供的DOM。正如前面提到的,jQuery使用的浏览器.innerHTML属性来解析传递的HTML并将其插入到当前文档中。在此过程中,一些浏览器过滤掉某些元素,如<html><title>, 或 <head>的元素。其结果是,被插入元素可能不是传入的原始的字符串。
    • 不过,这些被过滤掉的标签有限的。有些浏览器可能不完全复制所提供的HTML源代码生成DOM。例如,Internet Explorer的版本8之前转换所有链接的href属性为绝对URL路径,和Internet Explorer第9版之前,不增加一个单独的兼容层的情况下,将无法正确处理HTML5元素。
    • 为了确保跨平台的兼容性,代码片段必须是良好的。标签可以包含其他元素,但需要搭配的结束标记

     如果第一个参数(HTML字符串)为一个空的单标签,且第二个参数context为一个非空纯对象

    var jqHTML = $('<div></div>', { class: 'css-class', data-name: 'data-val' });
     
    console.log(jqHTML.attr['class']); //css-class
    console.log(jqHTML.attr['data-name']); //data-val

    匹配模式三:$(.className)

    如果第一个参数是一个.className,jQuery对象中拥有class名为className的标签元素,并增加一个属性值为参数字符串、document的selector、context属性

    return jQuery(document).find(className);

      

    匹配模式四:$(.className, context)

    如果第一个参数是.className,第二个参数是一个上下文对象(可以是.className(等同于处理$(.className .className)),jQuery对象或dom节点), 
    jQuery对象包含第二个参数上下文对象中拥有class名为className的后代节点元素,并增加一个context和selector属性

    return jQuery(context).find(className); 

    匹配模式五:$(jQuery对象)

    如果第一个参数是jQuery对象,上面已经分析过如果在查询dom时,参数是一个#加元素id,返回的jQuery对象会增加一个属性值为参数字符串、document的selector、context属性

    var jq = $('#container'); 
    console.log(jq.selector); // #container 
    console.log(jq.context); // document 

    那么当出现$($('#container'))该如何处理呢?同样的,返回的jQuery对象同情况

    var jq2 = $($('#container')); 
    console.log(jq2.selector); // #container 
    console.log(jq2.context); // document 

    等等..................


    jQuery 构造器

         由此可见,从本质上来说,构建的jQuery对象,其实不仅仅只是dom,还有很多附加的元素,用数组的方式存储,当然各种组合有不一样,但是存储的方式是一样的

    总的来说分2大类:

    • 单个DOM元素,如$(ID),直接把DOM元素作数组传递给this对象
    • 多个DOM元素,集合形式,可以通过CSS选择器匹配是有的DOM元素,过滤操作,构建数据结构

    CSS选择器是通过jQuery.find(selector)函数完成的,通过它可以分析选择器字符串,并在DOM文档树中查找符合语法的元素集合

    选择器这章有点乱,东西太多了,不能一一陈列 , 后期在慢慢整理

     
     
    分类: javascriptjQuery
  • 相关阅读:
    Java再学习——栈(stack)和堆(heap)
    Java再学习——深究static关键字
    毕业设计进度:3月4日
    毕业设计进度:3月3日
    可视化组件:echarts柱状图添加点击事件
    毕业设计进度:2月29日
    毕业设计进度:2月28日
    毕业设计进度:2月27日
    毕业设计进度:2月26日
    毕业设计进度:2月25日
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3283833.html
Copyright © 2011-2022 走看看