1. jQuery源码学习 qijun.weiqj

2. 大纲 jQuery无架构* 常用的静态方法 解密万能构造器* 理解jQuery对象* 深入事件处理*

3. jQuery无架构 源码之前，了无秘密

4. varjQuery = function(selector, context) { }; jQuery.extend = function(target, source) { // 回忆FD.common.apply }; 于是我们有了静态方法 $.extend(… 因为函数也是对象

5. 接着我们就可以扩展静态方法： $.extendIf = function(target, src) { } // 注：丹侠在fdev4中提供了此方法，以此眷顾我们的fdev3 当然也可以这样 $.extend($, { extendIf: function() { … } add: function() { … } })

6. 可以更专业： $.extend({ extendIf: function()… add: function()… }) 因为可以省略第一个参数, 此时target就是this, 即jQuery 在这里我们初步感觉到jQueryAPI的特点： 精简、灵活、还很智能， jQuery的流行最大的原因就在于此 jQuery中所有静态方法就是这样扩展的 注：但是我们把扩展jQuery的大任交给fdev-4维护小组，以避免名字空间冲突。应用中一般情况下不允许扩展jQuery对象

7. 摘录： jQuery.extend({ noConflict: function(deep) { isFunction: function( obj ) { return jQuery.type(obj) === "function"; }, isArray: Array.isArray || function( obj ) { return jQuery.type(obj) === "array"; }, isWindow: function( obj ) { return obj && typeofobj === "object" && "setInterval" in obj; }, isNaN: function( obj ) { return obj == null || !rdigit.test( obj ) || isNaN( obj ); },

8. 在jQuery中，我们可以这样： $(‘#div’).addClass(‘error’); $(‘ul.tabs’, elm).eq(0).click(); 从上面我们知道 jQuery是一个函数， 从这里我们知道 函数返回值是一个对象，并且有很多的实例方法， 这些方法用来操作相关节点

9. varjQuery = function() { return new jQuery.fn.init(selector, context); }; jQuery.fn = { }; jQuery.fn.init = function() { }; jQuery.fn.init.prototype { addClass: function() { }, removeClass: function() { } }; 从现在开始，我们的jQuery对象也有了addClass和removeClass方法

10. 重构一下： varjQuery = function() { return new jQuery.fn.init(selector, context); } jQuery.fn = { init: function() { }, addClass: function() {}, removeClass: function() {} } jQuery.fn.init.prototype = jQuery.fn

11. 现在我们就可以扩展jQuery实例方法了 $.fn.ajax = function(url, options) { } 专业点： $.extend($.fn, { get: function()… post: function()… }) 更专业 $.fn.extend({ bind: function() {…} }) 因为：$.fn.extend = $.extend = function(…,

12. 关于链式调用 $.fn.extend({ addClass: function() { … return this; } toogleClass: function() { … return this; } hasClass: function() { return true|false; }

13. 经验建议 为了增加可读性， 避免不同类型API之间的链试调用 var elm = $(‘#id’); //为了增加可读性， 避免过多的$, 只在合适的地方使用$构造 elm.removeClass(‘error’).addClass(‘success’); elm.click(function() { … });

14. 轻松一下：浏览一下常用静态方法 工具方法 $.noConflict // 由fdev-v4 默认调用,以兼容fdev-v3 所以应用中使用jQuery应该在一个closure中 $.trim $.each —— 可以对对象和数组进行迭代 $.extend —— FD.common.apply / YAHOO.lang.augmentObject $.extendIf $.grep —— $.map $.now —— new Date().getTime()， 方便加时间戳

15. 数组操作和类型检测 $.inArray // 可以使用Array.indexOf代替 $.makeArray // 很有用， 把任何东西变成数组 $.merge // 可惜了这个方法 $.type // 返回类型字符串 $.isArray $.isEmptyObject $.isFunction $.isPlainObject $.isWindow $.isXMLDoc

16. AJAX和参数 $.param $.paramSpecial中文jsonp调用代替$.param $.unparam $.parseJSON $.parseXML $.globalEval $.ajax $.ajaxSetup 以下方法调用$.ajax $.get $.post $.getJSON $.getScript

17. 特性检测/浏览器检测/函数包装 $.support $.browser 关于浏览器检测，文档中有一句话很有价值： We recommend against using this property; please try to use feature detection instead jQuery.browser may be moved to a plugin in a future release of jQuery. $.error ——当作assert使用 $.noop —— 空方法 $.proxy ——包装一个函数，改变this作用域 $.when $.sub

18. 虽然在api文档中有，但不常用的方法, 一般应用于jQuery内部，被相应的实例方法调用 $.fx $.data $.hasData $.removeData $.contains $.queue $.dequeue $.cssHooks

19. fdev-v4提供的静态方法 $.add $.use $.namespace $.extendIf $.unparam $.paramSpecial $.util.cookie $.util.subCookie $.util.substitute

20. 万能构造器 jQuery对象是如何构造的 jQuery对象是数组吗？ 构造成本有多大

21. 回顾一下 varjQuery = function() { return new jQuery.fn.init(selector, context); } jQuery.fn = { init: function(selector, context) { },

22. 1. $(null|false|…); 2. $(element); 3. $(‘body’) init: function(selector, context) ( // 1. 支持空selector if (!selector) { return this; } // 2. 原生dom节点 if (selector.nodeType) { this.context = this[0] = selector; this.length = 1; return this; }

23. // 3. 字符串 body if (selector === 'body') { this.context = document; this[0] = document.body; this.selector = 'body'; this.length = 1; return this; } 现在我们知道: jQuery对象是普通的Object, 不是Array, 只是包含的property为数字，所以看起来像数组

24. 4. $(function() { console.debug(‘domready’) }) 5. $(array|collection) //-------------------------------------------------------------------------------------- // 4. function } else if (jQuery.isFunction(selector)) { return jQuery.ready(selector); // 等效于 $(document).ready(function()… } // 5. collection / array return jQuery.makeArray(selector, this);

25. 6. $('<div></div>') 7. $('<div>') 8. $('<div />') selector = [ doc.createElement( ret[1] ) ]; 9. $('<img>', { width: '100', height: '200' }); selector = [ doc.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); 所以上述相当于 $(‘<img>’).attr(…

26. 10. html片段和id选择器 $(‘<a href=“#”>这个html很复杂</a>') jQuery.buildFragment( [ match[1] ], [ doc ] ); 1. 如果片段小于0.5K, 可cache, 以加快创建速度 2. createDocumentFragment()创建节点 3. innerHTML或 createTextNode来创建内容 11. $(‘#id’) // 注意，这里需要#， 因为要使用CSS3选 择器 elem = document.getElementById( match[2] );

27. 12. css3选择器 $('div.myclass', [context]) ---> $(context).find('div.myclass') ----> $(context). pushStack(… 这一步会构造一个新的jQuery对象 -----> jQuery.find === Sizzle; 所以采用css 3选择器的时候， 实际上会生成两个jQuery对象 不过不用担心，jQuery对象很小， 下面看看它的成本。

28. jQuery对象属性内存结构 看以上结构知道，jQuery对象是简单的轻量级对象，构造成本很小， 并且GC对小对象的回收效率非常高，所以从这上面讲不用担心效率和内存问题。 我在自己机子上构造了10万个jQuery对象，大概占用32M内存空间。

29. 深入jQuery事件模型 页面中有下面代码： <a href="#" class="link-a">Click Me A</a> <a href="#" class="link-b">Click Me B</a> <script> (function($) { $('a.link-a').click(function() { console.debug('click a'); }); $('a.link-a').click(function() { console.debug('click a2'); }); $('a.link-a').dblclick(function() { console.debug('dbclick'); }); $('a.link-b').click(function() { console.debug('click other'); }); })(jQuery); </script>

30. 在firebug的脚本监控中输入jQuery.cache 再查看节点的DOM

31. 在源码中有这样一个字段：1328行 jQuery.extend({ expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( //g, "" ),

32. 一个节点一个事件一个handler 2197行： elemData.handle = eventHandle = function() { return jQuery.event.handle.apply( eventHandle.elem, arguments ) : }; 2250行 if ( elem.addEventListener ) { elem.addEventListener( type, eventHandle, false ); } else if ( elem.attachEvent ) { elem.attachEvent( “on” + type, eventHandle ); } 那么jQuery.event.handle应该是真正调用用户操作的地方

33. 将上图数据结构展开 有了上图基础，看jQuery事件代码就容易多了，jQuery的事件也就不再神秘

34. 事件冒泡 live & delegate 问题: 有何区别 如果实现 其实是一个问题： 事件最终挂接到哪里？

35. 还是源码 delegate: function( selector, types, fn) { return this.live( types, fn, selector); <----- 第三个参数jq内部使用 }

36. jQuery.fn.live = function(types, fn, selector) { var context = selector ? this : $(this.context); … for ( var j = 0, l = context.length; j < l; j++ ) jQuery.event.add( context[j], "live." + liveConvert( type, } 总结： 1. live 事件挂接在 jQuery对象的context上（这里的context不是jQuery的第二个参数）一般为document 2. delegate事件挂接在当前jQuery对象包含的节点上 简单地说： live挂接在document上（适合不复杂的冒泡） delegate挂接在指定节点上 (比较精细)

37. 谢谢 谁教我做PPT啊！