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

YUI 3 빠른 팁 : 나만의 굉장 추가

루크는 ( @ ls_n ) 질문 저번에 대한 응답으로이 인간을 게시하고, 나는 그것이 빠른 제보로 여기에 공유하는 가치라고 생각.

YUI 3에, 당신은 보통 통해 얻을 노드 참조, 갖는 의미 - 대부분의 선별 기반 숙어와 마찬가지로, YUI 3의 표현 능력이 많이 사용하면 하나 이상의 HTMLElements에 대한 참조가되면 뭘 할 수에서 유래 Y.one( selector string ) 또는 Y.all( selector string ) . 따라서 Y.one("#foo"). doSomethingInteresting 일반적인 패턴입니다.

그것은 (그리고 / 또는 NodeList) 노드에게 자신의 마술을 추가하여 YUI 3의 표현력을 확장하기 용이합니다. 다음은 확장 기능이 모듈화 및 재사용하게 한 방법입니다.

첫째, 새 사용자 지정 모듈을 만들려면 (우리가 소위 node++ ) :

  YUI.add ( '노드 + +', 함수 (Y) {
	
	 / /의 컨텍스트에서 실행됩니다 함수를 정의
	 / / 노드 인스턴스 :
	 함수 doSomethingAwesome () {
		 Y.log ( "여기서 끝내 뭔가를 해주세요.");
	 }

	 / / 노드 프로토 타입에 doAwesomeThing를 추가할 ad​​dMethod를 사용
	 Y.Node.addMethod ( "doAwesomeThing", doSomethingAwesome);
	
	 / / NodeLists에이 기능을 확장할 수 :
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {필요합니다 : ['노드 ']}); 

루크의 요점은 여기입니다 .

페이지에서 해당 정의를 통해 node++ 수 use 모든 인스턴스에서 D를. 구현 코드에서, 당신은 할 것이다 :

  YUI ()를 사용한다. ( '노드 + +', 함수 (Y) {
	
	 / / 하나의 노드에서 사용
         . Y.one ( '# foo는') doAwesomeThing ();

	 / / NodeList에서 사용
	 Y.all ( 'P') doAwesomeThing ().;
	
 }); 

오직 YUI 인스턴스 (들)이있는 당신의 바인딩합니다 node++ 모듈에 접근합니다 doAwesomeThing . 당신은 복잡한 애플 리케이션을 구축하면서 좋아하는 거라고 이러한 디자인 중 하나는 기능은 구현 로직은 변경할 필요가 없다는 점입니다 경우에 대한 종속성 목록에 node++ 진화 -에서 자동으로 처리받을 것이다 use() 시간 및 종속성 선언은 관계된하는 코드와 함께 유지됩니다.

대화 찾기 : bloglines | 테크노

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