amandakelake / blog

think more!learn more!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jQuery源码(封装**)

amandakelake opened this issue · comments

commented

#前端/Javascript/个人理解总结

浅析jQuery
image
image

真正构造函数是原型中的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);