YUI Loader

13476 단어 cssStringYahooanimationyuisandbox
구체 적 용법 "
http://developer.yahoo.com/yui/yuiloader/#start
 
 
 
 
 
 
YUI Loader
 
YUI 에는 DOM, Event 와 같은 핵심 구성 요소 가 많 습 니 다. 거의 모든 응용 프로그램 에서 사용 되 지만, 이 구성 요 소 를 배우 기 전에 먼저 YUI Loader 라 는 좋 은 것 을 알 아 보 는 것 이 좋 을 것 같 습 니 다. YUI Loader 도 YUI 의 구성 요소 입 니 다. 스 크 립 트 를 통 해 페이지 에 필요 한 YUI 구성 요 소 를 불 러 오 는 역할 을 합 니 다. 말하자면 페이지 를 불 러 올 때 동적 으로페이지 에 < script > 탭 을 삽입 하면 페이지 에 < script > 탭 을 직접 쓰 는 것 과 어떤 차이 가 있 습 니까? 장점 은 다음 과 같 습 니 다.
1. 신뢰 할 수 있 습 니 다. 의존 순서에 따라 YUI 구성 요 소 를 불 러 옵 니 다. YUI 에는 구성 요소 가 많 기 때문에 코드 재 활용 과 코드 독립 을 위해 많은 구성 요소 가 서로 의존 관계 가 있 습 니 다. 의존 순서에 따라 불 러 와 야 합 니 다. 그렇지 않 으 면 오류 가 발생 합 니 다. YUI Loader 는 구성 요소 간 의존 관 계 를 알 고 있 습 니 다. 어떤 구성 요 소 를 불 러 오 면 YUI Loader 는 이 구성 요 소 를 의존 하 는 구성 요소 부터 불 러 옵 니 다.오류 가 없 도록 구성 요 소 를 순서대로 불 러 옵 니 다.
2. 페이지 에 YUI 구성 요소 가 있 을 때 는 YUI Loader 를 이용 하여 새 구성 요 소 를 추가 하 는 것 이 안전 합 니 다. 개발 자가 재 활용 가능 한 YUI 구성 요 소 를 직접 작성 하기 때문에 이 구성 요 소 를 불 러 올 때 페이지 에 YUI 의 다른 구성 요소 가 있 을 수 있 습 니 다. 자신 이 작성 한 YUI 구성 요소 가 YUI 의 다른 구성 요소 에 의존 하면 페이지 에 YUI 를 다시 불 러 올 수 있 습 니 다.구성 요소. YUI Loader 를 사용 하면 이 문 제 를 피 할 수 있 습 니 다. 페이지 에 존재 하 는 구성 요 소 를 다시 불 러 오지 않 고 페이지 에 존재 하지 않 는 구성 요 소 를 불 러 옵 니 다. 3. 통 합 된 (rolled - up) 을 자동 으로 사용 합 니 다.파일. YUI 의 일부 js 파일 은 여러 가지 기능 을 통합 합 니 다. 예 를 들 어 야후 - dom - event. js 는 야후 전역 대상, Dom 및 Event 를 통합 합 니 다. YUI Loader 는 상황 에 따라 통합 파일 을 사용 할 지 여 부 를 판단 합 니 다. 그러면 js 파일 을 적 게 불 러 와 HTTP 요청 을 줄 이 고 페이지 의 HTTP 요청 은 페이지 로 딩 속도 에 큰 영향 을 줄 수 있 습 니 다.(HTTP 요청 에 대해 서 는 여 기 를 보십시오)
알림: 클 라 이언 트 스 크 립 트 에 외부 js 를 동적 으로 불 러 오 는 방법 은 많 든 적 든 성능 에 영향 을 줄 수 있 습 니 다. 성능 이 가장 좋 은 것 을 추구 하면 페이지 에 < script > 또는 < link > 탭 을 직접 쓰 는 것 이 좋 습 니 다.
YUI Loader 라 는 구성 요 소 를 사용 하기 전에 먼저 script 파일 을 도입 해 야 합 니 다. 다음 과 같 습 니 다. < script type = "text / javascript" src = "http://yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js” >
YUI Loader 구성 요 소 를 사용 하기 로 결정 하면 YAHOO 전역 대상 의 js 파일 을 따로 도입 하지 않 아 도 됩 니 다. YUI Loader 자체 에 YAHOO 전역 대상 이 포함 되 어 있 기 때 문 입 니 다.
YUI Loader 구성 요소 의 주요 매개 변수 와 방법 을 소개 합 니 다.
방법:
insert () 방법: 가장 자주 사용 하 는 방법 은 YUI Loader 를 설정 한 후 이 방법 으로 YUI 구성 요 소 를 동적 으로 불 러 옵 니 다.
sandbox () 방법: 동적 으로 불 러 오 는 구성 요소 가 기 존 구성 요소 와 충돌 할 수 있 습 니 다. 이 때 는 sandbox () 방법 으로 구성 요 소 를 안전하게 불 러 올 수 있 습 니 다. 이 방법 은 YUI Connection Manager 를 통 해 구성 요 소 를 가 져 오고 익명 함수 에서 실행 할 수 있 습 니 다. 따라서 이 방법 은 같은 도 메 인 아래 JS 만 불 러 올 수 있 습 니 다.
addModule () 방법: 사용자 정의 구성 요 소 를 추가 할 때 다음 과 같은 주요 매개 변수 가 있 습 니 다.: name: 구성 요소 의 이름 은 유일무이한 것 이 어야 하 며, YUI 자체 구성 요소 와 충돌 할 수 없습니다. type: 구성 요소 형식 입 니 다. js 또는 css path: 구성 요소 의 경 로 는 일반적으로 YUI Loader 의 base 에 비해 상대 적 인 경로 입 니 다. fullpath: 구성 요소 의 전체 경로 입 니 다. requires: 의존 하 는 YUI 구성 요소
매개 변수 (모든 매개 변수 소 개 는 여 기 를 보십시오):
require: 배열, 불 러 올 구성 요소 의 모듈 이름 을 포함 합 니 다.
base: 구성 요소 의 기본 경 로 를 불 러 옵 니 다. 구성 요 소 를 불 러 올 때 YUI Loader 가 먼저 찾 습 니 다. 시스템 변수 에 있 는 path 에 해당 합 니 다.
onSuccess: 함수, 불 러 오 는 데 성 공 했 을 때 호출 합 니 다.
onFailure: 함수, 불 러 오 는 데 실 패 했 을 때 호출 합 니 다.
varName: 사용자 정의 구성 요 소 를 불 러 오 면 구성 요소 가 불 러 오 면 이 변 수 는 사용 가능 합 니 다.
마지막 으로 YUI 모듈 이름 을 말 해 보 세 요. 말하자면 YUI 구성 요소 가 YUI Loader 에 대응 하 는 줄 임 말 입 니 다. 그러면 불 러 오기 가 편리 합 니 다. 예 를 들 어 require 에 "dom" 만 추가 하면 YUI 의 DOM 구성 요소 입 니 다. 모든 대응 관 계 는 여 기 를 보십시오.
OK, 저 는 간단하게 이렇게 많은 것 을 소개 하 겠 습 니 다. 시간 과 정력 의 관계 로 인해 많은 부분 을 상세 하 게 쓰 지 못 했 습 니 다. 그리고 너무 상세 하면 문 서 를 완전히 번역 하 는 것 도 큰 의미 가 없습니다. 더 알 고 싶 으 면 공식 사이트 에 가세 요.
또한, YUI 블 로그 에 YUI Loader 를 사용 하여 로 딩 파일 크기 를 줄 이 는 분석 을 첨부 합 니 다: Loading YUI: Seeds, Core, and Combo - handling
 
 
 
 
 
 
 
 
 
 
 
 
 
