YUI2.8 관련 핵심 소스 풀이 및 학습 노트(一)

문장을 너무 길게 썼으니 몇 부분으로 나누면 된다. 이어서 위에서 방금 말한 것을 이어가면 DOM 모듈이다
1. DOM 모듈:
일반적인 js 프레임워크는 빠질 수 없는 몇 가지 모듈 중 하나일 것이다. Yui의dom 모듈은 jQ가 만든 것처럼 신기한 느낌은 없지만 많은dom 프레임워크의 시조 중 하나이다.그럼 한번 봅시다.
먼저 $()의 YUI 버전: get ()
1、get(ele)
여기 원본 코드가 붙지 않습니다. jQ가 강한 $에게 get은 ID 값만 얻을 수 있습니다. 사실은 get ElementBy Id에 대한 봉인입니다.

              if ('length' in el) { // array-like 
                    c = [];
                    for (i = 0, len = el.length; i < len; ++i) {
                        c[c.length] = Y.Dom.get(el[i]);
                    }
                    
                    return c;
                }

여기에 id 값이 담긴 그룹과 유사한 그룹을 전송할 수 있으며 DOM 요소의 그룹을 직접 되돌려줍니다.
다른 함수를 보기 전에 이batch의 함수를 먼저 볼게요.
2、batch()
이 함수는 가능한 원소 수조의 전입 값에 대해method의 분배를 주로 관리한다

        batch: function(el, method, o, overrides) {
            var collection = [],
            scope = (overrides) ? o : window;//    ，   true   o  
                
            el = (el && (el[TAG_NAME] || el.item)) ? el : Y.Dom.get(el); //   el     DOM    ，    get，      id     ~~
            if (el && method) {
                if (el[TAG_NAME] || el.length === undefined) { //  ele         call  
                    return method.call(scope, el, o);//        el,o
                } 

                for (var i = 0; i < el.length; ++i) {
                    collection[collection.length] = method.call(scope, el[i], o);//              method  
                }
            } else {
                return false;//   el         
            } 
            return collection;
        },

코드 설명은 위에 있는 제 주석을 보세요. 이쪽의collection[collection.length]가 포인트예요!인덱스 값++를 한 번 진행하는 셈입니다. 왜냐하면 length는 마지막 인덱스 값보다 한 번 높기 때문입니다~~
이 방법은 기본적으로 모두 사유 방법을 집행하지만 YUI 중의 사유 방법은 진정한 폐쇄 사유가 아니라 단지 공공 방법 이름 앞에 밑줄을 그을 뿐이다
다음 hasClass 방법을 살펴보겠습니다.

        hasClass: function(el, className) {
            return Y.Dom.batch(el, Y.Dom._hasClass, className);
        },

이쪽은el이 수조일 수 있기 때문에batch방법을 호출하여 사유방법을hasClass 전송, 이 방법의 인삼 전송은ele,className 입니다.
다음은 getelementsBy라는 방법입니다. 왜 이 방법을 먼저 말해야 합니까? 이것은 많은 geteleBy...다 이런 식이야.
3、getElementsBy(method, tag, root, apply, o, overrides, firstOnly)
이 방법은 주로 테스트 함수 method에 따라 DOM 요소를 선별하는 것이다. 물론 원시적인 그룹은 ByTagName에서 얻어진 것이고 원본 코드를 직접 볼 수 있다.

getElementsBy: function(method, tag, root, apply, o, overrides, firstOnly) {
            tag = tag || '*';//            tag 。。。         
            root = (root) ? Y.Dom.get(root) : null || document; //    

            if (!root) {//  
                return [];
            }

            var nodes = [],
            elements = root.getElementsByTagName(tag);//      
            //        
            for (var i = 0, len = elements.length; i < len; ++i) {
                if ( method(elements[i]) ) {//         ，           DOM    boolean    
                    if (firstOnly) {//       ，   tp   find  
                        nodes = elements[i]; 
                        break;//      
                    } else {
                        nodes[nodes.length] = elements[i];//         
                    }
                }
            }

            if (apply) {//   apply     
                Y.Dom.batch(nodes, apply, o, overrides);//  batch  apply
            }

            
            return nodes;
        },

예전처럼 내 위의 주석을 구체적으로 보면 이쪽 get ElementBy 함수의 마지막 퍼스트 온리는 직접true 호출로 설정한다.
이제 byClassName이 Yui에서 어떻게 이루어졌는지 살펴볼게요.
직접 소스:

