Yui 3 : 더 가볍고 빠르며 사용하기 쉽습니다-JS 튜토리얼-php.cn

팀이 가진 주요 관심사 중 하나는 모든 YUI 구성 요소에서 일관된 내부 역학과 일관된 API를 보장하는 것이 었습니다. 따라서 Yui 3에는 이제 정확히이를 허용하는 새로운 계층의 계층 구조가 있습니다. 예를 들어, 속성 클래스는 Get and Set 메소드, 초기 구성 지원 및 속성 변경 이벤트를 상속하는 클래스에 제공합니다. 또한 속성에서 물려 받고 상속하는 모든 클래스에 대한 이니셜 라이저 및 소멸자 방법과 같은 일부 상자 외 객체 지향 기능을 제공하는 기본 클래스도 있습니다. 마지막으로, 그들은 기본에서 상속하고 위젯의 렌더링을 관리하기위한 일반적인 모델-뷰 컨트롤러 구조 인 렌더 메소드와 같은 위젯에서 일반적으로 사용하는 공통 기능을 제공하는 위젯 클래스를 구축하고 공통 위젯 속성에 대한 지원을 제공했습니다. 또한 플러그인 등록 및 활성화 지원을 제공합니다 또 다른 문제 Yui 3가 극복 한 또 다른 문제는 스크립트가 그 안에 포함 된 하나 또는 두 개의 기능에 대해서만 무거운 라이브러리 조각을로드해야 할 때입니다. 예를 들어, YUI 2에서는 XMLHTTPREQUEST 호출을 수행하기 위해 전체 연결 유틸리티 (38KB, 미니 릴 때 12KB)를 포함시켜야합니다. Yui 3은 기능을 작은 서브 모듈로 나누어이 문제를 해결합니다. 그렇게하면 xmlhttprequest를 호출하기 위해 전체 유틸리티를 철수 할 필요가 없습니다. Yui 3에서는 IO 유틸리티의 IO- 기반 모듈만으로 19kb (4KB 미니딩)만으로 Xmlhttprequest 호출을 할 수 있습니다. 실제로, 전체 IO 유틸리티의 무게는 29KB (7KB 미니딩)이며 전임자보다 훨씬 기능이 풍부합니다. 예를 들어, 이제 IO-XDR 하위 모듈로 크로스 도메인 또는 XdomainRequest 호출을 할 수 있습니다. 선택 및 체인 Yui 2는 선택기 엔진을 소개했지만 도서관의 수명이 조금 늦어졌습니다. 결과적으로 전체 라이브러리는 구식 요소 페치 기술 주위에 제작되었습니다. 다시 말해, 참조가 필요할 때마다 요소의 ID 또는 요소 자체를 전달했습니다. 그러나 Yui 3을 사용하면 선택기 엔진이 라이브러리의 핵심에 바로 제작되었습니다. CSS 선택기 문자열을 전달할 수 있도록 모든 부분에 스며 듭니다. 생성자뿐만 아니라 이벤트 핸들러 설정 및 유틸리티 작업도 포함됩니다. 다음은 클래스 저자의 첫 번째 요소가 Draggable을 사용하는 예입니다.

var dd = new y.dd.drag ({

노드 : '.Author' });

yui 3에 반환 할 논리적 값이 없을 때마다 방법을 연쇄시킬 수있게하려고합니다. 다음은 행동의 예입니다

여기, 우리는 클래스 이름 저자와 첫 번째 요소를 참조하고 커서 스타일을 설정했습니다. 노드 및 이벤트 faã§ades

yui 3은 노드 유틸리티와 함께 DOM에 대한 새로운 추상화 레이어를 도입합니다. Yui 3은 DOM 요소에 대한 참조를 반환하는 대신 DOM 상호 작용을 크게 단순화하는 노드와 노드리스트를 반환합니다. 노드에는 별도의 기능으로 이동하지 않고 상호 작용하는 데 필요한 모든 기능이 포함되어 있기 때문입니다. 또한 노드에 의해 노출되는 방법은 필요할 때마다 브라우저 정규화를 처리하므로 작업 경험이 가능한 한 고통스럽지 않습니다. 요소에 클래스 이름을 추가하기 위해 Yui 2로 작성해야 할 내용은 다음과 같습니다.
Yui 3에서 이것은 다음과 같이됩니다
실제로 노드가 이미 손에 들고 있다면 NavProducts라는 변수로 말하면 다음을 수행 할 수 있습니다.

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

