다음 jQuery 코드를 YUI 2.x 코드로 번역하십시오.

Question

면책 조항 : YUI를 전혀 사용해 본 경험이 없습니다.

---

다음과 같은 줄의 jQuery 코드가 YUI로 작성되었을 때 어떻게 표시되는지 궁금합니다. 또한 YUI는 계층 적 종속성 시스템을 사용하기 때문에 코드가 작동하려면 파일을 .js에 포함시켜야합니까?

1. HTML 요소의 ID이 주어지면 요소에 여러 스타일 규칙을 적용하십시오.

$('#foo').css({ color: 'yellow', background: 'black' }); 

2. 체인 : HTML 요소의 ID 부여는 그 내용을, 거기에 스타일 규칙을 적용 그것에 bar의 클래스를 추가하고 설정 '!'.

$('#foo').css('color', 'red').addClass('bar').html('!'); 

3. 추가]

#menu에 LI 소자.

$('#menu').append('<li>An extra item</li>'); 

4. 기본 이벤트 바인딩하십시오 LI 요소가 클릭 될 때마다 경고를 보여줍니다.

$('li').click(function() { 
alert('Clickety-click!'); 
}); 

Answer 1

면책 조항 : 내가하는 YUI 전문가가 아니에요 이런 일을 할 수있는 더 나은 방법이있을 수 있습니다.

또한 jQuery는 사용자가 설정 한 것을 잘 수행합니다. YUI는 위젯을 위해 더 많이 구축되어 있으므로 jQuery보다 핵심 기능이 약간 덜 복잡합니다 (즉, 함수 호출로 DOM을 수행하려는 모든 것을 대체하지는 않습니다). 그들이 위젯을 원하기 때문에 나는 YUI 2.x를 사용하고있는 것처럼 느껴진다 (나는 메뉴를 꽤 사용한다).

# 1 : ... 또는

var el = YAHOO.util.Dom.get('foo'); 
YAHOO.util.Dom.setStyle(el, 'color', 'yellow'); 
YAHOO.util.Dom.setStyle(el, 'background', 'black'); 

YAHOO.util.Dom.setStyle('foo', 'color', 'yellow'); 
YAHOO.util.Dom.setStyle('foo', 'background', 'black'); 

# 2 :

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script> 

코드가 될 것이다 : 당신은이를 포함 할 필요가없는 체인 없다 YUI 2.x에서는 솔루션이 거의 동일하지 않습니다.

var el = YAHOO.util.Dom.get('foo'); 
YAHOO.util.Dom.setStyle(el, 'color', 'red'); 
YAHOO.util.Dom.addClass(el, 'bar'); 
// Not sure how to set contents with YUI... would just use: 
el.innerHTML = "!"; 

나는 어쨌든 체인을 신경 쓰지 않는다. 나는이 코드가 훨씬 더 읽기 쉽다고 생각한다. (사설을 위해 죄송합니다.)

# 3 : 다시 한번, innerHTML을 사용하는 것 외에 html을 직접 설정하는 방법을 모르겠다.나는 그냥있을 거라고 생각 :

var el = YAHOO.util.Dom.get('menu'); 
el.innerHTML += '<li>An extra item</li>'; 

# 4 : 당신은이 솔루션에 대해 다른 클래스를 포함해야합니다 :

var lis = document.getElementsByTagName("li"); 
YAHOO.util.Event.addListener(lis, 'click', function() { 
     alert('Clickety-click!'); 
    }); 

: 여기

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script> 

그리고 것은 코드의 다시 말하지만, 이것은 유음에서 두번째로 큰 YUI 솔루션이 아닐 수 있습니다. 또한, "YAHOO.util.longname.method"의 지속적인 사용에 대해 걱정이된다면, 당신은 쉽게 자신 만의 지역 변수를 만들 수 있습니다. YUI는 도서관이 모든 시간을 수행

(function() { 
    var Event = YAHOO.util.Event; 

    // Insert all your code here... 
})(); 

Answer 2

당신이 YUI 2.이 지역에서 많은 작업이 upcoming YUI 3에서 수행되었습니다에서 코드를 작성하는 것은 매우 자세한입니다 다니엘의 대답에서 볼 수 있듯이. 다음은 YUI 3에 코드를 작성하는 방법입니다.

YUI().use('node', function(Y) { 
    // #1 
    Y.get('#foo').setStyles({ color: 'yellow', background: 'black' }); 

    // #2 
    Y.get('#foo').setStyle('color', 'red').addClass('bar').set('innerHTML', '!'); 

    // #3 
    Y.get('#menu').appendChild(Y.Node.create('<li>An extra item</li>')); 

    // #4 
    Y.all('li').on('click', function() { 
     alert('Clickety-click!'); 
    }); 
}