yepnope.js Usage_javascript 스킬에 대한 자세한 설명 및 예시 공유

yepnope.js의 전형적인 예:

yepnope({
 test : Modernizr.geolocation,
 yep : 'normal.js',
 nope : ['polyfill.js', 'wrapper.js']
});

이 예는 Modernizr.geolocation이 true이면 Normal.js가 로드되고, false이면 polyfill.js 및 Wrapper.js가 로드된다는 의미입니다.

아뇨 완전한 구문 :

yepnope([{
 test : /* boolean(ish) 输入条件    */,
 yep : /* array (of strings) | string - 条件为真时加载的资源 */,
 nope : /* array (of strings) | string - 条件为假时加载的资源 */,
 both : /* array (of strings) | string - 条件无论真假都加载 */,
 load : /* array (of strings) | string - 条件无论真假都加载 */,
 callback : /* function ( testResult, key ) | object { key : fn } 回调函数 */,
 complete : /* function 加载完成后执行的函数 */
}, ... ]);

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' );
   }
  }
 },
 {
  load : 'jquery.plugin.js',
  complete: function () {
   jQuery(function () {
    jQuery( 'div' ).plugin();
   });
  }
 }
]);

다른 로더가 이 작업을 수행해야 할 수도 있습니다.

someLoader('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', function(){
 if ( ! window.jQuery ) {
  someLoader( 'local/jquery.min.js', 'jquery.plugin.js' );
 /*注意这点和yepnope的区别，yepnope加载失败后仅需重新加载备用资源即可，不会影响依赖此资源的其他文件执行*/
 } else {
  someLoader( 'jquery.plugin.js' );
 }
});

옙노페의 단점

최적화 후에는 labjs 같은 것이 yepnope보다 빠르게 로드될 수 있지만 실제 상황에 따라 어떤 로더를 사용할지 고려해야 합니다
리소스에 대한 특정 캐시 헤더를 설정해야 합니다(매우 중요함)
자체 생성 도구와 풍부한 API를 갖춘 RequireJS와 같은 클래스 라이브러리와 달리 yepnope는 기본 로더 기능만 구현합니다
기본적으로 항상 제공해주신 리소스 목록의 순서대로 실행되므로 속도에 영향을 줄 수 있습니다

yepnope 사용 예:

문자열을 직접 전달

yepnope( '/url/to/your/script.js' );

객체 전달

yepnope( {
   load : '/url/to/your/script.js'
   } );

콜백 함수 인스턴스 (콜백 함수의 url은 로드된 리소스 파일의 이름을 나타냅니다. result는 테스트 매개변수의 결과를 나타냅니다. key는 키 매핑 사용 시 파일 이름의 약어를 나타냅니다.)

yepnope( {
  test : window.JSON,
  load : '/url/to/your/script.js',
  callback : function ( url, result, key ) {
   // whenever this runs, your script has just executed.
   alert( 'script.js has loaded!' );
  }
 } );

완전한 함수 인스턴스

yepnope( {
  test : window.JSON,
  nope : 'json2.js',
  complete : function () {
   var data = window.JSON.parse( '{ "json" : "string" }' );
  }
 } );

키 매핑 예시

yepnope( {
  test : Modernizr.geolocation,
  yep : {
   'rstyles' : 'regular-styles.css'
  },
  nope : {
   'mstyles' : 'modified-styles.css',
   'geopoly' : 'geolocation-polyfill.js'
  },
  callback : function ( url, result, key ) {
   if ( key === 'geopoly' ) {
    alert( 'This is the geolocation polyfill!' );
   }
  }
 } );

물론입니다콜백 기능다음과 같이 작성할 수도 있습니다.

yepnope( {
  test : Modernizr.geolocation,
  yep : {
   'rstyles' : 'regular-styles.css'
  },
  nope : {
   'mstyles' : 'modified-styles.css',
   'geopoly' : 'geolocation-polyfill.js'
  },
  callback : {
   'rstyles' : function ( url, result, key ) {
    alert( 'This is the regular styles!' );
   },
   'mstyles' : function ( url, result, key ) {
    alert( 'This is the modified styles!' );
   },
   'geopoly' : function ( url, result, key ) {
    alert( 'This is the geolocation polyfill!' );
   }
  },
  complete : function () {
   alert( 'Everything has loaded in this test object!' );
  }
 } );

yepnope에서 공식적으로 제공하는 접두사 3개

css! 접미사: 어떤 접미사가 붙든 파일을 CSS 파일로 로드할 수 있습니다.

yepnope( 'css!mystyles.php?version=1532' );

preload! Prefix: 리소스를 캐시에 미리 로드하지만 실행하지는 않습니다. (다음에 로드할 때만 실행됩니다.)

yepnope( {
 load : 'preload!jquery.1.5.0.js',
 callback : function ( url, result, key ) {
  window.jQuery; //undefined
  yepnope(jquery.1.5.0.js);
  window.jQuery; //object
 }
} );

ie! Prefix(es): IE 브라우저인지 확인합니다(ie! 외에도 ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8 및 ielt9 이러한 유형의 접두사)

yepnope({
 load: ['normal.js', 'ie6!ie7!ie-patch.js'] // ie6 or ie7 only (on patch)
});