jQuery是一款优秀的js框架。它应用广泛,插件众多。它的框架代码质量也非常优秀。在平时的js编码中也是可以借鉴的。
整体框架
1.整体形式
(function(window,undefined){
… …
var jQuery = (function(){
var jQuery = function(selector,context,rootjQuery){
… …
}
… …
rootjQuery = jQuery(document);
… …
return jQuery;
})();
… …
window.jQuery = window.$ = jQuery;
})(window);
以上代码是jQuery框架的整体形式,请注意看,它将所有jQuery代码放入匿名函数,这样可防止命名冲突和全局变量的出现。而函数定义后面再带一个括号(function(){…})(),可在函数载入时即执行函数体。将外部window对象传入函数内部,最后扩展window的属性window.jQuery=window.$=jQuery.
2.jQuery实例化
var jQuery = function(selector,context){
return new jQuery.fn.init(selector,context,rootjQuery);
}
js实例化的过程,简单来讲就是创建一个空的Object,然后继承prototype的属性与方法。接着执行一遍这个function.(此上是我的理解,有误差请指出,理解以上非常重要)
这里jQuery函数实际上返回的是jQuery.fn.init的一个实例。
jQuery.fn = jQuery.prototype = {
init:function(selector,context,rootjQuery){
… …
}
}
jQuery.fn.init.prototype = jQuery.fn;
按我上面的逻辑来走一遍。jQuery函数要返回jQuery.fn.init的实例。jQuery.fn.init实例化时首先创建一个空的Object,然后继承jQuery.fn.init.prototype的属性与方法。而jQuery.fn.init.prototype赋值为jQuery.fn,所以jQuery.fn.init的实例有jQuery.fn的所有属性与方法。再接着执行一遍init方法,完成初始化。
那么看到这里也就能明白,很多地方常讲的扩展jQuery时,不能直接在jQuery上扩展属性。如jQuery.test=function(){}.而要在jQuery.fn上扩展,常见的是jQuery.fn.test=function(){…}。
当然对于静态调用,是可以扩展jQuery本身的。如我们可能会见到这两种形式:$(“#id”)和$.ajax.这两个是截然不同的。$(“#id”)它调用了一个函数,返回的是前面所讲的jQuery.fn.init的一个实例。而$.ajax,是调用的$函数的静态方法ajax。
实际上对于jQuery本身所提供的很多通用方法,它都是提供静态与实例化两种方法。如jQuery.extend=jQuery.fn.extend=function(){… …},还有一些是实例化方法内部直接调用静态方法。如each:function(callback,args){ return jQuery.each(this,callback,args)}
选择器
jQuery最令人称颂的就是它强大的选择器.下面带大家一起来认识吧.
选择器的代码都放在init方法中。
1.空的选择器,包括$(),$(“”),$(null),$(undefined)调用形式。
if (!selector){
return this;
}
它直接返回一个jQuery对象。
2.Dom元素选择器,例如$(document.getElementById(“id”))
if (selector.nodeType){
this.context = this[0] = selector;
this.length =1;
return this;
}
此时,它会将jQuery对象的context与0属性赋值为dom元素,将length属性赋值为1.以下为一演示此特征的例子:$(document.getElementById("test")).context.innerHTML = "test";
3.body元素选择器.jQuery中对body元素作用作了优化,进行特殊对待
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
代码很简单,以下例子就会使用以上选择器。例如:$("body").css("background-color","#ff0000");
4. 字符串选择器。这个才是选择器里面最重要的。它又分为许多小类。一一道来。
4.1 html选择器,形如$(“<div>test</div>”)或$(“<div></div>”)。它的selctor返回的是一个dom元素的数组.然后将数组放入jquery对象中。此时将jquery对象当作数组来用。
match= [null, selector,null];
if(match[1]){
ret = rsingleTag.exec(selector);// rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/
selector = [ doc.createElement( ret[1] ) ];
}
jQuery.merge( this, selector );
以上我只是将jQuery代码中的一个分支中的片段拿出来了。但原理都是一样的.
4.2 id选择器,用的相当多。如$(“#id”)
match = quickExpr.exec( selector );// quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/
elem = document.getElementById( match[2] );
this.length = 1;
this[0] = elem;
this.context = document;
this.selector = selector;
return this;
jQuery的id选择器也是使用的document.getElementById来获取元素。
还有很多,在这里不写啦,有需要的可以自行下载源码进行解读。欢迎多多评价。