야후 사용자 인터페이스 블로그 (YUIBlog)

CDN에서 현재 사용 가능 YUI 3.4.0 미리보기 릴리스 3

YUI 팀은 3.4.0 릴리스에 대한 최종 개발 전력 질주를 완료했습니다. 이때 우리는 코드가 기능적으로 완전한 고려하십시오. 우리는 테스트 및 더 많은 예제와 문서를 만드는 우리의 마지막 라운드에 초점을 우리의 다음 경주를 보낼 예정입니다. 우리는 FC를 게시 (기능성 완료) 사회 탐구 및 피드백을위한 CDN에 빌드합니다. 당신의 이번 릴리스에 액세스할 수 있습니다 http://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.js을 .

우리는 지역 사회의 의견을 받고 싶기도 도서관의 일부 특정 영역이 있습니다 :

• 로더는 3.4.0에 대한 중요한 업데이 트가 있었다. 당신은을 통해 수동 하중 사양하고있다면 use("*") 또는 submodule 구성의 활용을, 우리는 크게 우리가 정확하게 모든 유스 케이스를 처리하고 있는지 될 새로운 로더 사용하여 코드를하려고 감사하겠습니다. 이 릴리스에서 로더 변경에 대한 자세한 내용을 참조 3.4.0 로더 변경을 설명하는 블로그 게시물 .
• 일정 및 패널은 모든 기능과 개발자 사용할 준비가되어 있습니다.
• 그래픽 :. PR2 릴리스에서 배포 그래픽 API에 작성된 모든 실험적인 코드에 영향을줍니다 몇 가지 API의 변화가 생겼습니다 getShape() 변경되었습니다 addShape() . 또한 여러 속성 교체 있었다.
• 전환 : 원시 전환은 이제 파이어 폭스에서 지원됩니다.
• WidgetButtons 귀하가 표준 모듈 지원 기능을 구현하는 위젯의 머리글과 바닥글에 CSS 스타일의 버튼을 배치 수있는 새로운 위젯 확장으로 릴리스되었습니다.
• 위젯 - 양상 및 위젯-AutoHide 플러그인은 확장 기능으로 변환되었습니다.
• 위젯 : 위젯의 boundingBox 내에 포함된 모든 자식 노드를 (뿐만 아니라 boundingBox 및 contentBox)를 제거하고 파괴할 것이다 파괴에 대한 지원이 추가되었습니다 (사실). ) (파괴는 모든 자식 노드를 파괴할 가능성이 높은 런타임 비용으로 인해 현재 동작을 유지합니다. 귀하의 응용 프로그램에서 위젯을 파괴하거나 사용자 정의 위젯 개발자의 경우,이 변경 사항을 테스트에 도움을 주신다면 고맙겠.
• ScrollView는 이제, 수직 페이징을 지원 scrollview - 목록 즉각 목록 요소의 CSS classnames를 추가하는 플러그인뿐만 아니라 몇 가지 버그 수정 및 리팩토링을 포함
• 애플 리케이션 프레임 워크 : 우리는 진심으로이 새로운 애플 리케이션 프레임 워크를 운전 테스트하는 시간을 받아들 였 사회에서 개발자 모두에게 감사 확장할 싶습니다. 우리는 PR2 릴리스에 따라 우수한 피드백을 받았습니다. 이러한 구성 요소를 탐구하고 우리에게 관찰과 제안을 보내 계속하십시오.

당신은 검토하여이 릴리스의 내용에 추가 정보를 얻을 수 연혁 롤업 와 PR3에서 해결 티켓 전체 목록 . 어떠한 개선 요청, 버그와 regressions를 제출하시기 바랍니다 YUILibrary.com에서 티켓 데이터베이스 .

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI : 개관 시간은 7월 28일을 목

Y.Calendar 3.4.0에 온다

달력 YUI 두 가족의 인기 위젯 중 하나이며, 그것은 3.4.0에서 YUI 3 아키텍처의 데뷔 만들고있어. 앨런 Rabinovich는 , 컴포넌트 소유자 및 작가이며,이 늙은 좋아하는 우리를 reintroducing 전화에있을 것입니다 2.x에​​서 캘린더가 직면한 문제에 대한 새로운 접근법을 보여주고 있습니다. 나는 특히 국제화에 대한 지원에 대해 재미있었 잖아지만, 새로운 렌더링 규칙도 꽤 매력 있습니다 해요.

들어와서하고 날짜 선택 도구, 이벤트 캘린더, 수입에서-iCal은 앤 메이크업 팬케이크 질문 및 당신과 기능 요청 우리가 육체 밖으로 현재와 미래를 같이 가져 Y.Calendar . (아니, iCal은를 가져올 것이지만, 누군가가 그 짐승을 길들하는 갤러리 모듈을 만들고 싶은 경우에, 당신을 위해 거기에 ;) YUIConf 티켓 고럼있다)

우리는 평상시 이번주에 돌아 왔구나, 그래서 우리가 태평양 서머 타임 오전 10시에 연결에서 보자.

시간 및 세부 정보

우리는 오전 10 시부터 태평양 서머 타임 오전 11시 목요일 온라인습니다. 연결 세부 사항은 평소와 동일합니다.

1. (스카이 프 이외 참가자에 좋은 효과 *) 1-888-371-8922에 전화 걸기
2. 참석자 코드 47188953을 입력합니다 #
3. 화면 공유 세션에 참가 (이것은 그것을 처음 사용하는 경우 이것이 당신이 어도비 커넥트 플러그인을 설치하라는 메시지가 나타납니다)

참고 : 오픈 컨퍼런스 라인 이니까, 우리는 그들이 적극적으로 토론에 참여하지 않는 방문객들이 줄을 음소거 주시기 바랍니다.

* - 스카이 프가 옵션이 없다면, 지역 번호 freenode에 # YUI IRC 채널에서 날 이메일을 보내거나 나를 (ls_n)를 잡을 수있어.

녹음

에 전화 해 주셔서 모두에게 감사합니다! 세션의 온라인 녹음은 이제 사용할 수 있습니다.

높은 품질, 아이폰 / iPad 호환, 다운로드 기록은 여기입니다 .

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI : 개관 시간 목 7월 21일

DataTable의 업데이 트와 갤러리 쇼케이스

그것이 있어야로 3.4.0 릴리스주기가 끝나 가고 있으며 훌륭한 기능도 넣어서 포장되지만 노골적으로 말하기, DataTable의 많이 개발 초점으로 곳이 없었어요. 하지만 몇 가지 버그 수정, 그리고 3.5.0에서 타겟으로하는 변화를위한 계획의 공정한 금액과 그 개발 커뮤니티 참여로 좋은 출발 있었다.

우리는 DataTable의 고객이 많이위한 매우 중요한 도구임을 알고, 그래서 우리가 초점을 맞춘 개발 지연의 비용을 알고 있습니다. 이 개관 시간은 3.5.0 계획는지, 3.4.0에 대한 뭐하고되는 작업에 업데이트되고, 기능을 추가하여 DataTable에 대한 버그를 (그리고 고쳐 갤러리에서 튀어하기 시작 했어요 훌륭한 작품을 소개합니다 클래스를 지원하는 자사의 제품군).

