yepnope.js의 전형적인 예 :
yepnope ({test : modernizr.geolocation, yep : 'normal.js', nope : [ 'polyfill.js', 'wrapper.js'});이 예는 Modernizr.geolocation이 true 인 경우 normal.js가로드, polyfill.js 및 wrapper.js가로드됨을 의미합니다.
Yepnope Full Syntax :
yepnope ([{test : /* boolean (ish)은 조건* /, yep : /* 배열 (문자열) | 문자열 - 문자열 - 조건이 true* /, nope : nope : nope : nope : /* 배열 - 문자열 -로드 된 자원이 false* /, strings (strings of strings) | strest- (strings) - /* array (strings) : /* array (strings) : /* array : /* array. 조건이 true이고 false*/, 콜백 :/*함수 (testresult, key) | 콜백 함수*/, 완료 :/*함수 함수를로드 후 실행*/});yepnope를 사용하는 이유 :
GZIP가 대부분의 리소스 로더보다 작은 후 1.6k 만
CSS 및 JS를로드 할 수 있습니다
Yepnope는 저자가 찾을 수있는 모든 브라우저에 대한 테스트를 통과합니다.
Yepnope는 자원로드 및 실행을 완전히 분리하므로 리소스 실행 순서를 제어 할 수 있습니다.
친절한 API의 논리적 조합을 제공하고 자원을 용이하게합니다.
모듈 식 디자인, 자신의 기능을 확장 할 수 있습니다 (나중에 접두사 및 필터 참조).
주문형 자원을 장려하십시오
Modernizr에 통합
기본적으로 항상 리소스 목록 순서로 실행됩니다 (제공하는 파일 목록 순서)
리소스 폴백을 처리 할 수 있으며 여전히 종속 스크립트 다운로드를 병렬로 우선시합니다. 코드를 읽은 후 이해하기가 더 쉽습니다.
yepnope ([{load : 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete : function () {if (! window.jquery) {yepnope ( 'local/jquery.min.js'); 'jquery.plugin.js', complete : jQuery (function () {jQuery ( 'div') .plugin ();});다른 로더는 다음을 처리해야 할 수도 있습니다.
someloader ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', function () {if (! wind yepnope는로드되지 않으며 백업 리소스를 다시로드하면이 리소스에 의존하는 다른 파일의 실행에 영향을 미치지 않습니다.Yepnope의 단점
Labjs 등과 같이 항상 가장 빠른 것은 아닙니다. 최적화 후 Yepnop보다 빠르게로드 될 수 있지만 실제 상황에 따라 사용할 로더를 고려해야합니다.
리소스에 대한 특정 캐시 헤더를 설정해야합니다 (이것은 매우 중요합니다)
Yepnope는 자체 세대 도구 및 Rich API를 가진 요구 사항 및 기타 클래스 라이브러리와 달리 기본 로더 기능만을 구현합니다.
기본적으로 항상 제공하는 리소스 목록의 순서로 실행되므로 속도에 영향을 줄 수 있습니다.
yepnope 사용 예 :
문자열을 직접 전달합니다
yepnope ( '/url/to/your/script.js');
객체 객체를 통과하십시오
yepnope ({load : '/url/to/your/script.js'});콜백 함수 인스턴스 (콜백 함수의 URL은로드 된 리소스 파일 이름을 나타내고 결과는 테스트 매개 변수의 결과를 나타냅니다. 키는 키 매핑을 사용할 때 파일 이름의 약어를 나타냅니다)
yepnope ({test : wind완전한 기능 예제
yepnope ({test : wind키 매핑 인스턴스
yepnope ({test : modernizr.geolocation, yep : { 'rstyles': 'exeral-styles.css'}, nope : { 'mstyles': 'modified-styles.css', 'geopoly': 'geenocation polyfill.js'}, 'geenocation polyfill.js'}, Callback : key) {if = geopoly '<). '이것은 geolocation polyfill입니다!');물론 다음과 같은 콜백 기능을 작성할 수도 있습니다.
yepnope ({test : modernizr.geolocation, yep : { 'rstyles': 'exeral-styles.css'}, nope : { 'mstyles': 'modified-styles.css', 'geopoly': 'geenocation polyfill.js'}, ''rstyles '(ur rest, ky) {'rstyles ' Styles! ';'mstyles ';yepnope에서 제공 한 접두사 3 개
CSS! 접두사 : 접미사가있는 모든 파일은 CSS 파일로로드 할 수 있습니다.
yepnope ( 'css! mystyles.php? version = 1532');
예압! 접두사 : 캐시에 리소스를 사전로드하지만 실행하지 않음 (다음에 실행할 때 실행).
yepnope ({load : 'preload! jquery.1.5.0.js', 콜백 : 함수 (url, result, key) {wink즉! 접두사 (ES) : IE 브라우저 (IE! 외에도 IE5, IE6, IE7, IE8, IE9, IEGT5, IEGT6, IEGT7, IEGT8, IELT7, IELT8 및 IELT9를 지원합니다.
yepnope ({load : [ 'normal.js', 'ie6! ie7! ie7! ie-patch.js'] // ie6 또는 ie7 만 (패치에서)});