jQuery源码（封装**）

[amandakelake]

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

浅析jQuery

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