YUI 코드 읽기 일기 YAHOO.util.Dom - Part.1_YUI.Ext 관련

먼저 헤더에 있는 많은 if...else를 우회해 보겠습니다(실제로 toCamel 및 getStyle이라는 두 함수를 정의함). 브라우저의 일관성 없는 구현으로 인해 이러한 코드에 대해서는 나중에 이야기하기가 매우 어렵습니다.

YAHOO.util.Dom 클래스의 보물을 살펴보겠습니다. 현재 내 생각은 점차 나누어져 있다. 기능을 보고 기능을 말한다.

// 기본적으로 document.getElementById의 복제본으로 간주할 수 있습니다.
get: function(el) {
// 이미 HTMLElement인 경우 직접 반환
if (el && ( el.nodeType || el.item)) {
return el
}

// 문자열인 경우 이 ID를 가진 요소를 반환합니다.
if (YAHOO. lang .isString(el) || !el) {
return document.getElementById(el)
}

// Eelement를 얻기 위해 자신을 호출하는 루프
if ( el.length !== 정의되지 않음) {
var c = [];
for (var i = 0, len = el.length; i c[c. length] = Y.Dom.get(el[i]);
                                                                                  미묘함. 솔직히 위 코드의 루프 본문을 생각하지 않는다면 아마

for (var i = 0, len = el.length; i c[c.length] = document.getElementById(el[i]);
}정상적으로 작동할 수는 있지만 이전 판단은 의미가 없습니다.

빠른 둘러보기를 계속하면서 이제 getElementsByClassName의 내부 메커니즘을 살펴보세요. getElementsByClassName에 대한 자세한 호출은 YUI 설명서를 참조하세요.

getElementsByClassName: function(className, tag, root, apply) { // 태그 태그를 가져옵니다. 기본값은 모두("*")입니다.
tag = tag ||
// 노드 이름 지정
root = (root) ? Y.Dom.get(root) : null || document; if (!root) {
return []; > }

// 노드 정보 초기화
var node = [],
elements = root.getElementsByTagName(tag),
re = getClassRegEx(className)

//
규칙을 따르지 않는 노드를 필터링합니다. for (var i = 0, len = elements.length; i if ( re.test(elements[i].className ) ) {
// i를 사용하는 대신에 node.Length를 사용하는 이유가 매우 이상할 것입니다.
// 신중하게:^)
노드 [nodes.length] = Elements [i]
/ / 콜백 함수 실행
if (apply) {
apply.call(elements[i], elements[i])
} }

return node; > }, 교과서 스타일의 DOM 노드 획득 및 필터링, 초기화 데이터 및 작업 데이터는 모두 매우 엄격하고 형식적입니다. YUI의 코드는 나에게 "보안"이라는 느낌을 줍니다.마찬가지로 또 다른 getElementsBy 함수가 있는데, 해당 코드는 다음과 같습니다.

getElementsBy: function(method, tag, root, apply) {
// 위 함수와 약간 동일합니다.
tag = 태그 || ' *';
루트 = (루트) ? Y.Dom.get(root) : null || 문서

return []; 🎜> }

var 노드 = [],
elements = root.getElementsByTagName(tag);

for (var i = 0, len = elements.length; i                                                                                                  ~                {
                  적용(요소[i]);