jQuery源码(封装**)
amandakelake opened this issue · comments
#前端/Javascript/个人理解总结
真正构造函数是原型中的init方法
当我们直接使用$('#test')创建一个对象时,实际上是创建了一个init的实例,这里的真正构造函数是原型中的init方法
每当我们执行$()时,就会重新生成一个init的实例对象,对于内存的消耗是非常大的
正确的做法是既然是同一个对象,那么就用一个变量保存起来后续使用即可
var $test = $('#test');
扩展方法
实现了两个扩展方法
jQuery.extend = jQuery.fn.extend = function(options) {
// 在jquery源码中会根据参数不同进行很多判断,我们这里就直接走一种方式,所以就不用判断了
var target = this;
var copy;
for(name in options) {
copy = options[name];
target[name] = copy;
}
return target;
}
首先要清楚this的指向(搞清楚是指向实例jQuery还是原型对象jQuery.fn)
通过jQuery.extend
扩展jQuery时,方法被添加到了jQuery构造函数
中
通过jQuery.fn.extend
扩展jQuery时,方法被添加到了jQuery原型
工具方法(静态方法)、实例方法
- 工具方法(静态方法) $.extend扩展的方法
放在构造函数中的方法,不需要声明一个实例对象就可以直接使用
工具方法在使用时因为不用创建新的实例,因此相对而言效率会高很多,但是并不节省内存;
$.ajax()
$.isFunction()
$.each()
- 实例方法 $.fn.extend扩展的方法
放在原型中的方法
,在使用时必须创建一个新的实例对象
才能访问
他的使用成本会比工具方法高很多。但是节省了内存
$('#test').css()
$('#test').attr()
$('div').each()
扩展jQuery方法
(function ($) {
$.fn.extend({
becomeDrag: function () {
new Drag(this[0]);
return this; // 注意:为了保证jQuery所有的方法都能够链式访问,每一个方法的最后都需要返回this,即返回jQuery实例
}
})
})(jQuery);