jquery源码浅析.pptx

Jquery源码浅析 杨经纬 前言 总体架构 工具函数 Sizzle选择器 前言 轻量级Javascript框架 兼容css3及各种浏览器 方便处理html、events、动画效果、ajax交互 文档说明全，成熟插件多 Write Less,Do More. 前言 总体架构 工具函数 Sizzle选择器 整体架构——自调用匿名函数 (function( window, undefined ) {     // jquery code })(window); 1.为什么要用自调用匿名函数？ 2.为什么要传入window？ 3.为什么要增加undefined参数？ 整体架构——实现功能 (function( window, undefined ) {     // 构造jQuery对象 var jQuery = function( selector, context ) {         return new jQuery.fn.init( selector, context, rootjQuery );     }//隔离作用域并能使用jQuery原型对象的作用域 原型传递解决问题，把jQuery的原型传递给jQtotype // 工具函数 Utilities // 异步队列 Deferred // 浏览器测试 Support // 数据缓存 Data // 队列 queue // 属性操作 Attribute // 事件处理 Event // 选择器 Sizzle // DOM遍历 // DOM操作 // CSS操作 // 异步请求 Ajax // 动画 FX // 坐标和大小     window.jQuery = window.$ = jQuery; })(window); 整体架构——链式调用 aQuery().init().name(); 如何实现？ aQuery().init().name(); aQtotype = { init: function() { return this; }, name: function() { return this }) 整体架构——插件接口 jQuery.fn.extend() jQuery.extend = jQuery.fn.extend = function() { …} jQuery.extend 对jQuery本身的属性和方法进行了扩展 jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展 总体架构 工具函数 事件处理 Sizzle选择器 工具函数 noConflict noConflict: function( deep ) {        // 交出$的控制权        if ( window.$ === jQuery ) {            window.$ = _$;        }        // 交出jQuery的控制权        if ( deep window.jQuery === jQuery ) {            window.jQuery = _jQuery;        }            return jQuery;     }, trim: trim ?        function( text ) {            return text == null ?                :               trim.call( text );        } :            // Otherwise use our own trimming functionality        function( text ) {            return text == null ?                :               text.toString().replace( trimLeft,  ).replace( trimRight,  );        }, 前言 总体架构 工具函数 Sizzle选择器 jquery从1.3开始，使用了新的选择器–sizzle。效率业界第一。 从右至左 div div p em Tokenize处理器 Sizzle引擎解析流程 通过Expr.find[ type ]我们找出选择器最右边的最终seed种子合集 通过Spile函数编译器，我们把tokenize词法元素编译成闭包函数 超级匹配superMatcher，用最佳的方式从seed种子集合筛选出需要的数据 选择器效率比较 id：$(‘#aaron