logo头像

求知若渴,虚心若愚

jQuery - jQuery源码学习 - jQuery导入和导出

匿名函数自调用

1
2
3
4

(function( window, undefined ) {
//代码
})(window);
  • ECMAScript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率
  • 不传参window,代码压缩window就不会被压缩了,传参的话,可以代码压缩
  • undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined
  • 注意:不要用window.undefined传递给形参,有可能window.undefined被其他人修改了,最好就是甚么都不传,形参的undefined就是真正的undefined了

jQuery定义和导出

入口(61行)

1
2
3
4
5
6

// 定义一个局部的jquery
jQuery = function( selector, context ) {
// jQuery对象实际上只是init构造函数的“增强”。
return new jQuery.fn.init( selector, context, rootjQuery );
}
  • 这个函数在第61行开始,算是一个最重要的函数
  • 我们平时用到的都是这个函数$或者jquery
  • 返回一个对象
  • 后面代码会有jQuery.fn = jQuery.prototype,所以fn就是原型
  • 以上就是在原型下面找init方法
  • 关键的一句话:
1
2
3
4
5
6

// jQuery.fn其实就是原型,然后原型给了原型的init方法的原型,形成对象引用,那么在fn原型下面的方法,通过init创建出来的实例也是可以调用的
jQuery.fn = jQuery.prototype
jQuery.fn.init.prototype = jQuery.fn;
// 其实就相当于
jQuery.prototype.init.prototype = jQuery.prototype;

init构造函数(101行)

  • jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样。

  • 这个方法接受3个参数,其前两个参数是jQuery方法传递过来的

  • Selector:

    • 原则上可以输入任意值,但并不是所有值都是有意义的
    • 只有undefined、DOM 元素、字符串、函数、jQuery 对象、普通 JavaScript 对象这几种类型是有效的
    • 这个参数是通常是填写的但是不填写也不会报错
  • Context:

    • 作为执行上下文或者叫执行范围可以不传入,或者传入 DOM 元素、jQuery 对象、普通 JavaScript 对象之一
  • rootjQuery:

    • 包含了 document 对象的 jQuery 对象
    • 用于 document.getElementById() 查找失败、selector 是选择器表达式且未指定 context、selector 是函数的情况,其实就是$(document)
1
2
3
4
5
6

jQuery.fn = jQuery.prototype = {
// ...
init: function( selector, context, rootjQuery ) { }
// ...
}

对外公开(8825行)

1
2
3
4
5
6

// If there is a window object, that at least has a document property,
// define jQuery and $ identifiers
if ( typeof window === "object" && typeof window.document === "object" ) {
window.jQuery = window.$ = jQuery;
}
  • 对外暴露出jquery
支付宝打赏 微信打赏

赞赏是对我们的肯定!