우리는 이상 보일거 갤러리 패치 번호를 제공하는 것 에이몬 Brosnan (일명, # YUI의 mosen)의 이익을 위해 한 시간 전에 이번 주에 온라인습니다. 그렇지 않으면, 우리는 다른 # YUI의 생물과 그들의 실력을 보여주는 갤러리 제공자가됩니다. 당신이 공유하고 싶은 진행하여 DataTable 솔루션이나 직장이있다면, 그래서 다 (# YUI 또는 ls_n에 맞게 일정을 차단할 수 있습니다 알려주시기 바랍니다 트위터 ).

시간 및 세부 정보

우리는 오전 9시에서 태평양 서머 타임 오전 10시 목요일 온라인습니다. 연결 세부 사항은 평소와 동일합니다.

1. (스카이 프 이외 참가자에 좋은 효과 *) 1-888-371-8922에 전화 걸기
2. 참석자 코드 47188953을 입력합니다 #
3. 화면 공유 세션에 참가 (이것은 그것을 처음 사용하는 경우 이것이 당신이 어도비 커넥트 플러그인을 설치하라는 메시지가 나타납니다)

참고 : 오픈 컨퍼런스 라인 이니까, 우리는 그들이 적극적으로 토론에 참여하지 않는 방문객들이 줄을 음소거 주시기 바랍니다.

* - 스카이 프가 옵션이 없다면, 지역 번호 freenode에 # YUI IRC 채널에서 날 이메일을 보내거나 나를 (ls_n)를 잡을 수있어.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI에 의한 차세대 YSlow 구동

몇주 전에, 야후 발표 모바일 YSlow를 에서 속도 2011 모바일 세계로 YSlow 성능 분석의 능력을 가져.

모바일에 대한 YSlow 같은 작품 북마크 , 그게 가능 이외의 브라우저에서 실행되도록 만드는 파이어 폭스 (추가 기능 등) 또는 크롬 (확장자 등) .

YSlow 구조는 부분적으로 크로스 플랫폼과 YUI가 sandboxing, 크로스 브라우저 추상화하고 가능한 간단한 YQL 액세스 할에서 필수적인 요소라고 작동하도록 재설계되었습니다.

Sandboxing

성능 분석과 페이지 자체 덤비는없이 방해하지 않고 페이지에 삽입하기 위해, YSlow는 YUI sandboxing의 힘을 활용하여 모든 페이지에 자바 스크립트와 CSS를 주사 북마크입니다

북마크 홈페이지 :

 자바 스크립트 : (함수 (Y, P, O) {
     P = y.body.appendChild (y.createElement ( 'iframe이'));
     p.id = 'YSLOW - 북마크';
     p.style.cssText = '표시 : 없음';
     O = p.contentWindow.document;
     o.open ()는. (쓰기 '
         <HEAD>
         <본문 onload = "
             YUI_config = {
                 승리 : window.parent,
                 DOC : window.parent.document
             };
             VAR D = 서류;
             d.getElementsByTagName (\ '머리 \') [0]
                 . appendChild (
                     d.createElement (\ '스크립트 \')
                 ). SRC = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \' "
         >
     ');
     () o.close
 } (문서))

: 위의 코드

• 비어있는 iframe을 만듭니다;
• 페이지 본문에 추가합니다 그것을;
• iframe이 *을 숨깁니다;
• 자사의 윈도우 핸들러를 얻을;
• 콘텐츠로 iframe의 시체를 씁니다;
• 이 육체가 비어 있지만있는 onload 이벤트를
• onload 이벤트 YSlow JS를 주입하는 방법을 정의합니다 :
  • 설정 YUI_config , 그래서 win 와 doc 분석중인 페이지로 포인트 window 와 document 각각
  • 동적으로 생성하여 YSlow URL을 넣을 script iframe이의에 요소를 head

* iframe이 모든 YSlow 프레 젠 테이션 자산가로드되는 시간으로 표시됩니다

이것은 페이지가 분석중인에 iframe을 삽입합니다. 이것은 IFRAME은 sandboxed 환경 역할을하고 YSlow가 그 안에서 살고 있습니다. iframe이가 동적없이 만들어지고 있기 때문에 src 속성이 전혀 없습니다 있기 때문에, 그것의 부모 (페이지가 분석중인)에 접근이있을 것이다 동일한 원산지 정책 일도 일어나는 위반이.

YUI_config 는 설정 때문에 객체가 편리 win 와 doc IFRAME의 상위 (페이지가 분석중인)하는, 따라서 어떤 새로운 YUI의 인스턴스에 대한 모든 호출 기본, 배선으로 부모 문서에 바인딩됩니다 Y.all 및 Y.one 통해 Y.config.win 또는 Y.config.doc 선택 YUI에서 use 콜백.

YSlow의 프레 젠 테이션은 IFRAME에 의해 처리됩니다 window 과 document 뿐 아니라 상위 페이지의 스타일을 충돌없이 IFRAME 내에서 외부 CSS를 페치로 YSlow 메인 스크립트 마크업을 렌더링할 수 있도록 참고 문헌. YSlow는 나중에 성능 분석에 필요한 모든 구성 요소 (이미지, 스크립트, 링크, 배경 - 이미지, 플래시 등)을받을 수 있도록 상위 페이지를 검색합니다. 이것은 액세스하여 이루어집니다 Y.config.win 및 Y.config.doc 들이 상위 페이지를 참조하십시오 이후.

크로스 브라우저 추상화

북마크이기 때문에 모바일에 대한 YSlow는 모든 브라우저 *에서 작동해야합니다. YUI는 깨끗하고 읽기 쉬운 코드베이스와 maintainable 결과, 브라우저 차이를 정상화하여 크로스 브라우저 문제 초록.

YSlow 완전히 YUI 3로 포팅되지 않았습니다 - 이제에서만 컨트롤러 레이어 (향후 응용 프로그램 구성 요소에서) - 그렇지만, 모든 DOM 조작 및 이벤트 처리는 의해 수행되는 node 와 event 모듈. 차후 버전에서는 YUI 3로 더 YSlow 기능을 포팅할 계획입니다.

* 모든 브라우저를 지원하고 있습니다

YQL

YSlow는 페이지에있는 구성 요소에 HTTP 헤더를 선택하여 페이지를 분석합니다. HTTP 응답 헤더 페이지에서 사용할 수 없습니다, 따라서 이러한 구성 요소는 응답 헤더 정보를 얻을 YSlow 위해서 다시 요청해야합니다. 이것은 XMLHttpRequest의 (AJAX)를 통해 구성 요소 URL의 목록을 요청했지만 불행히로 인한 의해 달성될 수있는 동일 출처 정책 제한 모든 구성 요소가 매우 가능성있는 페이지와 동일한 도메인에있는 않는 한이 불가능합니다.

동일 출처 정책 제한을위한 일반적인 해결 방법은 외부 서버 구성 요소 URL의 목록을 요청하고 YSlow를 대신하여 자신의 HTTP 응답 헤더를 검색 프록시로서 작동 JSONP를 사용하고 있습니다. YSlow의 인기와 최근 모바일 성능 분석 노력으로 인해, 우리는 모바일 북마크에 대한 YSlow에 대한 매우 무거운 트래픽을 기다릴 겁니다. 이러한 트래픽을 지원하기 위해, YQL은 통해 YSlow 채택 확장 가능한 솔루션이었다 개방형 데이터 테이블 의 이름 data.headers 예상 컨텐츠한지 user-agent를 도용하는 동안 URL의 특정 목록에 대한 응답 헤더와 컨텐츠를 검색, 검색.

YQL 쿼리 구성 요소가 훨씬 간단하고 쉬운 유지 YSlow 컨트롤러 코드를 만드는 후드 아래 JSONP 요청을 관리하면서 YQL 쿼리를 관리하는 모든 작업을 수행합니다.

향후 개선 사항 : 모바일 친화적인 인터페이스를위한 새로운 YSlow

현재 모바일 사용자 경험에 대한 YSlow는 데스크톱 경험과 동일합니다. 성능 분석 데이터의 긴 목록을 다루는 것은 작은 스마트 휴대 전화 화면에서 최상의 경험이 아닙니다. YUI도 초록 때문에 크로스 장치 제스처를 , 모바일에 대한 YSlow는 앞으로의 릴리스에서 새로운 모바일 친화적인 인터페이스를 얻을 것이다.

성능 도구의 성능

모바일 배포 YSlow는 신중하게 페이지가 분석되는 로딩 시간에 미치는 성능 영향을 고려하여 만들어졌습니다. YSlow에 사용 YUI 세 모듈은 가능한 한 빨리 YSlow를로드하는 데 필요한 전용 모듈을 포함하도록 시시콜콜 따지는했다. YUI의 씨앗 파일과 로더가 포함되지 않았습니다 필요한 모든 모듈과 submodules는 다음과 결합 이후 라이언 그루브의 성능 선종 yslow-bookmarklet.js : 하나의 작은 하나의 요청으로 함께 모든것을로드하는 것이 가능하게 팁, 2백4킬로바이트, 66킬로바이트는 ( gzip을) 위치 :

• YUI : 75킬로바이트, 27킬로바이트 (gzip을)
• YSlow : 129킬로바이트, 39킬로바이트 (gzip을)

YSlow에 대한 자세한

계속 최신하여 최신 YSlow 공고 대상 :

• 에서 디자인된 YSlow 페이지를 방문 getyslow.com
• 페이스 북에서 원하는대로 YSlow : facebook.com / getyslow
• 트위터에 따라 YSlow : twitter.com / getyslow

저자 소개 : 마르셀 듀란 야후의 뛰어난 성능 팀을위한 프런트 엔드 리드입니다. 그는 야후 프론트 페이지 및 그 적용 검색 팀의 높은 트래픽이 사이트에 대한 웹 성능 최적화에왔다가 더 빨리 페이지를 만들어 웹 성능 모범 사례를 연구하고있다. 그는 지금 YSlow 및 기타 성능 도구 개발, 연구와 전도에 전념하고 있습니다. 그의 목표는 될 수있는 것보다 더 빠르게 웹 만들어이며 "단 몇 밀리초가 아프지 않을 것이다"와 같은 것은 존재도 믿지 않습니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

등급 브라우저 지원 업데이트

GBS 변경

이 업데이 트에 대한 구체적인 변경 사항은 다음과 같습니다 :

• 더 이상 경험 등급을 할당하지
• 특정 운영 체제 (휴대폰 제외) 처방 중단
• 인터넷 익스플로러 9 추가된 보험
• 파이어 폭스 4에 대한 범위를 추가했습니다. †
• 파이어 폭스 5 범위를 추가했습니다. †

참고 사항 :

• 단검 기호 ( "파이어 폭스 4. †"에서와 같이) 해당 분기 수준에서 가장 최신 베타 버전이 아닌 버전이 지원을받는 것을 나타냅니다.
• 어떤지도 IOS이나 안드로이드 운영 체제의 장치 사용에 제공하지 않습니다. 추천서는 각 OS에 대한 사용자 기반의 대부분을 대표하는 기기를 선택하는 것입니다.

브라우저 테스트 기준에서 성적을 제거

GBS 업데이 트의이 버전은 우리가 경험 등급 (예 : "급"와 "C 등급")에 직접 매핑 브라우저으로부터 멀어지고있다는 점에서 우리의 이전 업데이 트에서 출발을 나타냅니다. 어떤 브라​​우저를 위해, 우리는 시험 범위를 극대화하고 테스트 표면을 최소화 효율 기준 테스트 전략을 정의에 집중할 겁니다 사용자 경험을 적절한 어떤 처방 하기보다. 예를 들어, IE6의 - 여전히 중요한 글로벌 marketshare 영장이 테스트를 계속되지만 오늘의 GBS는 IE9의 경험과 다른 것으로 IE6 사용자 경험을 허용합니다.

브라우저 테스트 기준에서 운영 체제를 제거

테스트를 간소화하고 리소스 요구 사항을 최소화하기 위해, 우리는 더 이상 운영 체제에서 테스트해야 지정할 없습니다. 브라우저가 단단히 우리가 OS 버전이 아닌 브라우저 버전 (예 : "사파리 IOS 4")를 참조하는 경우에는 운영 체제 버전,와 결합되었을 때 유일한 예외입니다. 이것은 우리가 브라우저 버전으로 테스트 범위를 집중하고, 플랫폼에서 redudant 테스트를 최소화할 수 있습니다. 버전에서 동일한 브라우저에서 문제가 무시할 수 있고, 일반적으로 주요 취급 및 사용 가능한 글꼴과 같은 높은 수준의 운영 체제의 차이에 관한. 교차 플랫폼 문제를 언급하는 것으로 알려져 코드는 가능한 많은 플랫폼로 테스트해야하지만,이 테스트는 일반적으로 오히려 모든 기능의 전체 회귀 테스트를 실행하는보다 구체적인 문제에 격리 수 있습니다. 귀하의 사용자 기반으로 정렬 운영 체제 테스트 우선 순위를 권장합니다.

왜 IE6가리스트에 있나?

IE6는 아직 확인된 허용되는 사용자 경험을 보장하기 위해 상당한 정도로 세계 시장 점유율을 가지고 있습니다. 프로 그레시브 향상 전략으로 한 일반적인 오해는 사실 정말 그것이 HTML 전용 경험을 전달해야한다는 것을 의미했을 때 한 번 브라우저는 그것이 "지원되지 않는"가되는 "C 등급"을 입력한다는되었습니다. 결정하는 프로젝트들이 사용자와 자원에 기초를 위해 우리는 더 이상 브라우저가 어떤 경험을받을 수있는 처​​방도 이제 것으로, 이것은 남아있다. GBS는 시장 점유율과 영향력 등 요인에 따라 확인 가능한 경험을 필요로 브라우저 지정에 초점을 맞추고 있습니다. 팀이 결정하기 위해 "사용할"무엇인지 정의하고 저하의 허용 수준을 specifiying가 남아 있습니다. 우리는 여전히 단순 홍보 그레시브 향상 모델을, 그리고 추가적인 개발 비용, 테스트 및 유지 보수 리소스에 대한 회계 않고 새로운 계층을 만들 프로젝트를 억제.

GBS 예보

우리는 다음 업데이 트에서 다음과 같은 변경을 수행할 것으로 기대 :

• IOS 3 사파리에 대한 범위를 중단.
• 안드로이드 3 웹킷에 대한 범위를 추가합니다.
• 파이어 폭스 6 범위를 추가합니다.
• 사파리 IOS 5 범위를 추가합니다.

GBS 아카이브

• GBS 업데이트, 2010년 11월 3일
• GBS 업데이트, 2010년 2월 16일
• GBS 업데이트, 2009년 10월 16일
• GBS 업데이트, 2009년 7월 2일
• GBS 업데이트, 2009년 1월 28일
• GBS 업데이트, 2008년 7월 3일
• GBS 업데이트, 2008년 2월 19일

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

"MakeNode"위젯 확장

편집자 주 :이 문서는 원래 출판 되었음 이후 MakeNode 모듈 YUI 갤러리에 게시되어 일부 향상된 기능을 받았습니다. 업데이트된 기사를 참조하십시오 "MakeNode"위젯 확장 : 업데이트 .

나의 이전 기사에서 YUI 3 응용 프로그램에 대한 레시피는 , 제가 사용하는 방법 보여주 Y.substitute 매우 기본적인 템플릿 프로세서로합니다. 아이디어 # YUI IRC 채널에서 여러분의 제안과 함께, 거기에서 생명을 갔고, 나는 내 사이트에서 사용할 수있는 위젯 확장했다,라는 MakeNode . MakeNode는 일반 템플릿 프로세서가 아니며 그것은 하나 의미되지 않습니다. 반면에, 그것은 단단히 YUI와 통합되어 위젯 클래스와 이벤트 헬퍼 및 국제화를 포함하여 기초 클래스. 이 문서에서 나는 소요됩니다 스피너 예제와 이전 문서의 지침을 따르도록 그것을 수정하고 MakeNode을 사용한다. 수정된 스피너 구성 요소 ( JS , CSS , 스프 라이트 )뿐만 아니라 예를 들어 내 사이트에서 사용할 수 있습니다. 추가 리소스에 대한 링크는이 문서의 끝 부분에서 찾을 수 있습니다.

구성 요소를 확장

일단 MakeNode가로드되고, 당신의 모듈을 포함시킬 필요가 YUI().use() 이름을 사용하여 성명 'makenode' . 그런 다음 위젯을 연장하기 위해, 당신은 할 세 번째 인자에 나열 Y.Base.create() 과 같이 :

  Y.Spinner = Y.Base.create (
      '스피너'
      Y.Widget,
      [Y.MakeNode가]
      {
         / / 인스턴스 멤버 ...
      }
      {
          / / 정적 멤버
      }
 ); 

당신은 그러한 WidgetParent, WidgetChild, WidgetStdMode와 같은 위젯에 적합한 확장의 수를 따라 MakeNode를 추가할 수 등 MakeNode 두 가지 보호 방법, 추가 _makeNode 및 _locateNodes, 발견한다면 그것은 몇 가지 정적 속성에서 읽을 수 있습니다.

그들이 그들과 함께 귀찮게하지 말아야 구성 요소를 사용 도구자하여 구성 요소 개발자가 아닌 의해 사용될 의미되므로이 확장의 모든 구성원 중 보호 또는 개인입니다.

템플릿 정의

평소 할 첫번째 일은 당신의 구성 요소에 대한 템플릿을 정의하는 것입니다. 스피너 들어, 템플릿이 될 것입니다 :

  _TEMPLATE : [
     '<input type="text" title="{s input}" class="{c input}">'
     '<button type="button" title="{s up}" class="{c up}"> </ 버튼>',
     '<button type="button" title="{s down}" class="{c down}"> </ 버튼>'
 ]. 조인 ( '\ n'을), 

기본 템플릿은 일반적으로 명명됩니다 _TEMPLATE 와 같은 클래스의 다른 정적 속성, 함께 선언 ATTRS . 다른 누구도 명시적으로 제공되지 않을 경우 MakeNode이 템플릿을 사용합니다. 템플릿은 일반 HTML 플러스 곱슬 브래킷로 묶어 자리 표시 일련의, 단일 문자 (처리 코드)로 만들어진 하나 이상의 인자가 뒤에 각각 이루어져있다. 자리 표시 자와 그들이 생산하고 있습니다 :

• {@ attributeName} 구성 속성 값이

• {p propertyName} 인스턴스 속성 값을

• {m methodName arg1 arg2 ….} 특정 메서드의 반환 값입니다. 처리 코드는 메서드 이름과 공백으로 구분된 인수의 수에 따라하고 있습니다. 문자열은 이중 인용 부호로 묶어야합니다. 숫자, 논리값 및 null 자신의 적절한 데이터 형식을 문자열로 변환됩니다

• {c classNameKey} 에서 생성된 CSS의 클래스 _CLASS_NAMES 고정 자산

• {s key} 에서 문자열 strings 사용 특성 key 하위 속성으로.

• {? other placeholder } 문자열을 생산 checked 자리 표시 자의 나머지 부분을 처리의 결과에 해당하면됩니다.

• {} 다른 모든 가치는 것처럼 처리됩니다 Y.substitute 않습니다.

예를 들어, {@ value} 로 번역됩니다 this.get('value') 동안 {p value} 로 해석 this['value'] .

{m} 자리 표시가 좀 더 복잡합니다. 이후 첫 번째 인수 m 처리 코드는 메서드의 이름과 주어진 메서드에 전달됩니다 모두 공백으로 구분 인수, 나머지입니다. 이러한 인수는 숫자, 될 수 null , true , false 따옴표로 묶여 또는 문자열. MakeNode 그들을 파싱하기 때문에, 그들의 적절한 타입으로 변환합니다 {m myMethod 123.45 true “this is a string”} 호출하게됩니다 this.myMethod(123.45, true, “this is a string”) 그래서 처음 두 인자 자신의 정확한 데이터 유형으로 변환되고 문자열은 공백을 포함할 수 있습니다. 따옴표를 포함하려면 사용할 \\" , JavaScript가 단 한명도를 해석하고 MakeNode하는지기 전에 그것을 버리고.에만 따옴표가 허용되며, MakeNode는 사용하지 않는 것이기 때문에 요구되는 이중 백슬래시 eval() 파서이 한정되어 있으므로 하지만 안전합니다. 거만 빼고 숫자, null , 논리값, 이중 인용 문자열은 무시됩니다.

{?} 자리 표시 체크 박스와 라디오 버튼과 함께 사용하는 것이 편리할 때가 많다. 그것은 문자열이 생성됩니다 “checked” 다음 처리 명령 코드의 진리 값에 따라. 따라서 <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> 경우 표시된 체크 박스를 생성합니다 getLength 방법은 아무것도하지만, 제로를 반환합니다. {?} 그것들은 오직 처음 세이 될 수 있지만, 다른 자리 표시 중 하나를 받아들일 것입니다.

들어 {c} 자리 표시 자, 우리는 필요 _CLASS_NAMES 속성이 정의된.

또한 나타내지는 말로 놈들을 추가하여 MakeNode에 추가할 수 _templateHandlers 해쉬.

_CLASS_NAMES 속성

함께 ATTRS 및 _TEMPLATE 정적 속성, 우리는 정의할 수 _CLASS_NAMES 문자열 배열을 손가락으로 가리 키 속성을. 이러한 문자열의 각 클래스를 생성하는 데 사용됩니다. 따라서 _CLASS_NAMES: ['input'] 클래스 생산할 것이다 “yui3-spinner-input” . 이러한 classNames은 인스턴스 속성에 저장됩니다 this._classNames . {c input} 위 템플릿에서 자리 표시 자이에 의해 대체될 것이다 “yui3-spinner-input” .

당신이 사용할 수 _CLASS_NAMES 는 템플릿이나하지에 사용할 것인지, classNames의 번호를 생성하는 속성을. 당신은 여전히 내부에서 그 여분 classNames에 도달할 수 this._classNames . 클래스를 사용하여 생성되는 yui3 의 값은 다음 접두사 NAME 고정 자산은 소문자로 설정되어 다음에 주어진 문자열 _CLASS_NAMES (이 마지막 하나가 소문자 켜져되지 않습니다), 모두 하이픈으로 구분합니다. _classNames 해시도를위한 classNames 포함될 boundingBox 및 contentBox , 아래의 첫번째 "." 아래의 키와 두 번째 “content” 키를. 위젯에 부여 boundingBox 의 가치에서 파생 classNames NAME 부터 상속 체인의 클래스의 각 속성에 yui3-widget . MakeNode 매장에 this._classNames 에 대해서만 최고 최고 클래스 boundingBox .

구성 요소는 같은 거리에 위젯에서 여러 수준이면 SuperSpecialSpinner 에서 상속 SuperSpinner 에서 상속 Spinner 에서 상속 Widget, 그 중 일부 또는 모두가 있으면 _CLASS_NAMES 속성 정의 MakeNode들을 전부 classNames을 생산하고 그들을 저장합니다 this._classNames . 이 이름은 이미 이전 단계에서 선언된 각 레벨에 포함시킬 필요가 없습니다. 사실, 당신이 각 수준에서 생산 classNames가의 값을 사용하지 않으므로 것이 낫다 NAME 그런 수준의 속성을. 따라서 년에 SuperSpecialSpinner , {c input} 여전히집니다 “yui3-spinner-input” 이 아니라 “yui3-superspecialspinner-input” 그래서 누군가는 당신의 CSS 파일이 여전히 유효하게됩니다.

{S} 자리 표시

위젯은이 strings 그것이 어떤 값으로 초기화 아니지만, 정의 구성 속성을 지정해야합니다. 이 속성은 (또는, 스크린 리더를 통해 읽어주는) 사용자에게 표시되는 문자열을 개최하기위한 것입니다. 그것은 당신이 직접 템플릿에 보이는 문자열을 포함하지 않을 것이 중요합니다. 이것은 MakeNode의 요건 아닙니다 - 그것은 전혀 좋은 생각되지 않았어요. 볼 또는 사용자에게 읽기해야할 필요가있는 모든 문자열은 항상에 배치되어야 strings 속성. strings 속성은 각각의 텍스트를 그 핵심으로 자리잡고 있습니다 해시가 포함되어 있습니다. 스피너 구성 요소는 귀하가 위 템플릿에서 사용되는 볼 수있는 다음과 같은 문자열을 가지고 있습니다.

  문자열 : {
     값 : {
         입력 : "주요 증가를위한 작은 단위, 페이지 업 / 다운 키를 아래로 화살표를 눌러 /."
         최대 : "증가"
         아래 : "감소"
     }
 } 

이런 짓을의 가장 중요한 부분은 구성 요소가 구성 요소를 사용하여 개발자가 쉽게 다른 언어로 현지 수있다는 것입니다. 스피너의 인스턴스를 만들 때, 당신이 할 수 있습니다 :

  VAR mySpinner = 새로운 스피너 ({문자열 : Y.Intl.get ( '꼭두각시')}); 

구성 속성 설정 strings 이런식으로하는 것은 기본 대체 strings 이전에 정의된 언어를 사용하는 언어 리소스 파일에서 해당과 가치를. {s} 자리 표시에 저장된 문자열에 액세스하는 strings 로 설정하면 중 기본 사람이나 번역된 것들, 속성을 지정해야합니다. {s xxxx} 자리 표시 자입니다 사실에 대한 바로 가기 이상 아무것도 {@ strings.xxxx} 자리 표시 자. 예를 들어, 동안하지만, 첫 번째는 상위 레벨에서 문자열을 액세스할 수있는 {@ strings.xxxx.yyyy.zzzz} 당신이 깊은 아래로 문자열을 액세스할 수 있습니다.

renderUI에 _makeNode 사용

우리는 구성 요소에 마크업을 만들 수있는 템플릿을 사용합니다. 이렇게하려면, 우리는 MakeNode의 전화 _makeNode 과 같이 방법을 :

  renderUI : 함수 () {
     . this.get ( 'contentBox') 추가 (this._makeNode ());
 } 

이렇게 작성합니다 contentBox 템플릿을 처리에서 마크업으로 우리의 위젯의. _makeNode 메서드의 인스턴스를 반환 Y.Node 추가하거나 어디서든, 아니면 나중에 사용하기 위해 개최 삽입할 수 있습니다. 그것은 문자열을 반환하지 않으며, 그것은 생산 Node 인스턴스를.

_makeNode 으로, 템플릿에 대한 참조와 자리 표시 기입하기위한 객체 : 방법은 두 가지 선택적 인수를 Y.substitute 않습니다. 우리의 간단한 스피너 예제에서는 전체 위젯이지만 다른 위젯은 여러 템플릿으로 만들어진 조각이 필요할 수를위한 하나의 템플릿이 있습니다. 이 경우, 일반적으로 부를 것이다 _makeNode 주요 부분에 대한 인수 노와 함께 여분의 부품을 채워 서로 다른 템플릿과 함께 다시 한 번 그것을 부릅니다. 예를 들어 이 포함되어 있습니다 renderUI 방법 :

  renderUI : 함수 () {
     VAR fieldset = this._makeNode ();
     this.each (함수 (항목) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, 항목));
     }이);
     this.get ( 'contentBox') 추가 (fieldset).;
 } 

하는 첫번째 전화 _makeNode 반환 Node 변수에 저장된 인스턴스 fieldset . 샘플 구성 요소도 함께 연장됩니다 Y.ArrayList 있도록 RADIO_TEMPLATE 배열 목록에 저장된 항목과에 추가 인한 노드에서 가져온 값으로 채워집니다 fieldset 그것은 마지막에 추가되기 전에 contentBox . 와 같은 특별한 자리 표시 {@} 또는 {p} 여전히 주요 객체의 속성 또는 속성을 참조합니다. 중첩된 항목은 그대로 처리됩니다 Y.substitute 한다면.

_locateNodes 방법

MakeNode 추가로 제공 _locateNodes 에 선언 classNames 모든 요소를 찾으려고합니다 방법 _CLASS_NAMES . 당신은 클래스 키의 숫자를 전달할 수 있습니다 특정 요소를 찾으려면, 그렇지 않으면 _locateNodes 모두를 시도합니다. 각 클래스에서 찾을 각 요소에 대한, _locateNodes 키 이름과 다음에 밑줄을 접두어를 사용하여 전용 인스턴스 속성을 생산할 것이다 “Node” 접미사. 따라서 우리의 스피너 예제에서, _locateNodes 프로퍼티 생성합니다 _inputNode , _upNode 및 _downNode . 여러 요소가 같은 클래스가있을 경우 _locateNodes 그들의 첫 번째에 대한 참조를 반환합니다. 요소가 발견되지 않으면 아무런 변수가 생성되지 않습니다.

스피너 구성 요소에서는 사용 _locateNodes 마크업을 만든 후 :

  renderUI : 함수 () {
     . this.get (CBX) 추가 (this._makeNode ());
     this._locateNodes ();
 } 

_EVENTS 고정 자산

하나 추가 속성의 라인을 따라 정의할 수 _TEMPLATE 및 _CLASS_NAMES 그입니다 _EVENTS . _EVENTS 클래스 이름 키 이벤트 타입과 그 타입을 처리하는 방법 해시를 포함하는 각 이루어진 해시를 포함합니다. 그것은 좋은 예제와 함께 설명되어 있습니다 :

  _EVENTS : {
     '.': {
         키 : {
             FN : '_onDirectionKey'
             인수 : ((Y.UA.opera) "아래로":!? "누르십시오 :") + "38, 40, 33, 34 '
         }
         mousedown : '_onMouseDown'
     }
     '..': {
         mouseup : '_onDocMouseUp'
     }
     입력 : {
         변경 : '_onInputChange'
     }
 } 

_EVENTS 속성의 번호와 개체 (해시)입니다. 속성의 이름, 즉, 해시의 열쇠는 누구의 이벤트를 우리가 듣지 않습니다 요소를 식별합니다. 그들이 사용했던 것과 같은 식별자입니다 _CLASS_NAMES . 두 분 특별 열쇠 "." 와 ".." . 클래스 키 내에 중첩된 요소를 참조하면서 contentBox , "." 열쇠를 말합니다 boundingBox 하면서 그 자체 ".." 이 위젯을 포함하는 문서를 말합니다. 하고로 생각 chdir 위치한 때 명령을 boundingBox 수준. _EVENTS 이후 부동산이 처리되는 renderUI , bindUI 및 syncUI 위젯이 이미 문서 본문 내에 삽입될 예정입니다 있도록 메소드가 호출되어, 그렇지 않으면 ".." 실패합니다.

의 항목의 각 _EVENTS 자사의 핵심과 그것을 처리하는 인스턴스 메서드의 이름으로 이벤트의 유형을 사용하여 추가 개체입니다. _EVENTS , 정적 변수 권력에 액세스할 수 없습니다 this 그것이 실제 함수 참조를받을 수 있도록, 이벤트 리스너 메서드의 유일한 이름. 일부 이벤트 유형은 같은 추가 인수가 필요 key 행사. 이 경우 대신 이벤트 처리기의 이름을 제공 당신은 속성 개체를 제공할 수 fn 및 args 필요할 때 함수 이름과 여분의 인수를 개최합니다.

MakeNode 사용됩니다 Node.delegate 이것을 사용하는 동안 중첩된 요소의 이벤트에 들어 Y.on 에서 이벤트를 듣고 boundingBox 과 문서 본문. (참고 : 듣고 key 의 위임 이후 중첩된 요소의 이벤트를하는 것은, 오직 위의 버전 3.4.0pr1와 함께 작동 key .. 행사 전에 수 없었다 다른 모든 기능뿐만 아니라 이전 버전에서 작동)

_EVENTS 구성 요소가 서로 상속 때 선언이 누적되는 형태입니다. 상속 체인의 각 클래스는 고유해야합니다 _EVENTS 별도로 처리 선언을.

_ATTRS_2_UI 고정 자산

이벤트는 UI의 구성 요소와 구성 요소의 UI까지 두 길을가는거야. 처음으로 처리되는 _EVENTS 속성입니다. 그런 다음 사용자 인터페이스에 반영해야하는 속성 값이 변경에 의해 해고 이벤트가 없습니다. 전 구성 속성을 변경하는 보조 효과가 이전 기사에서 언급했듯이, 그들은 선택 사항으로 변경 이벤트 리스너가 없습니다 취급해야 setter 전용으로 설정되는 값을 정규화 처리한다 특성의 방법. UI는 처음에 구성 속성의 상태를 반영해야 syncUI 모든 속성 변경 이벤트에서 다음 초기화되는 때. 후자의 경우, 우리는 우리가해야하는 이벤트 리스너를 장착해야 bindUI . 위젯은 이미 제가 이전 기사에 댓글에서 설명한 그렇게 간단한 문제를 만드는 메커니즘을 제공합니다.

위젯은 인스턴스 속성 사용 _UI_ATTRS 이 추가 속성을 가진 개체가 포함되어 있습니다 SYNC 와 BIND . 이러한 각각 초기 서로 연관되는 구성 속성의 이름을 나열하는 배열입니다 그리고 현재 값을 반영 UI를 유지하기 위해 말을. 위젯은 이들 항목 각각에 의해 접두어 속성 이름 이름을 따서 그것과 연관된 메서드가 기대 _uiSet 적절한 낙타 케이스에 메소드 이름을 가지고 대문자로 변환된 속성 이름의 첫 문자로합니다. 경우에 따라서 "value" 의 나열되었습니다 _UI_ATTRS 배열 (중의 SYNC 또는 BIND ), 위젯이 찾는다는 것이 _uiSetValue 방법을. 이 메서드는 두 개의 인수, 받게 될 것입니다 value 설정되고 그리고 src 변화합니다. 이것은 우리의 스피너위한 코드입니다 _uiSetValue 방법 :

  _uiSetValue : 기능 (가치, SRC) {
     {(SRC === UI) 경우
         반환;
     }
     this._inputNode.set (값, this.get (포맷) (값));
 } 

당신은 문자열 상수에 해당하는 코드 조각에서 볼 수있는 모든 대문자 식별자는 YUI 압축기보다 그 일을 할 수 있도록, 다른 곳에서 선언했다. 방법은, 기본적으로 세트 value 의 HTML 속성 <input> 포맷 후에, 새로운 가치를 세트로 상자를. 텍스트 상자에 대한 참조가 제공한 _locateNodes . src 인수가 처음에 문자열 값으로 설정되어 있는지 확인합니다 'ui' . 이것 그렇다면 어떠한 조치도 취하지 않을 것입니다. 이것은 무한 루프를 방지하는 것입니다. 사용자가 입력 상자에 무언가를 입력하면 그 값은 침략했을 때 value 나서 해고 구성 속성 valueChange 꺼야, 이벤트, _uiSetValue 그때 가서 입력 상자의 값을 변경 묻지만이긴해도, 전화를하는 다시 전체 프로세스를 실행합니다. 따라서,에 _uiSetValue 우리가 변화가 UI에서 유래 안다면, 우리는 아무것도하지 않고 그래서 루프를 깰. 그러나 이것은 다른 코드의 또 다른 조각이 필요합니다. DOM 이벤트에 대한 리스너에서, 우리는 구성 속성을 설정할 때, 우리는 이렇게 설정하는 세 번째 선택적 인수를 사용 :

  _afterValueChange : 기능 (EV) {
     this.set (값, ev.newVal, {SRC : UI});
 } 

그것은 UI에서 오는 변화가 따라서 표시가 있는지 확인하고 다음 루프를 피하기 위해 같은 플래그를 확인하기 위해 우리에게있다.

이 모든 말씀으로 아직 정적 속성을 언급하지 않은 _ATTRS_2_UI 이 섹션의 머리글에 언급합니다. 나의 이전 기사 쇼의 코멘트 (내가 그들에서 만든 잘못 들어와서 통해), UI에 영향을 미치는 모든 속성이 올바르게 나열되어 있는지 확인하는 것처럼하는 것은 다소 혼란입니다. 당신은 초기화해서는 안 _UI_ATTRS 위젯이 이미 속성 한꺼번에 많이 나열하고 이들이 손실됩니다 때문에 처음부터. 당신이 그것에게 권리를 수행하는 방법을 기억하기 다소 어렵다는 기존, 이상의 새로운 속성 이름를 연결해야합니다. 간단하게하기 위해 MakeNode는 정적 속성에서 읽습니다 _ATTRS_2_UI 그리고 당신을 위해 그 연결 해. 그것은 각 레벨에서 각 클래스는 자체 속성을 처리할 수 있도록 상속 체인의 각각의 클래스에서 이러한 모든리스트를 연결합니다. 스피너에서 우리는있다 :

  _ATTRS_2_UI : {
     BIND : 값,
     SYNC : VALUE
 } 

MakeNode이 사건에서와 같이, 이름의 배열 또는 단일 속성 이름을 모두 동의합니다.

문제는 자연적으로 발생, 왜 두 목록, 동기화를 위해 다른 바인딩에 대해 하나? 꽤 자주 SYNC 배열보다 적은 수의 항목이있는 BIND 목록과 구성 요소에 대한 템플릿이 이미 구성 속성과 같은 매우 동일한 기본값을 가지고 있습니다 및 초기 동기화 할 필요가 없습니다 때문입니다. 대한 기본값면, value 구성 속성이 빈 문자열이며 <input> 템플릿 요소가 전혀 없습니다 value 속성을 다음 초기화 그들을 동기화 할 필요가 없습니다.

MakeNode는 이러한 배열 중 하나에서 중복 항목을 확인합니다. 어떤이 나타나지 않으면 클래스의 구성 요소가 이미 대부분 지나쳐 가다 거예요이 속성과 새로운 선언을 처리에서 상속 것을 의미합니다 _uiSetXxxx 이에 대한 처리기를. 덧붙여, MakeNode도에서 중복 항목을 확인 _CLASS_NAMES 또한, 비록 전부는 아니 일부에 충돌을 일으킬 수있는, 상황. MakeNode은 그러한 오류 로그에 메시지를 씁니다.

결론

MakeNode 고도로 위젯 기반 클래스와 통합되어 간단한 기능과 함께 매우 간단한 템플릿 프로세서를 제공합니다. 또한 템플릿에 사용되는 classNames를 생성하고 생성된 노드를 찾기 위해 그 이름을 사용하는 도우미 메서드를 제공합니다. 그것은 또한 모두 UI 및 구성 요소 자체에 의해 생성된 이벤트에 연결 및 방법과 각각 연결하는 수단을 제공합니다. 똑바로 위젯 및 정의할 수 있습니다 클래스의 모든 수준에 상속 체인을 존중 돌보는 동안 그것은이 모든 것을 수행합니다.

그것은 절대적으로 모든 가능성을 제공하지만, 그들의 좋은 범위를 포함하지 않습니다. 그럼에도 불구하고, 그것은 여분의 기능을 추가에서 당신을 배제하지 않습니다. 당신이 작성해야 할 필요가 거의 없습니다 거의있을 bindUI 또는 syncUI 당신 MakeNode에서 제공하는 접착제를 사용하는 경우 방법이지만 MakeNode 그들을 사용하지 않기 때문에 당신은 할 수 있습니다.

갤러리 컴포넌트의까지, 나 역시 수정한 앤서니 작은 옹기병의 버튼 세트를 읽을 수있는 인내심을 가진 자들에게 보너스로 :

• button.js
• button.css
• 버튼 - group.js
• 버튼 - group.css
• background.png
• 배경 - active.png
• 아이콘 sprite.gif
• 예

API 문서를 찾을 수있는 이곳 .

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

3.4.0 용 YUI와 로더 변경

3.4.0 우리는 단지 그것을 더 performant 안에, 주위 로더의 논리 중 일부를 이동하는 과정을 시작했지만 다른 장소 (서버 등)에서 사용하는 것이 더 강력하고 쉽게합니다. 우리는 미래의 개정에 더 많은 변화를 제공해 드릴 것입니다,하지만 난 좀 더 시간을 갖고 그것이 변경되었습니다, 왜 바뀌었는지 설명하고 개발자에 영향을 미칠 수있는 방법 싶었어요. 사용 - 사건의 대부분의 경우 그런 것들이 좀 더 빠르고 제외하고 개발자는 다른 아무것도 눈치 못 챌 그들의 요구 사항 다운로드가 조금 작다.

시드 파일

제가 해결하고자 우선 YUI 씨앗 파일입니다. YUI의 이전 버전에서는, 우리의 시드 파일은 매우 작은이었고 로더 또는 메타 데이터를 포함하지 않았다. 우리가 기대했던대로 90 % 사용의 경우에이 performant로이 아님을 발견했습니다. 일반 사용자가 시드 파일이 다음 차례에 씨앗이 처음 로더를 가져오는 데 필요한 수단들이 모듈을 요청할 포함, 그때의 종속성을 모두 계산 후 그들을 모두 가져옵니다. 우리는 지금 여분의 HTTP 요청 할 잘못된 일이라고 생각 때문에 새로운 표준 씨앗 파일은 로더 및 메타 데이터가 포함되어 있습니다. 네, 조금 더 큰 초기 요청을하게되지만, 그 메타 데이터 요구 사항을 모든 페이지에 지금 이미하고 있기 때문에 그 정도의 빠른 모듈의 로딩을 다할 것입니다.

당신이 그것에게 옛날 방식을 사용하려면, 당신은 단지 대신 YUI - 기본 씨앗 파일을 포함시킬 수 있습니다. 그것은 YUI가 독립 실행형 모드로 실행 더하기 그것 주문형 로더를 가져올 수있는 기능을 포함하기 위해 필요한 모든 것을 포함하고 있습니다. 당신도 세밀하게 분류된 의존성이 필요한 경우, 우리는 오래된 YUI - 기본 씨앗 정확히 뭔지 YUI 코어 씨앗 파일을 만들었습니다.

     / 빌드 / YUI / YUI-min.js / / 선택 YUI 종자 + 로더
     로더와 / 빌드 / YUI베이스 / YUI -베이스 - min.js / / 올드 선택 YUI 종자 지원을 페치
     로더없이 / 빌드 / YUI - 코어 / YUI 코어 min.js / / 올드 YUI-기반 지원을 페치

그것은 이러한 URL은 이전 URL이 아닌 다른 것을인지해야합니다. 사용하던 사람은 yui/yui-base.js 파일에게 repoint해야 yui-core/yui-core.js . 당신이 씨앗을로드하고 Loader를 가져오기의 이전 방법을 원한다면, 당신은 사용할 yui-base/yui-base.js 씨앗 파일을.

이러한 변화에 대한 다른 이유는 YUI가 가능한 많은 장소로 실행하기위한 로드맵이다. 귀하의 응용 프로그램에서 사용할 수있는 콤보 서버가있을 경우 단일 콤보 서버 요청에 오래된 씨앗 파일 플러스 로더는 괜찮 은데입니다.하지만 뭐 서버에 대해? 또는 모바일 장치에서 오프라인 애플 리케이션에? 이러한 장소는 아직 그들이 필요한 정보를 가져오는 동안 파일 액세스를 최소화해야합니다.

롤업

우리가 변경한 다음은 시스템에서 롤업을 제거하고 구성 로더에서 false로 allowRollup을 defaulting.이 일이 당신에게 무슨 의미가없는가? 아마 다시 아무것도 전혀되었다. 나는 변화의 영향을 설명하기 전에, 제가 뒤에 이유를 설명 해 줄께. 주된 이유는 페이로드 배달과 함께, 다시, 성능입니다. 이 예제를 가져가세요 :

      모듈이 : 이벤트, 이벤트-B가 필요합니다
      모듈 B는 : 이벤트 C, 이벤트-D가 필요합니다

여러분 모두를 요청할 때, 롤업 논리 이전 3.4.0까지가 이벤트 롤업을해야한다는 결정하는 데 사용. 그렇다면 실제로는 점점되었다는 의미 :

      event.a, event.b, event.c, event.d, event.e, event.f, event.g, event.h

당신은 실제로 필요한 것보다 페이지에 더 많은으로 돌​​아가셨습니다. 롤업 지원을 해제함으로써, YUI 이제 실제로 요청한 것만을 요청하고 아무것도 더 많은 것이다. 대부분의 경우 이것을 알 수 없습니다. 모듈 개발자는, 과거에 일했던 것들이 지금은 작동하지 않을 상황으로 실행될 수 있습니다. 그 이유는 그들이 실제로 전에 사고로 작동한다는 것입니다. 다이얼 : 나를 실제 예제를 사용합시다.

3.3.0에서는 전화 접속이 필요합니다 :

     필요 : [
         '위젯'
         'DD-드래그'
         '대용품'
         '이벤트 mouseenter' 
         '전환'
         'intl'
     ]

대부분의 경우 다이얼은 3.4.0에서 근무하지만 키보드 지원이 작동하지 않았다. 간단한 조사를하고 나면 그것은 롤업 지원이 실제로 전체 이벤트 롤업을 (이벤트 이동 및 이벤트 키를 포함하는) 요청되었음을 밝혀졌다. 이벤트 모두에 당기는 롤업 논리없이, 3.4.0 전화는 더 이상의 요구 사항을 모두 없었다. 다이얼의 요구 사항이보다 구체적으로 만들기 정상적으로 실제 종속성을 모두 정의하는 것은 그것이 예상대로 작동합니다.

     필요 : [
         '위젯'
         'DD-드래그'
         '대용품'
         '이벤트 mouseenter'
         '이벤트 이동'
         '이벤트 키'
         '전환'
         'intl'
     ]

모듈 개발자 들어, 당신의 모듈이 그것이 작동하는 데 필요한 정확하게 필요로하는지 확인하는 가장 좋은 방법입니다. 업스트림 모듈 요구 사항이있다는 것을 가정하지 마십시오. 그것은 당신이 당신이 필요로하는 걸 부탁하는지 확인하는 것이 좋습니다.

이것은 또한 모듈 요구 사항을 더 잘 정의되어있다는 것을 의미합니다. 예를 들어, datatype-date 이 같은 Intl에 액세스하는 것이 이전 버전에서는 내장되어 Intl 지원이있다 :

     Y.Intl.getAvailableLangs ( '데이터 형식 - 날짜');

But since this module doesn't actually have a language (the datatype-date-format module does), this will fail. It needs to be more specific and actually ask for languages for the correct module:

    Y.Intl.getAvailableLangs('datatype-date-format');

Build File Explosion and Submodule Removal

After making this change, the next change we made was exploding the build directory and removing submodules from the core system. Submodule logic was not removed, only our meta-data structure was changed. This will provide backward compatibility for current installations.

Submodules in the core system caused a couple of issues that we needed to resolve. The first reason was performance. Each time Loader needed to calculate dependencies, it needed to walk the submodule/plugin structure of each module. Doing this thousands of times was hurting our performance during the Loader calculate routine. By removing support for submodules in the core system we saved tens of thousands of function calls and iterations.

Loader was changed so that if a use property in a module's meta-data defined more modules, it will use those modules instead of trying to load the original module. So, if you requested “ dd ” Loader would inspect “ dd “'s meta-data and see a use property that looks something like this:

    "dd-ddm-base,dd-ddm,dd-ddm-drop,dd-drag,dd-proxy,dd-constrain,dd-drop,dd-scroll,dd-drop-plugin"

In the core YUI seed file, we are also including what we are calling virtual rollups or aliases . These module definitions are exactly the same as the meta-data in Loader. This way you can include all the files exported from our Dependency Configurator and still use these rollups without having Loader present on the page. In future releases, we will be refining this approach even more.

After making this change, we then preceeded to explode our build files. In previous releases, the submodules determined the modules file path. 예를 들면 다음과 같습니다

    "dd": {
        "submodules": {
            "dd-drag": 
            // Module data
         }
     }

In 3.3.0 when you built “dd”, the file structure looked something like this:

    /build/dd/dd-drag.js
    /build/dd/dd-ddm.js
    /build/dd/dd-drop.js

With the build system exploded in 3.4.0, “dd”'s build files now look like this:

    /build/dd-drag/dd-drag.js
    /build/dd-ddm/dd-ddm.js
    /build/dd-drop/dd-drop.js

This allowed us to remove the “path” property from all of our module meta-data as well, saving file size and reducing the logic required to assemble the modules url paths.

If you are including a pre-configured combo URL, you must recalculate your URL when you upgrade.

The downside to this change is that if you are including a combo URL of modules to “prep” your page you can not just change the version number and upgrade. You will need to revisit the Dependency Configurator and generate a new URL with new module structure.

미래

I will be continuing to refine, refactor and maximize every aspect of our Loader and Seed strategy. These first steps were needed to aid in future changes that need to be made for not only our client-side strategy but also our server, command-line and mobile device strategies as well.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!