jquery 플러그인을 작성해본 사람이라면 jquery가 제공하는 확장을 통해 jquery 객체를 확장할 수 있다는 것을 알고 있으며, 이 방법은 jquery 객체를 확장할 수 있을 뿐만 아니라 객체에 새로운 속성과 메서드를 추가할 수도 있습니다. 나중에 소개하겠습니다.
extend를 다양한 방식으로 호출하는 메서드도 다릅니다.
$.extend()를 통해 확장되는 것은 정적 메서드입니다.
$.fn.extend()를 통해 확장된 것이 인스턴스 메소드입니다.
jQuery 플러그인을 작성해 본 사람이라면 우리가 jQuery 객체에 플러그인을 추가하기 위해 여러 번 확장을 사용한다는 사실을 알아야 합니다.
플러그인 작성 방법:
;(function($){ $.fn.extend({ Firstplus: function() {} }); //这样写的话插件的使用方法就是:$('div').Firstplus(); $.extend({ Secondplus: function() {} }); //这样写的话插件的使用方法就是:$.Secondplus();})($);
$.extend()와 $.fn.extend()는 실제로 동일한 함수를 호출하는데 왜 서로 다른 함수를 구현하는 걸까요?
jQuery.extend = jQuery.fn.extend = function() {} //源码285行
주로 이 메소드가 수신 객체를 이것으로 확장하기 때문입니다.
$.extend(xx)의 this는 jQuery 객체를 가리키고 있으므로 이때 확장된 것은 $.xx를 통해 직접 호출할 수 있는 jQuery 객체이다.
$.fn.extend(xx)의 this는 jQuery 객체의 프로토타입을 가리키므로 이때 확장된 jQuery 객체의 프로토타입과 인스턴스화된 jQuery 객체는 jQuyer 프로토타입의 모든 메소드를 호출할 수 있습니다. . $().xx를 통해 직접 호출하세요.
다음은 확장의 세 가지 용도입니다.
1.jQuery.extend( [ object ] )
>将传入的 object 扩展到 this 对象上
2.jQuery.extend( target, [ object1 ,. .. objectN ] )
>将后面传入的 object1 到 objectN 扩展到 target 对象上
3.jQuery.extend( [ deep ], target, [object1,... objectN ] )
>如果传入了 deep 参数表示递归后面传入object1到objectN对象然后在扩展到target,这样同名的属性名就不会被覆盖了。
자세한 내용은 소스 코드 분석을 참조하세요.
jQuery.extend = jQuery.fn.extend = function() {//定义了一些变量var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, //target用来存储传入的第一个对象(目标对象) //这个target不仅表示要进行合并的目标对象,也可以表示要扩展到jquery上的对象 i = 1, //i用来表示target后面传入的对象是arguments的第几个参数 length = arguments.length, deep = false; //deep变量表示,是否进行深度拷贝//先进行了一系列的if判断,来初始化参数,判断到底是要扩展jQuery还是对传入的对象进行扩展//如果第一个参数是布尔类型,则表示是否深度拷贝if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; //将目标对象置为传入的第二个参数,如果没有置为空对象 // skip the boolean and the target i = 2; //将i置为2}//如果target不是一个对象,将其置为空对象if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; }//如果arguments和i相等,表示要扩展的jquery对象,让target指向this//这个this具体指向什么之前已经探讨过了if ( length === i ) { target = this; --i; //且让i--,这时arguments[i]表示的才是要扩展到jquery上的对象}for ( ; i < length; i++ ) { //开始遍历传入的 arguments // 只有参数不为空时才执行后面的操作 if ( (options = arguments[ i ]) != null ) { // 对对象进行扩展,无论传入的target对象,还是jQuery对象,都使用同样的方法进行扩展 for ( name in options ) { //遍历传入的对象的属性 src = target[ name ]; copy = options[ name ]; //防止target和obj的某个属性指向的是同一对象进入死循环 if ( target === copy ) { continue; } //是否进行深度拷贝 //这里说的深度拷贝,和我们平时说的深度拷贝有点区别;这里指的当obj的某个属性是一个对象时,是否对这个属性继续遍历,如果不进行遍历的话,会直接覆盖target对象的同名属性 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { //如果要拷贝的obj属性为数组 copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { //如果要拷贝的obj属性为对象 clone = src && jQuery.isPlainObject(src) ? src : {}; } // 进行递归,直到属性不再为一个对象或数组 target[ name ] = jQuery.extend( deep, clone, copy ); } else if ( copy !== undefined ) {//如果不进行深拷贝且当前obj的属性不为空 //扩展target对象,且和当前obj属性名相同。 target[ name ] = copy; } } } }return target; 最后返回target对象,如果扩展的jquery对象,则返回的就是jquery对象 };
extend 함수를 보면, 확장 함수가 다양한 if 판단을 통해 다양한 기능을 구현하고 있음을 알 수 있습니다.
여러 객체를 하나의 객체로 확장합니다.
여러 객체를 하나의 객체로 확장하고, 확장할 객체를 순회하여 동일한 속성 이름을 가진 객체를 덮어쓰는 것을 방지합니다.
하나의 객체를 다음으로 확장합니다. jquery 객체
는 객체를 jquery 프로토타입 객체로 확장합니다.
나중에 jq가 이 메소드를 통해 많은 도구 메소드를 jQuery 객체로 확장한 것을 볼 수 있습니다. jq의 구조는 여전히 매우 컴팩트하지 않습니다. 외부용으로만 제공되며, 내부적으로도 많이 사용됩니다