用一个函数域包起来,就是所谓的沙箱在这里边 var 定义的变量,属于这个函数域内的局部变量,避免污染全局
把当前沙箱需要的外部变量通过函数参数引入进来只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数
(function (window, undefined) {
})(window);
在生产环境中,我们为了减少代码包的大小会压缩代码,而jQuery中压缩后是:
// w -> windwow , u -> undefined
(function(w, u) {
})(window);
由于undefined已经在一参数的形式传入了在代码中所有用到undefined的地方都会被u代替,可以在一定程度上减少代码量,
从而减少丫说版本的体积。
jQuery的所有代码都是包在这样一个自执行的匿名函数中,作用是为了防止变量污染,最终只将jQuery和$挂在在window上。
匿名函数接收两个参数window和undefined,而传参只有window,这里是为了保证undefined是undefined,因为在早期的环境中undefined是可以赋值的,这里是为了防止某些二货给undefined赋值造成的未知报错。
压缩代码后更大程度上减少代码量。
- 他两的作用都是一样的,改变this的指向,第一个参数都是this要改变的指向,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.
class2type = {},
core_deletedIds = [],
core_version = "1.9.0",
// 保存一写常用方法
core_concat = core_deletedIds.concat,
core_push = core_deletedIds.push,
core_slice = core_deletedIds.slice,
core_indexOf = core_deletedIds.indexOf,
core_toString = class2type.toString,
core_hasOwn = class2type.hasOwnProperty,
core_trim = core_version.trim,
$或者jQuery: 构造函数,我们叫它–类
(“app”):正经的对象,它是 的实例。
在JavaScript中类也是一种特殊的对象。
类原型上的属性实例可以直接使用
类本身的属性实例是不能接直接调用的
1.
jQuery = function (selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context, rootjQuery);
},
2.
jQuery.fn = jQuery.prototype = {
// 版本
jquery: core_version,
constructor: jQuery,
init: function (selector, context, rootjQuery) {
...
}
}
3.
jQuery.fn.init.prototype = jQuery.fn
根据以上的代码$(‘#app’)实际jQuery()是构造了jQuery.fn.init对象
通过代码中的第二段我们能够知道jQuery.fn = jQuery.prototype,在第三段中我们把jQuery的原型传递给了jQuery.fn.init
在jQuery.fn.init的this仍然指向jQuery.fn
那么new jQuery.fn.init 实际就等于 new jQuery
从而调用jQuery()方法 return new jQuery.fn.init,('#app')等价于new(‘#app’),因此实现无new 构造jQuery对象
// 方法定义
jQuery.extend = jQuery.fn.extend = function () {
...
}
// 给jQuery类添加属性
jQuery.extend({
...
})
// 给jQuery类的原型添加属性
jQuery.fn.extend({
...
})
1.在函数中this的指向:函数挂载在那个对象上就指向谁。
2.jQuery.fn.extend 与 jQuery.extend在实现时共用了一个方法, 同一个方法却实现了不同的功能,这主要归功于JavaScript中this的强大了。
3.前面说过,jQuery.fn = jQuery.prototype添加方法, jQuery.fn.extend 是给jQuery类的原型上去添加方法,也就是jQuery实例对象上添加方法。
4.jQuery.extend是给jQuery这个类去添加方法。
<body>
<div class="a">1div>
<div>2div>
<div>3div>
body>
<script>
$('div').eq(0).show().end().eq(1).hide();
script>
jQuery.fn = jQuery.prototype = {
...
eq: function (i) {
var len = this.length,
j = +i + (i < 0 ? len : 0);
return this.pushStack(j >= 0 && j < len ? [this[j]] : []);
},
end: function () {
return this.prevObject || this.constructor(null);
},
...
};
1.实现链式调用其实就是在调用的方法中返回this就可以了
2.回溯的实现主要归功于jQuery实例中有prevObject 属性,它记录了调用前的对象。
3.prevObject是由pushStack() 方法生成,他将一个DOM集合放入了jQuery内部管
理的一个栈中,就是prevObject
4.当我们调用end()方法时,直接返回当前对象的prevObject就可以了。