jQuery源码分析一

最近在研究jQuery源码,jQuery源码近9000行,因此不可能一篇文章全都分析了,我会一点一点分析,每隔一段时间更新一点,尽量分析的详细一点。
这篇文章我分享的是JQ采用的匿名函数自以及构造函数。

匿名函数自执行
(function(window,undefined){})(window);
jQuery采用的就是这段代码,从第14行到8829行,包裹住全文(我分析的版本是2.0.3的版本,你们可以自己从网上下载这个版本);

1.匿名函数自执行的一个优势,内部的代码,不会外部冲突,内部污染外部。
2.jQuery传这两个参数原因有两个,第一个,window属于js的最顶端,速度比较慢,根据作用域的原理,变量是从离他最近定义的地方开始查找,所以说传参之后,查找速度就更加的快捷。第二个,window传过来之后,对于压缩版本也很有好处,我们要知道压缩代码不仅仅只是压缩换行和空格,函数内部的变量名它也会进行压缩,例如window在jquery-2.0.3.min.js里面被压缩成了e,但是不传参window则是函数外部的,无法被压缩。
3.为什么要传undefined?因为undefined在某些情况下是可以被修改的,例如IE8 以下,定义var undefined=99;alert(undefined)为99,更多情况下它是不可被更改。所以为了防止外部有人修改undefined,jq将它传了进来。
4.”use strict”严格开发模式,加了这句话表明开发模式为严格开发模式,我们必须严格遵守其规范,例如在非严格模式下允许写八进制形式,在严格模式下就不允许,但是jquery不支持这种写法因为这种写法在低版本浏览器下不兼容只支持高版本的浏览器;再比如,我们定义一个a=10,并没有用var定义,在非严格模式下不报错,但是加上了“use strict”程序会报错a is not defined,我们公司的移动框架还是支持的,毕竟移动端不需要考虑多少兼容性成本。

构造函数
jQuery中的构造函数可以说其精华之一,我不得不赞叹一下其作者。
1.普通的构造函数

function Aaa(){
    //这里面定义一些属性
}
//原型链中添加方法
Aaa.prototype.init = function(){};
Aaa.prototype.css = function(){};
//使用
var a1 = new Aaa();
a1.init();
a1.css();

2.jQuery中的构造函数

//window.jQuery = window.$ = jQuery;8826行
function jQuery(){
    return new jQuery.prototype.init();//亮点一,第63行
}
jQuery.prototype.init = function(){}
jQuery.prototype.css = function(){}
jQuery.prototype.init.prototype = jQuery.prototype;//一个对象赋值给了另外一个对象,就出现了引用,亮点二,第283行
jQuery().css();//调用方法

可能有的人会觉得,不对啊,jQuey里面不是这样写的,
63行写的return new jQuery.fn.init( selector, context, rootjQuery );
283行写的是jQuery.fn.init.prototype = jQuery.fn;
但是注意到第96行jQuery.fn = jQuery.prototype,我就喜欢叫fn你有什么办法吗,上面的方法是我简化之后样子,jQuery简化下来就是这个样子,这里我推荐张鑫旭老师的一篇文章,分析jQuery原理的,
http://www.zhangxinxu.com/wordpress/2013/07/jquery-%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/,写的很好,也很幽默,不会很枯燥。

jQuery返回的是一个new操作符处理的实例化对象,在init方法里面经过了一系列判断处理,返回的其实就是类似document.getElementById()酱紫的东西。我们要知道,在new操作符实现构造函数实例化对象的时候,我们return 都是不用写的,因为默认返回的是this,但若是改变了,返回的就是改变的东西,jQuery中返回自执行构造函数(init函数),在init里面进行自己想要的操作,再用jQuery.prototype.init.prototype = jQuery.prototype赋值引用(引用大家应该都懂吧,传值和传址不懂的可以去百度百度),两个指向同一个地址,也就是说,jQuery.prototype.init的原型即是我jQuery的原型,那样我写在jQuery的原型里面或者是写在jQuery.prototype.init的原型里面不都可以吗!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值