jQuery 1.6 원본 학습(一)--core.js[1]의 기본 구조
4039 단어 jquery
jQuery 전체의 기본 구조는 말하기도 복잡하지 않지만 똑똑히 보려면 시간이 좀 걸린다,core.js라는 파일은 jQuery의 전체 구조를 구축했고 이 파일의 기본 내용은 다음과 같이 요약했다.
// jQuery
var jQuery = (function(){
var jQuery = function( selector, context ) {
// $("p") new jQuery.fn.init , jQuery , jQuery , jQuery
return new jQuery.fn.init( selector, context, rootjQuery );
},/*
...
, ,useragent
...
*/
// jQuery jQuery.fn fn
jQuery.fn = jQuery.prototype = {
//jQuery , jQuery
init :function(){
// jQuery ,
},
/*
...
, length,jquery , jquery
:eq,get 。
...
*/
}
// jQuery
jQuery.fn.init.prototype = jQuery.fn;
//extend jQuery ( ) ( )
jQuery.extend = jQuery.fn.extend = function(){
/*
...
jQuery extend , jQuery
,
...
*/
};
jQuery.extend({
/*
jQuery ,
noConflict,isReady
*/
});
/*
...
, , ready
...
*/
// jQuery ( )
return jQuery;
})();
이를 통해 알 수 있듯이 jQuery는 크게 두 부분으로 나뉘는데 하나는 정적 방법 부분이고 하나는 실례적인 대상 부분이다. 이 두 부분은 모두 같은 함수인 extend를 통해 확장된 것이다. 아마도 위의 코드는 비교적 추상적으로 보일 것이다. 다음 그림은 전체 구조의 관계를 묘사한다.
이렇게 하면 전체 구조가 훨씬 뚜렷해 보인다.그 중에서 가장 오른쪽에 있는 jQuery 실례는 new jQuery를 통해서입니다.fn.인트가 얻은 거야.이렇게 해서 jQuery로 확장합니다.fn의 방법은 실례적인 방법으로 jQuery 실례에 접근할 수 있고, jQuery 대상 자체로 확장하는 방법은 정적 방법으로 사용할 수 있다.
에서js에서 대부분의 핵심 방법을 확장하기 위해 extend를 호출했습니다. 먼저 extend 방법을 분석합니다.
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {}, //
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
// bool
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
//
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
// !! $.extend ,this jQuery , ,
// $.fn.extend jQuery.fn , , this, this jQuery
target = this;
--i;// i,
}
// , jQuery, , , jQuery
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
// , ( )
// jQuery , isPlainObject,isArray extend jQuery 。
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : []; //
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
기본적으로 extend 방법은 이렇습니다.
그래, 내가 게으른 것을 감안하여 오늘은 여기까지 분석하고 매일 조금씩 공부하고 매일 조금씩 진보하자~
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.