jQuery-1.9.1 원본 분석 시리즈 (一) 전체 구조 계속

이 절은 주로 jQuery에서 가장 기초적인 몇 개입니다.
 
2. jQuery의 몇 가지 기본 속성과 함수
a. jQuery.noConflict 함수 상세 정보
 
jQuery를 초기화할 때 외부 $와 jQuery를 저장합니다
　　

_jQuery = window.jQuery,

_$ = window.$,

noConflict 함수

　　noConflict: function( deep ) {
　　　　if ( window.$ === jQuery ) {
     　　　　window.$ = _$;
　　　　}
　　　　if ( deep && window.jQuery === jQuery ) {
　　　　　　window.jQuery = _jQuery;
　　　　}
　　　　return jQuery;
　　}

noConflict를 호출하여 $심지어 jQuery의 사용권을 양도합니다.반환된 jQuery는 사용자 정의 변수로 저장됩니다.예컨대
　　var myJq = $.noConflict();
그리고 myJq를 jQuery로 사용할 수 있습니다.
　　var ps = myJq("p");//모든 p 라벨의 원소 집합을 얻습니다.
　　
b. jQuery.extend = jQuery.fn.extend 함수 설명
 
사용자가 jQuery를 다시 사용할 때 jQuery와 jQuery를 사용해야 할 수도 있습니다.prototype(jQuery.fn/jQuery(...))확장 (속성이나 방법 추가) 을 진행합니다. 이럴 때 extend에 사용합니다.
　　jQuery.extend = jQuery.fn.extend = function(){…}
jQuery.extend는 jQuery 자체에 대한 확장이다.jQuery.fn.extend는 jQuery에 대한 것입니다.fn의 확장, 즉 jQuery.prototype의 확장은 최종적으로 jQuery 실례$(...)로 나타납니다확장성
원본 분석: 원본 코드는 비교적 간단하다. 여기서 분석을 하지 않지만 그 중 기술적인 점이 하나 있다.
extend를 사용할 때 js 규칙에 따라 대상 변수는 하나밖에 없다는 원칙에 따라 얕은 복사에서 어떤 속성이 대상 변수를 통해 얻은 값이라면 외부에서 대상 변수를 바꾸면 복사 결과도 따라서 바뀔 수 있음을 주의해야 한다.
eg:

　　var hd = {name: ‘hard’};
　　var pc = {soft: ‘soft’,hdwe:hd};
　　var tt = {td: ‘test’};
　　var val = $.extend(tt,pc);// {td: "test", soft: "soft", hdwe: { name: ‘hard’}}
　　hd.name = 'chenhua';
　　//  val   {td: "test", soft: "soft", hdwe: { name: ‘chenhua’ }}

 
c. jQuery.type 함수는 대상 유형을 식별하는 데 사용됩니다
 
JavaScript에는 데이터 유형을 결정할 수 있는 typeof 연산자도 있습니다.그러나 절대 다수의 대상에게 typeof 연산자는 모두 "object"로 되돌아와 구체적인 유형을 구분할 수 없다jQuery.type() JS 내장 객체의 유형을 보다 정확하게 식별할 수 있습니다.　

　　class2type = {} ,
　　core_toString = class2type.toString,　
　　type: function( obj ) {
               if ( obj == null ) {
                      return String( obj );
               }
               return typeof obj === "object" || typeof obj === "function" ?
               class2type[ core_toString.call(obj) ] || "object" :
               typeof obj;
        }

　　
　　jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
　　　　class2type[ "[object " + name + "]" ] = name.toLowerCase();
　　});

코드 코어toString.콜(obj)은 대상의 tostring을 사용하여 obj가 JS에 내장된 대상의 유형을 처리하는데 그 결과는'[object Object]','[object Function]','[object Array]'등 스타일과 유사하며 최종적으로 JS에 내장된 대상의 유형을 완전히 소문자로 얻는다.

jQuery.type( undefined ); // "undefined"
jQuery.type( null ); // "null"

jQuery.type( true ); // "boolean"
jQuery.type( new Boolean(true) ); // "boolean"

jQuery.type( 3 ); // "number"
jQuery.type( new Number(3) ); // "number"

jQuery.type( "test" ); // "string"
jQuery.type( new String("test") ); // "string"

jQuery.type( function(){} ); // "function"
jQuery.type( new Function() ); // "function"

jQuery.type( [] ); // "array"
jQuery.type( new Array() ); // "array"

jQuery.type( new Date() ); // "date"

jQuery.type( new Error() ); // "error" // jQuery 1.9     

jQuery.type( /test/ ); // "regexp"
jQuery.type( new RegExp("\\d+") ); // "regexp"

/*          ，        "object" */

jQuery.type( {} ); // "object"
function User() { }
jQuery.type( new User() ); // "object"

 
d. jQuery.function 및 jQuery.fn.function
 
어떤 함수는 jQuery에 직접 연결되어 있는데, 이런 방법은 jQuery만 사용할 수 있습니다.function()로 호출합니다.또 다른 방법은 jQuery에 귀속시키는 것이다.fn에서 이런 방법은 일반적으로 두 가지 호출 방식이 있다 jQuery.fn.function () 또는 jQuery (...).function.
jQuery 초기화 함수 jQuery = function(selector, context)
  return new jQuery.fn.init(selector,context,rootjQuery);
} 이해하기 쉬울 거예요.jQuery(...)마지막으로 되돌아오는 상하문 환경은 jQuery입니다.fn, 그래서 jQuery에 귀속됩니다.fn의 함수는 최종적으로 jQuery (selector,context) 를 통과할 수 있습니다.function()로 호출
e. jQuery.fn.get
 

//                 
get: function( num ) {
       return num == null ?
       // Return a 'clean' array
       this.toArray() :
　　// Return just the object
        ( num < 0 ? this[ this.length + num ] : this[ num ] );
},

주의해야 할 것은, 여기에서 되돌아오는 것은 DOM 노드의 대상이며, jQuery 대상이 아니면 더 이상 체인식으로 호출할 수 없습니다.
 
f. jQuery.fn.each 및 jQuery.each
 
jQuery.fn.each (callback,args) 는 jQuery 집합을 하나씩 처리하고, 최종적으로 호출하는 것은 $입니다.each(obj,callback,args)는 단지 obj가 jQuery와 일치하는 집합으로 바뀌었을 뿐이다.
$.each의obj는 그룹일 수도 있고 대상일 수도 있습니다.수조라면 수조를 훑어보고, 대상이면 대상 자체의 모든 속성 (함수 포함) 을 훑어본다.하면, 만약, 만약...each에args 매개 변수를 설정하지 않으면 반복 과정에서callBack을 호출하면 모든 요소의 하표(수조는 하표, 대상은 속성 이름)와 값(수조는 수조 요소, 대상은 속성에 대응하는 값)을 callBack에 전달합니다.그렇지 않으면 ARgs가 콜백에 전달될 것이다.
이 함수는 일치하는 요소마다 실행되는 함수로 규정되어 있다.소스 코드는 다음과 같습니다.

jquery.fn. each: function( callback, args ) {
       return jQuery.each( this, callback, args );
}

 
jQuery를 사용했습니다.each 방법, 원본 코드는 다음과 같습니다

jQuery.each: function( obj, callback, args ) {
       var value,
              i = 0,
              length = obj.length,
              isArray = isArraylike( obj );
       if ( args ) {//     args，  callback 
              if ( isArray ) {
                     for ( ; i < length; i++ ) {
                            value = callback.apply( obj[ i ], args );
                            if ( value === false ) {
                                   break;
                            }
                     }
              } else {
                     for ( i in obj ) {
                            value = callback.apply( obj[ i ], args );
                            if ( value === false ) {
                                   break;
                            }
                     }
              }
       } else {//          
              if ( isArray ) {//    
                     for ( ; i < length; i++ ) {
                            value = callback.call( obj[ i ], i, obj[ i ] );
　　　　　　　　　　if ( value === false ) {
                                   break;
                            }
                     }
              } else {
                     for ( i in obj ) {//    
                            value = callback.call( obj[ i ], i, obj[ i ] );
　　　　　　　　　　　　　　　　if ( value === false ) {
                                   break;
                            }
                     }
              }
       }
　　return obj;
}

 
본문이 괜찮다고 생각되면 오른쪽 아래[추천]을 클릭하세요!