로그인 후 복사

yui 3은 DOM과의 상호 작용을 단순화했으며 이벤트 FAã§ade의 아이디어를 사용하여 이벤트 관리를 정규화했습니다. 모든 이벤트 청취자는 모든 브라우저 정규화를 처리하는 이벤트 파장을받습니다. 예를 들어, Yui 2의 경우 "기본값 방지"를 위해 다음 코드가 필요합니다.
이제 당신이해야 할 일은 다음과 같습니다
더구나,이 동작은 순수한 커스텀 이벤트로 연장되므로 기본값을 방지하고 전파를 중지 할 수있는 이벤트 파 §ades조차도 이벤트를받습니다. 다음 :이 새로운 방법 중 일부를 실제로 실천하자.
Y.get('.author').setStyle('cursor', 'move');
로그인 후 복사
로그인 후 복사

돈을 보여주세요! 나는 Yui 3이 얼마나 쉽고 강력한지를 보여주는 간단한 예제 페이지를 만들었습니다. 이 기사에 공간을 절약하려면 모든 마크 업과 코드를 보여주지 않지만 예제 페이지에서 전체 소스를 볼 수 있습니다. 내가하는 첫 번째 작업은 애니메이션 유틸리티, 슬라이더 위젯, 메뉴 나브 노드 플러그인 및 드래그 앤 드롭 유틸리티로 YUI 인스턴스를로드하는 것입니다. Yui는 Yahoo 서버에서 필요한 파일과 해당 종속성을 가져옵니다. 그런 다음로드 된 구성 요소가있는 YUI 인스턴스를 콜백 함수로 반환합니다.
YAHOO.util.Dom.addClass("navProducts", "selected");
로그인 후 복사
로그인 후 복사
> 다음으로, 나는 페이지의 내용을 볼 수있는 간단한 애니메이션을 만듭니다. 이를 위해 새로운 애니메이션 객체를 인스턴스화합니다. 나는 ID 메인과 함께 요소에 대한 참조를 전달하고 현재 어디에서나 최고 값을 0으로 애니메이션한다고 말합니다 (현재 Page의 마크 업에 지정된 바와 같이 -1000px입니다). 또한 애니메이션이 3 초가 걸리고 Elasticout 완화 방법을 사용해야한다고 지정합니다. 객체가 인스턴스화되면 실행 방법으로 실행하는 간단한 경우입니다.
다음, 사용자가 페이지의 기본 글꼴 크기를 조정할 수 있도록 슬라이더 객체를 설정했습니다. Yui의 글꼴 CSS (예제 페이지에 포함)는 페이지의 기본 글꼴 크기를 13 픽셀로 설정합니다. 다른 모든 글꼴 크기가 계산되는 신체 요소에 글꼴 크기 값을 설정하여이를 수행합니다. 이것이 전체 페이지의 글꼴 크기를 변경하기 위해 조작 할 것입니다. 나는 나중에 슬라이더와 함께 사용될 바디 요소에 대한 노드 참조를 잡습니다. 그런 다음 슬라이더 위젯을 만듭니다. 글꼴 크기 가이 값 내에서 유지되기를 원하기 때문에 최소값을 13으로, 최대 값을 28로 설정했습니다. 그런 다음 슬라이더의 레일 크기의 폭이 100 픽셀인지 확인합니다. 마지막으로 슬라이더의 썸 이미지 (Yahoo의 호스팅 서버에서 직접로드 됨)를 설정합니다.
<br> YUI().use('dd-drop', 'anim', function(Y) { <br> // Y.DD is available <br> // Y.Anim is available <br> }
로그인 후 복사
로그인 후 복사
일단 슬라이더가 인스턴스화되면, 그것은 단지 그것을 렌더링하는 단순한 문제 일뿐입니다. 나는 렌더링하고 싶은 요소의 클래스 이름으로 슬라이더의 렌더 메소드를 호출 하여이 작업을 수행합니다. 슬라이더 위젯은 해당 클래스 이름과 일치하는 DOM의 첫 번째 요소에서 렌더링됩니다.
지금해야 할 유일한 작업은 슬라이더를 연결하여 실제로 페이지의 글꼴 크기를 조정하도록하는 것입니다. 이것은 이벤트 후 이벤트에 연결하여합니다. Yui 3에는 표준 온 및 이벤트 이후 이벤트가 이전 버전보다 이벤트 처리를 훨씬 쉽게 만들 수 있습니다. 이제 ValueChange 이벤트가 발사 될 때마다 Body Element의 글꼴 스타일 값이 변경됩니다.
도 내비게이션 메뉴도 설정했습니다. 페이지 컨텐츠가 준비되면 Menunav 노드 플러그인을 NAV 노드에 연결합니다. 그런 다음 찾은 마크 업을 기반으로 내비게이션 메뉴를 자동으로 설정합니다. 코드는 다음과 같습니다
Y.get('.author').setStyle('cursor', 'move');
로그인 후 복사
로그인 후 복사
마지막으로, 나는 단순히 새로운 드래그 앤 드롭 객체를 인스턴스화하고 내 사진의 클래스 이름에 대한 참조를 전달함으로써 당신의 그림을 진정으로 드래그 할 수있게합니다. 객체가 생성 되 자마자 이미지는 드래그 가능합니다. 터치가 추가되면 이미지가 이미지 위로 떠날 때 마우스 커서를 변경하여 이미지가 드래그가 가능하다는 것이 분명합니다.

요약 , 당신이 볼 수 있듯이, Yui 3은 전임자와 완전히 다른 동물입니다. 새로운 구문과 함께 더 빠르고 가볍고 쉽고 유연한 라이브러리를 얻을 수 있습니다. 이것이 입문서를 보았을 때, 우리는 Yui 3에서 가능한 표면의 표면을 간신히 긁지 않았습니다. 자세한 내용은 Yui 3.x Preview Release 2 Page, Yui 3 및 Yui 3 포럼에서 Satyen Desai의 프레젠테이션을 확인하십시오. yui 3
YAHOO.util.Dom.addClass("navProducts", "selected");
로그인 후 복사
로그인 후 복사
에 대해 자주 묻는 질문 Yui 3의 새로운 기능은 무엇입니까?

Yui 3은 웹 개발을보다 쉽고 효율적으로 만들기 위해 설계된 새로운 기능을 소개합니다. 여기에는보다 유연한 이벤트 처리를 허용하는 새로운 이벤트 시스템,로드 및 모듈 사용 프로세스를 단순화하는 새로운 모듈 시스템 및 객체 속성으로 작업하기위한 일관된 API를 제공하는 새로운 속성 시스템이 포함됩니다. 또한 YUI 3은 DOM 조작을위한 노드 및 노드 및 NODELIST와 같은 다수의 새로운 유틸리티 및 위젯, AJAX 요청을위한 IO 및 재사용 가능한 UI 구성 요소를 생성하기위한 위젯을 포함합니다.
Y.get("#navProducts").addClass("selected");
로그인 후 복사
yui 3 모듈을 어떻게 생성합니까?

yui 3을 사용하여 새로운 모듈을 정의하는 방법 () 모듈의 종속성을 한 다음 모듈의 기능을 구현합니다. 모듈의 종속성은 모듈 이름 배열로 지정되며 모듈의 기능은 YUI 인스턴스를 인수로 수신하는 함수로 구현됩니다. 이 기능은 모듈의 메소드와 속성을 정의하는 곳입니다.
navProducts.addClass("selected");
로그인 후 복사
Yui 3의 새로운 이벤트 시스템은 어떻게 작동합니까?
Yui 3의 새로운 이벤트 시스템은 이벤트 대상 및 이벤트 처리기의 개념을 기반으로합니다. 이벤트 대상은 이벤트를 방출 할 수있는 객체이며 이벤트 핸들러는 해당 이벤트에 응답하는 기능입니다. EventTarget 클래스를 확장하여 이벤트 대상을 만들 수 있으며 on () 메소드를 사용하여 이벤트 핸들러를 이벤트 대상에 첨부 할 수 있습니다. 이 시스템은 이벤트가 처리되는 방식에 높은 수준의 유연성을 허용합니다.
Yui 3의 속성 시스템의 목적은 무엇입니까?
Yui 3의 속성 시스템은 객체 속성과의 작동을위한 일관된 API를 제공합니다. 읽기 전용 또는 쓰기 전용 여부, 기본값이 있는지 여부 및 값이 수정 될 때 변경 이벤트를 트리거 해야하는지 여부와 같은 특정 특성 세트로 속성을 정의 할 수 있습니다. 이 시스템을 사용하면 잘 정의 된 인터페이스가있는 객체를보다 쉽게 만들 수 있습니다.
ajax 요청에는 yui 3의 io 유틸리티를 어떻게 사용합니까?
Yui 3의 IO 유틸리티는 AJAX 요청을위한 간단하고 일관된 API를 제공합니다. IO () 메소드를 사용하여 요청을 보내고 URL, 요청 메소드 (GET 또는 POST) 및 요청과 함께 전송할 데이터를 지정하는 요청을 보내실 수 있습니다. io () 메소드는 응답을 처리하는 데 사용할 수있는 트랜잭션 객체를 반환합니다.
돔 조작을 위해 Yui 3의 노드와 노드 유틸리티를 어떻게 사용합니까?
YUI 3의 노드 및 노드 유틸리티는 DOM을 조작하기위한 간단하고 일관된 API를 제공합니다. Y.One () 메소드를 사용하여 단일 DOM 요소에 대한 참조를 얻을 수 있으며 y.All () 메소드는 요소 모음을 나타내는 노드리스트를 얻을 수 있습니다. 이러한 방법은 노드 및 노드를 반환하는데, 이는 그들이 나타내는 요소를 조작하기위한 다양한 방법을 제공합니다.
yui 3의 위젯 유틸리티를 어떻게 재사용 가능한 UI 구성 요소를 생성 하는가?
yui 3의 위젯 유틸리티는 재사용 가능한 UI 구성 요소를 만들기위한 프레임 워크를 제공합니다. 위젯은 본질적으로 특정 기능을 캡슐화하는 시각적 구성 요소입니다. 위젯 클래스를 확장하고 위젯의 동작 및 모양을 정의하는 메소드 및 속성을 구현하여 위젯을 만들 수 있습니다.
Yui 3에서 모듈을로드하고 사용하는 방법은 Yui (). 이 방법은로드 할 모듈의 이름을 인수하고 모듈이로드되면 실행할 콜백 기능을 사용합니다. 콜백 함수는로드 된 모듈에 대한 액세스를 제공하는 yui 인스턴스를 인수로 수신합니다.
yui 3의 오류를 어떻게 처리합니까? 이 메소드는 지정된 메시지와 함께 오류를 던지고 선택적으로 오류를 기록하고 현재 코드 블록의 실행을 중단합니다. 시도/캐치 블록을 사용하여 y.error ()가 던진 오류를 잡고 처리 할 수 있습니다. yui 3에서 클래스를 확장하는 방법은 y.extend () 메소드를 사용하여 Yui 3의 클래스 확장을 수행합니다. 이 방법은 작성할 클래스의 생성자, 클래스의 생성자를 확장 할 제작자, 새로운 클래스에 추가 할 메소드 및 속성을 포함하는 객체를 인수합니다. 새로운 클래스는 연장되는 클래스의 모든 메소드와 속성을 상속하고 세 번째 인수에 지정된 방법과 속성으로 추가하거나 재정의합니다.