확장 YUI 로 더
YUI Loader 는 YUI 가 외부 자 바스 크 립 트 와 CSS 파일 을 동적 으로 불 러 오 는 전체 솔 루 션 입 니 다. 신뢰 할 수 있 고 안전 하 며 효율 적 이 며 페이지 의 표현 속 도 를 최적화 하여 외부 Js 와 CSS 의 필요 에 따라 불 러 옵 니 다.
YUI 2.4.0 에서 2.5.1 버 전에 서 YUI Loader 는 이 를 통 해 addModule()방법 은 YUI Loader 인 스 턴 스 의 로 딩 모듈 정보 만 설정 할 수 있 습 니 다. 로 딩 모듈 정 보 를 전역 적 으로 설정 할 수 없습니다. 실제 로 딩 파일 을 전역 적 으로 설정 할 수 있 는 모듈 정 보 는 통합 유지보수 에 매우 중요 합 니 다. 특히 정적 파일 서버 에 위 에서 보 낸 문 서 를 수정 하거나 삭제 할 수 없 는 상태 로 설정 되 어 있 습 니 다. 다음은 이 문 제 를 해결 하 는 두 가지 방법 입 니 다.
방법 1: YUI Loader 원본 파일 을 수정 하고 YAHOO config. load 를 도입 하여 전역 정 보 를 설정 합 니 다.
YUI 두 전역 변수 중 하나 인 YAHOO_config 중 하나 인 load 속성 은 YUI Loader 의 전역 정 보 를 설정 하 는 데 사 용 됩 니 다. 그러나 안 타 깝 게 도 2.4.0 이전 버 전 지원 에 불과 합 니 다.
1. YUI 로 더 원본 파일 수정var Y=YAHOO, util=Y.util, lang=Y.lang, env=Y.env;



/*



* ：



* YAHOO_config load ， YAHOO_config.load Y_load



*/






