读书人

躺在jquery石榴裙上

发布时间: 2012-11-04 10:42:41 作者: rapoo

躺在jquery石榴裙下
本来准备分析1.4.3,尽然有接近7000行代码,有些吃不消,所以还是先来1.2.6的,分析完了之后再来1.4.3的

闲话不多说了,go on!

这一节主要分析它的架构

最外层的结构

(function(){})() 

闭包+匿名函数,好处就是独立的作用域,加载并立即执行内部的代码。

var _jQuery = window.jQuery,_$ = window.$; 

之所以拟两个变量$ 和 jQuery,是考虑的命名空间的问题,比如和Prototype库一起使用的时候,$就可能会出现冲突的情况,这个时候就可以使用jquery的noConflict,从而避免这种情况的发生。

var jQuery = window.jQuery = window.$ = function(selector, context) {    return new jQuery.fn.init(selector, context);}; 

这个是jquery函数的总入口,当我们使用$(..)返回的实际上是jQuery.fn.init实例(所以jQuery对象实际上是jQuery.fn.init对象),并不是返回一个很纯粹的jquery实例,这是为什么呢?其目的就是为了避免在生成实例的时候使用new运算符,可以将 $()理解为是工厂方法。

在后面的代码会发现下面这一段:
jQuery.fn = jQuery.prototype (约 33行)  //1 式jQuery.fn.init.prototype = jQuery.fn; (约 529行)  //2 式jQuery.extend = jQuery.fn.extend = function(){..}(约 550行)  //3 式

由1式和2式可得出:
jQuery.fn.init.prototype=jQuery.prototype,jQuery.fn.init.prototype是$()实例的原型,jQuery.prototype是$函数的原型,两者是有区别,简单的说就是一个是jQuery.fn.init的原型,一个是$的原型。

jQuery.fn = jQuery.prototype这里直接理解为jQuery.fn是$的原型

jQuery.extend给$加方法,jQuery.fn.extend是给的$.fn.init原型加方法,写插件的时候,这个时要区分开的,如果是全局功能用jQuery.extend,如果是jQuery对象的功能用jQuery.fn.extend,从3式可以看出,John用这种方式,统一了不同接口的同一种实现。

var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/, isSimple = /^.[^:#\[\.]*$/, undefined; 

先从undefined开始讲起,undefined的作用是为了加速,为什么能加速了,是因为原来undefined是window上的一个属性,这样就会遍历window,然后将其属性进行赋值,这样就会加快后面的运行速度

再来看quickExpr,从"|"后面的#(\w+)开始,这个是用来判断id的,假设用exec(我认为最强大的函数),假设匹配的话那么返回回来数组的第一个字符串就会"#idname",第二字符串就是"idname";"[^<]*(<(.|\s)+>)[^>]*"匹配诸如这样"skdfjj<asdfw>sdjfk"的字符串,当取数组里面下标为1的元素,那就取到得是"<asdfw>"

在jQuery.prototype.init函数里面就用到quickExpr

var match = quickExpr.exec(selector); 

match[1]取到得就是标签
match[2]标签名
match[3]取到的就是id

再来看isSimple英文注解上说Is it a simple selector,/^.[^:#\[\.]*$/这个正则很简单,基本涵盖几种简单的选择器,比如#id,.class,element,*,select1,select2
由此可以看出前面那一个.的含义甚多,而后面的那个*号也是恰到好处,就这样很完美的处理这几种情况。

John说过正则一直是人们所忽略的一块,jquery之所以这么通用,处理问题这么优雅,很大程度上是因为js语法和正则的变化时无穷无尽的。

下一节 分析jquery 20-500行

分析源码是提升水平最快的方式,并且看似好几千行的代码,随着逐步分析,会理解和熟悉他的运作方式和原理,最后真正要拿出来分析的会越来越少,以短时间来获取别人好几年的技艺结晶,是相当值的,特别是面试的时候,这些东西能让你讲出入骨三分的花样来,会让面试官对你刮目相看。希望进来的朋友多提提意见

读书人网 >Web前端

热点推荐