jQuery源码分析之=>jQuery的定义
2015-02-03 10:18
197 查看
最近写前段的代码比较多,jQuery是用的最多的一个对象,但是之前几次看了源码,都没搞清楚jQuery是怎么定义的,今天终于看明白怎么回事了。记录下来,算是一个新的开始吧。
(文中源码都是jQuery-1.10.2版本的)
先上一段jQuery定义的源码,定义了jQuery为一个function
这就是我们常用的格式:$("#div1");就是通过这个函数定义的
这个函数只有一行有效代码,就是实例化了一个类型,这个类型是在jQuery的原型中定义的,那么继续往下看。
在上面这段代码中,定义了jQuery的原型,然后将原型赋给了jQuery.fn;$.fn这个东西大家应该都很熟悉了,我们扩展jQuery插件的时候时长用到它,其实就是想jQuery的原型中添加了方法。
在原型的定义中重要的就是init函数了,有三个参数:selector,context,rootjQuery。
在这个函数中根据各种情况做了判断,比如:selector对象为false时的就是处理$("")或者$(null)或者$(undefined),(注释上都有说明);
如果selector是function时,就是我们最常用的页面加载处理函数:$(function(){......});
到这里,应该就可以明白了,jQuery对象不过是一个函数,然后在内部实例化了一个jQuery.fn.init;
但是问题来了,我们做jQuery插件的时候,扩展的是jQuery.fn,是jQuery的原型,跟jQuery.fn.init的实例化对象没有关系,这是怎么回事?
接下来这行代码就解决了我的疑惑:
将jQuery原型的定义赋给了jQuery.fn.init的原型,这样我们在扩展jQuery原型的同时,也扩展了jQuery.fn.init的原型,那么jQuery对象就有了那些方法(确切的说应该是jQuery.fn.init类型的实例化对象)
接下来的源码定义了jQuery.extend=jQuery.fn.extend=function(){};然后通过这两个方法添加了预定义的方法和属性,比如:ready函数、isFunction函数、each函数等等
到这里差不多jQuery的定义就结束了,我们常用的一些方法也在源代码中通过extend方法预先定义好了。
(文中源码都是jQuery-1.10.2版本的)
先上一段jQuery定义的源码,定义了jQuery为一个function
// Define a local copy of jQuery jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }
这就是我们常用的格式:$("#div1");就是通过这个函数定义的
这个函数只有一行有效代码,就是实例化了一个类型,这个类型是在jQuery的原型中定义的,那么继续往下看。
jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: core_version, constructor: jQuery, init: function( selector, context, rootjQuery ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } // Match html or make sure no context is specified for #id 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 { 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 ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); } // HANDLE: $(DOMElement) } else if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; // 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 ); }, 。。。其他方法省略 }
在上面这段代码中,定义了jQuery的原型,然后将原型赋给了jQuery.fn;$.fn这个东西大家应该都很熟悉了,我们扩展jQuery插件的时候时长用到它,其实就是想jQuery的原型中添加了方法。
在原型的定义中重要的就是init函数了,有三个参数:selector,context,rootjQuery。
在这个函数中根据各种情况做了判断,比如:selector对象为false时的就是处理$("")或者$(null)或者$(undefined),(注释上都有说明);
如果selector是function时,就是我们最常用的页面加载处理函数:$(function(){......});
到这里,应该就可以明白了,jQuery对象不过是一个函数,然后在内部实例化了一个jQuery.fn.init;
但是问题来了,我们做jQuery插件的时候,扩展的是jQuery.fn,是jQuery的原型,跟jQuery.fn.init的实例化对象没有关系,这是怎么回事?
接下来这行代码就解决了我的疑惑:
// Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn;
将jQuery原型的定义赋给了jQuery.fn.init的原型,这样我们在扩展jQuery原型的同时,也扩展了jQuery.fn.init的原型,那么jQuery对象就有了那些方法(确切的说应该是jQuery.fn.init类型的实例化对象)
接下来的源码定义了jQuery.extend=jQuery.fn.extend=function(){};然后通过这两个方法添加了预定义的方法和属性,比如:ready函数、isFunction函数、each函数等等
到这里差不多jQuery的定义就结束了,我们常用的一些方法也在源代码中通过extend方法预先定义好了。
相关文章推荐
- jQuery1.6.2源码分析(二)JQ基础变量定义
- jquery 源码分析 jQuery类 定义
- jquery Selector 源码分析<转>
- jQuery源码分析之jQuery的定义
- jQuery 源码剖析-4 init 函数分析
- jQuery源码分析
- CSS selector (jquery的源码分析,修改)
- CSS selector (jquery的源码分析,修改)
- jquery Selector 源码分析
- jQuery 源码分析 -1 $是什么?
- jquery1.2.6 源码分析
- Jquery源码分析之一(重新开始)
- JQuery UI 插件原理分析(一)<jquery.ui.core.js>
- Ext源码分析源码分析之Ext的继承模式解说——第一节、类的定义
- jQuery1.3.2 源码学习-3 init 函数分析 - 1
- jQuery源码分析 (init)
- lua源码分析2(局部函数的定义)
- lua源码分析(局部变量的定义)
- jquery core 源码分析
- Jquery源码分析(一)