if('undefined'!== typeof YAHOO_config){



if(lang.hasOwnProperty(YAHOO_config,'load')){



var Y_load = YAHOO_config.load;



}



}



...






this.base = YUI.info.base;



/* ， YAHOO_config.load.base YUI */






this.base = (lang.hasOwnProperty(Y_load,'base'))?Y_load.base:YUI.info.base;



...






this.moduleInfo = lang.merge(YUI.info.moduleInfo);



/* ， YAHOO_config.load.moduleInfo YUI */






this.moduleInfo = (lang.hasOwnProperty(Y_load,'moduleInfo'))?



lang.merge(YUI.info.moduleInfo,Y_load.moduleInfo):lang.merge(YUI.info.moduleInfo);



2. YUI Loader 파일 앞 에 다음 설정 파일 을 쓰 십시오.YAHOO_config = {



load : {



base : 'http://cn.yui.yahooapis.com/2.5.1/build/',



/*



* YUI YUI



* @name string



* @type string



* @fullpath string



* @requires array



* @optinal array



* @skinnable boolean



*/






moduleInfo : {



/*



*YUI ，



* require(['container']) ， container.js， container.css



* ， YUI



* YUI Loader skins


， YUI ， YUI



* insert({},'js') Js， require() CSS



* skinnable false



*/






'container': {



'type': 'js',



'path': 'container/container-min.js',



'requires': ['dom', 'event'],



'optional': ['dragdrop', 'animation', 'connection'],



'supersedes': ['containercore'],



'skinnable': false



},



'dwncontainercss' : {



'type' : 'css',



'fullpath' : '/lab/2008/extend-yuiloader/container.css'



},



'dwncarouselcss':{



'name' : 'dwncarouselcss',



'type' : 'css',



'fullpath' : '/lab/2008/extend-yuiloader/carousel.css'



},



'dwncarousel':{



'type' : 'js',



'fullpath' : '/lab/2008/extend-yuiloader/carousel-min.js',



'requires':['dwncarouselcss','yahoo','event','dom',



'containercore','animation']



}



}



}



}시연 실례 1 을 보십시오
방법 2: 야후. lang. extend 방법 으로 새로운 Loader 를 패키지 합 니 다.YAHOO.namespace('CN.util');



/* start:YAHOO.CN.util.YUILoader */






YAHOO.CN.util.YUILoader = function(o){



YAHOO.CN.util.YUILoader.superclass.constructor.call(this,o);



this.base = 'http://cn.yui.yahooapis.com/2.5.1/build/';



this.addModule({



'name': 'container',



'type': 'js',



'path': 'container/container-min.js',



'requires': ['dom', 'event'],



'optional': ['dragdrop', 'animation', 'connection'],



'supersedes': ['containercore'],



'skinnable': false



});



this.addModule({



'name' : 'dwncontainercss',



'type' : 'css',



'fullpath' : '/lab/2008/extend-yuiloader/container.css'



});



this.addModule({



'name' : 'dwncarouselcss',



'type' : 'css',



'fullpath' : '/lab/2008/extend-yuiloader/carousel.css'



});



this.addModule({



'name' : 'dwncarousel',



'type' : 'js',



'fullpath' : '/lab/2008/extend-yuiloader/carousel-min.js',



'requires':['dwncarouselcss','yahoo','event','dom',



'containercore','animation']



});



}































YAHOO.lang.extend(YAHOO.CN.util.YUILoader,YAHOO.util.YUILoader);



/* end: YAHOO.CN.util.YUILoader */


YAHOO. cn. util. YUILoader 의 사용 은 YAHOO. util. YUILoader 의 사용 과 다 를 바 없습니다. 프 리 젠 테 이 션 인 스 턴 스 2 를 보십시오.
두 가지 방법의 우열 비교.
방법 1 의 단점 은 YUI Loader 의 원본 파일 을 수정 해 야 한 다 는 것 이다. 방법 2 는 외층 에 하나의 케이스 만 추가 하 는 것 으로 우호 적 이 고 안전 하 다. 그러나 방법 1 설정 파일 을 직접 수정 하 는 방법 은 방법 2 의 예화 때마다 특정한 방법 으로 설정 파일 을 수정 해 야 하 는 것 보다 효율 적 이다. 특히 추가 또는 수정 한 설정 모듈 간 에 도 의존 관계 가 있 을 때 방법 2 는과도 한 연산 을 위해 죽 었 습 니 다. 예 를 들 어 인 스 턴 스 의 모듈 container 을 dwncontainercss 에 의존 할 때 방법 1 은 문제 가 없습니다 (프 리 젠 테 이 션 인 스 턴 스 3 을 보십시오). 그러나 방법 2 번 브 라 우 저 는 스 크 립 트 가 바 쁩 니 다 (프 리 젠 테 이 션 인 스 턴 스 4 를 보십시오).
 
sklearn 학습 (1) 데이터 세트
제7장 파일 및 구조체 7.1 파일 조작 136페이지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage