>웹 프론트엔드 >JS 튜토리얼 >yepnope.js는 리소스 파일_javascript 기술을 비동기적으로 로드합니다.

yepnope.js는 리소스 파일_javascript 기술을 비동기적으로 로드합니다.

WBOY
WBOY원래의
2016-05-16 18:02:341157검색

일반적인 코드 예시

코드 복사 코드는 다음과 같습니다.

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 로드 실패에 대한 백업 핸들러도 제공합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.