getElementsByClassName: function(className, tag, root, apply, o, overrides) {
            tag = tag || '*';
            root = (root) ? Y.Dom.get(root) : null || document; 
            if (!root) {
                return [];
            }

            var nodes = [],
            elements = root.getElementsByTagName(tag),//      
            hasClass = Y.Dom.hasClass;//    

            for (var i = 0, len = elements.length; i < len; ++i) {
                if ( hasClass(elements[i], className) ) {//     getElementsBy     
                    nodes[nodes.length] = elements[i];//    ++ ，    
                }
            }
            
            if (apply) {
                Y.Dom.batch(nodes, apply, o, overrides);
            }

            return nodes;
        },

위에 있는 get Elements By 방법이 비슷하지 않아요? 구체적으로 제 주석을 보세요.
기본적으로 모든 노드를 얻는 방법은 유사한 형식이다
다음은 등록 정보에 대한 방법으로, 위의 hasClass 방법과 마찬가지로 개인 방법을 호출합니다.
 

 
      _getAttribute: function(el, attr) {
           var val;
            attr = Y.Dom.CUSTOM_ATTRIBUTES[attr] || attr;

            if (el && el.getAttribute) {
                val = el.getAttribute(attr, 2);//      element   getAttribute  ，2 node_type
            } else {
            }

            return val;
        },

이쪽 Y.Dom.CUSTOM_ATTRIBUTES [attr]는 IE와 w3c의 별명을 유이가 봉인하는 것입니다.

CUSTOM_ATTRIBUTES: (!documentElement.hasAttribute) ? { // IE < 8
            'for': 'htmlFor',
            'class': CLASS_NAME // CLASS_NAME = 'className'
        } : { // w3c
            'htmlFor': 'for',
            'className': _CLASS // _CLASS = 'class'
        },

여기에 for나 htmlFor를 전송하는 것은 모두 허용되며 브라우저 버전에 따라 일치할 수 있습니다.
계속~~ 아래의 몇 가지 방법을 약술하다
getStyle()
이 설명도 많지 않다. getComputedStyle과currentStyle의 차이에 따라 브라우저를 구분하고 그 동안batch방법+사적인 방법으로 교체했다~
setStyle(el, property, val)
이 방법은 아버지를 괴롭히는 느낌을 비교한다. json 포맷의 css 전송을 지원하지 않는 것보다 뚜렷하다. opacity는 브라우저의 차이를 해결했고 플로트 속성은 IE의 스타일 플로트인지 w3c의 css 플로트인지 구분하지 않고 플로트에 직접 전달하면 된다.
getX랑 getY랑 getXY 다 써요.getXY의 개인적인 방법으로 이루어진 브라우저의 호환성 문제 해결
그리고 isAncessor라는 방법을 제시해야 한다. (API 문서를 보면 정말 웃긴다)

isAncestor: function(haystack, needle) {
            haystack = Y.Dom.get(haystack);
            needle = Y.Dom.get(needle);
            
            var ret = false;

            if ( (haystack && needle) && (haystack[NODE_TYPE] && needle[NODE_TYPE]) ) {
                if (haystack.contains && haystack !== needle) { // contains returns true when equal
                    ret = haystack.contains(needle);
                }
                else if (haystack.compareDocumentPosition) { // gecko
                    ret = !!(haystack.compareDocumentPosition(needle) & 16);
                }
            } else {
            }
            return ret;
        },

이쪽 haystack은 건초더미라는 뜻(조상 원소에 해당), 네델은 바느질 바늘이라는 뜻(자 원소에 해당), 이쪽은 특별한 이미지, yahoo의 엔지니어들은 하나하나가 보야, 가유머~~ 안드로이드 시스템 개발에서 토스트(힌트 팝업 하나widget)라는 방법이 있는데 왜 토스트라고 부르지?왜냐하면 서양의 토스트 빵은 모두 빵기에서 튀어나오기 때문이다!!너무 형상적이다!!그래서 프로그래밍을 할 때도 약간의 유머러스한 이름을 붙여서 인상적일 수 있다.
요약: YUI의 DOM 처리 방법의 공통점은 바로 전형삼의 첫 번째 파라미터는 기본적으로ele원소이다. 이것은 jQ에서 체인식 방식으로 이루어진다. 그 후의 파라미터의 본질은 사실상 같다. 전반적으로DOM의 사용 방법에서 jQ와 YUI는 약간 다르고 YUI는 약간 번거롭지만 그 본질을 따지자면 Dom원소 처리 방식은 사실 비슷하다.
다음 편에서는 이벤트 모듈에 대해 말씀드리도록 하겠습니다.