jquery源码学习

原创 xiaolong2122451 随笔 Jquery源码分析 259阅读 2017-05-23 22:40:58 举报

jquery的大体结构是这样

javascript 代码

先从大往小说, 最外面的是一个闭包, 接受两个参数一个是window , 一个是undefined。 传window是因为,1 , 方便压缩,2 , 提示window的查找速度。 传undefined是因为, undefined不是常量,它是window下面的一个属性, 在某些低版本浏览器可以被修改。

javascript 代码

我们平时使用jquery基本是这样 → $( function(){} ) 或者 $( "#id" ).css() 或者 $.ajsx() ;
由此,可以推断出, jquery内部, 必定有一个 $的方法。因为只有方法才能 调用。 比如aaa() 、 css() 、 jquery() ;
事实也是如此,下面是jquery的实现方法

javascript 代码

所以呢, 我们的 $ 其实就是jquery这个方法, 所以每次 $()的时候 都会return 一个新实例。 就是 new jQuery.prototype.init( );

这里jquery设计的非常巧妙,结合上面的其实就是 new jQuery.prototype.init.prototype.init() ; 翻译过来就相当于jquery下面的init方法 , 再次作为构造函数 同时,因为 jQuery.prototype.init.prototype = jQuery.prototype;这句话, 所以两个对象的方法都是可以共用的。

仔细观察jquery这个方法

javascript 代码

我们一般都是传一个参数: 比如$( function(){} ) 、 $("#id")等。第二个参数的意思的执行上下文, 说白了就是父级的意思, 一般我们用不着,这里就不说了。

我们仔细观察函数会发现, jquery最终会调用 init 这个方法,那么 init 实现大体是这样的

javascript 代码

大体结构就是这样的, 一种就是处理参数是字符串的, 一种就是处理参数是函数的, 处理函数的好说, 因为如果参数是函数肯定是进行文档加载 $( function(){ });

如果参数是字符串就比较复杂了, 因为如果参数是字符串 , jquery分为 选择元素, 创建标签。 所以在init源码当中 , 做了很复杂的处理。具体源码就不说了,大体就是这个样子。

然后最后return this; 当然源码中并不是直接输出this 。

this就是jquery对象。

它的大致结构是这样的:

javascript 代码

明天继续

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复