일반적인 코드 예시
yepnope({
테스트 : Modernizr .geolocation,
예 : 'normal.js',
아니요 : ['polyfill.js', 'wrapper.js']
})
Modernizr.Geolocation이 true이면 "normal.js"인 yep 항목이 로드되고, 그렇지 않으면 nope 항목이 로드됩니다. 여러 파일을 동시에 로드할 수 있습니다.
yepnope와 기존 xxx 스크립트 로더의 차이점은 무엇인가요?
개인적으로는 다음 두 가지가 가장 큰 이유라고 생각합니다.
javascript와 css를 동시에 처리할 수 있습니다.
yepnope
의 모든 매개변수를 조건부로 로드할 수 있습니다.
yepnope([{
test : /* boolean(ish ) - 진위 여부를 확인하려는 표현식* /,
yep : /* 배열(문자열) | string - 테스트가 true인 경우 로드*/,
nope : /* 배열(문자열) | string - 테스트가 false인 경우 로드* /,
both : /* 배열(문자열) | string - 어떤 상황에서도 로드 */,
load : /* 배열(문자열) | 모든 상황 */,
callback: /* function (testResult, key) | object { key: fn} 특정 URL이 성공적으로 로드되면 해당 메소드를 실행합니다.*/,
complete: /* 다음 경우에 이 메소드를 실행합니다. 모든 함수가 로드됨*/
}, ... ]);
여기의 매개변수는 배열 또는 객체일 수 있으며 이는 여러 리소스 파일을 로드할 때 유용합니다.
yepnope는 jquery 인스턴스를 로드합니다
넵 ([{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if ( !window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}, {
load: 'jquery.plugin. js',
완전: function () {
jQuery(function () {
jQuery('div').plugin();
})
}
}] );
이 코드는 jquery와 jquery.plugin.js를 비동기적으로 로드하고 jquery 로드 실패에 대한 백업 핸들러도 제공합니다.