声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制 网上基本没有资料细说这个东东的,sizzle引入这个实现主要的作用是分词的筛选,提高逐个匹配的效率 我们不直接看代码的实现,通过简单的实现描述下原理: 以下是个人的理解,如果有错误欢迎指出! Javascript有预编译与我们说的编译函数是不同的概念 什么是JavaScript的“预编译”? function Aaron() { alert("he

最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦.有没有吹牛?是不是我说大话了? 什么是Sizzle引擎? 我们经常使用JQuery的选择器查询元素,查询的选择器有简单也有复杂:    简单点:“div”.“.navi”.“div.navi”. 复杂点:"div input[type='checkbox']"."div.navi + .section p". Query实现查询时也是优先使用DOM标准查询函数,

JQuery安全分析: JQuery的风险均来源于对输入的数据没有进行有效性检验.客户端的Javascript需要检验:来源于服务器的数据.来源于当前页面的用户输入,服务器端需要检验来源于用户端的数据. JQUERY的下列方法存在XSS的风险,在使用前应该对输入的内容进行编码或检查 .html(val) $("#MyH").html("as>/" <img src=abc.jpg onerror='alert(0);'>alert('s');&qu

转载 https://www.cnblogs.com/cndotabestdota/p/5664112.html +function ($) { "use strict";}(window.jQuery);全面分析   +function ($) { "use strict"; }(window.jQuery); 怎么理解? 匿名函数闭包 我们先来理一理函数表达式和函数声明的区别 函数表达式: 函数可以是匿名函数,也可以有函数名,但是这种函数无法直接使用,只有通过表

原文: https://segmentfault.com/a/1190000003933990 ----------------------------------------------------------------------- 说明:14年学习的jquery源码,搬到这里供大家交流. 一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍.S

词法分析器(tokenize)? 词法分析器又称扫描器.词法分析是指将我们编写的文本代码流解析为一个一个的记号,分析得到的记号以供后续语法分析使用. sizzle引入了tokenize这个概念,意义? jQuery的选择器,实现了css1-css3的API,但是ECMAScript低版本的API中本身没有针对这种CSS的处理API,在IE8以上就引入了querySelectorAll 各种浏览器实现还有差异,这里不是主题,我们看如果是低版本的接口要如果处理复杂的CSS选择器 首先面临的就是要对复

querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. 万能的sizzle在高版本的浏览器中复杂的选择器尽量走querySelectorAll,前提是这个匹配的节点没有兼容问题 从IE8开始虽然支持querySelectorAll的API,但是会有各式各样的BUG,所以sizzle拿rbuggyQSA用来记录这个BUG问题 if ( supp

源码部分 通过Sizzle.attr匹配出值 然后通过表达式刷选计算 "ATTR": function( name, operator, check ) { return function( elem ) { var result = Sizzle.attr( elem, name ); if ( result == null ) { return operator === "!="; } if ( !operator ) { return true; } resu

<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <div name="newsletter" /><p>1<p</div> <div name="letter" /><p nam

可见性 :hidden :visible 隐藏对象没有宽高,前提是用display:none处理的 jQuery.expr.filters.hidden = function( elem ) { // Support: Opera <= 12.12 // Opera reports offsetWidths and offsetHeights less than zero on some elements return elem.offsetWidth <= 0 && elem

我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefined){ })(window) 这是个什么东西.. 首先,这是一个匿名函数(不懂?那就先去谷歌下吧): 其次,这是一个自调用匿名函数: 这段代码做了三件事 第一件:创建一个只给jQuery用的空间,我们估且就叫 “私有空间”,与C++的命名空间很相似,为了保证jQuery不与其他JavaScrip

自己开始尝试读Sizzle源码.   1.Sizzle同过自执行函数的方式为自己创建了一个独立的作用域,它可以不依赖于jQuery的大环境而独立存在.因此它可以被应用到其它js库中.实现如下:(function(window, undefined){})(window, undefined);   2.Sizzle中最头疼的就是一大片的复杂正则表达式:   // 为正则准备的字符串.匹配选择器中的布尔值,例如 $( "input:checked" ); booleans = "

1.浏览器对css选择器采取逆向(从右向左)解析的原因: 如果正向解析,例如「div div p em」,我们首先就要检查当前元素到 html 的整条路径,找到最上层的div,再往下找,如果遇到不匹配就必须回到最上层那个 div,往下再去匹配选择器中的第一个 div,回溯若干次才能确定匹配与否,效率很低. 逆向匹配则不同,如果当前的 DOM 元素是 div,而不是 selector 最后的 em,那只要一步就能排除.只有在匹配时,才会不断向上找父节点进行验证.找到所有的em之后,再通过查找他的父

部分IE游览器下无法通过getAttribute取值? <form name="aaron"> <input type="text" name="aaron"/> </form> alert(form.getAttribute('name')); IE6.7中错误 alert(form.getAttributeNode('name').nodeValue); 看看jQ的解决方案 能力判断 support.att

在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常

作者:zccst 看一下是如何写的 jQuery.extend({ prop:"" method:function(){} }); 可以看出,这些方法是jQuery的静态属性和方法(也即是工具方法),将来既可以直接提供给用户使用,也可以在内部使用. 具体实现的工具属性和方法有(同时也标注了哪些在内部使用) jQuery.extend({        expando  :  生成唯一JQ字符串(内部)        noConflict()  :  防止冲突        isRead

+function ($) { "use strict"; }(window.jQuery); 怎么理解? 匿名函数闭包 我们先来理一理函数表达式和函数声明的区别 函数表达式: 函数可以是匿名函数,也可以有函数名,但是这种函数无法直接使用,只有通过表达式左侧的变量来调用. var a = function(){ alert('Function expression'); } var b = new a(); 函数声明:必需要有函数名  function a(){ alert('Func

在Sizzle的入口方法Sizzle()中看到的一个根据浏览器来初始化document各个方法的函数setDocument(),接下来主要看一下这个方法都做了什么. 但之前有必要看一下它用到的一些Sizzle内部使用的方法: // 通过创建一个div元素,检测被传入的fn是否被当前浏览器支持function assert( fn ) { var div = document.createElement("div"); //此处用try-catch的原因是:被传入的fn很有可能是会报错的

每次看到三元表达式就会惶惶然分不清怎样读,正如语文中的断句一样,jquery源代码中的三元表达式更是不知怎样断句. 附jquery中的inArray实现. 大家熟悉jquery的应该都不陌生inArray的使用方法. 在源代码实现中,先推断了arr是否存在,假设不存在.则可直接返回-1.否则进行兴许推断,当存在indexOf方法时,则直接使用call来调用indexOf方法. 否则继续. 在jquery代码中处处体现代码构建者对于javascript的深刻理解.譬如这里对arr.length的缓

为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+: getElementsByName,上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+: g

声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaron/jQuery 正在编写的书 - jQuery架构设计与实现 本人在慕课网的教程(完结) jQuery源码解析(架构与依赖模块) 64课时 jQuery源码解析(DOM与核心模块)64课时 jQuery源码分析目录(完结) jQuery源码分析系列(01) : 整体架构