JavaScript 모듈 화 사용 requireJS 필요 에 따라 불 러 오기

모듈 로 더 의 개념 은 전단 에서 개발 한 어린이 신발 을 조금 만 접 해도 낯 설 지 않 을 수 있 습 니 다.모듈 로 더 를 통 해 이러한 문 제 를 효과적으로 해결 할 수 있 습 니 다.

JS 파일 의 의존 관계.

비동기 로드 를 통 해 최적화 script 태그 로 인 한 차단 문제

간단하게 파일 단위 로 기능 을 모듈 화하 고 재 활용 할 수 있다.

주류 JS 모듈 로 더 는 requireJS,SeaJS 등 이 있 습 니 다.로 더 는 지 키 는 규범 에 따라 미묘 한 차이 가 있 을 수 있 습 니 다.순수 사용자 의 측면 에서 볼 때 SeaJS 가 아 닌 requireJS 를 선택 한 이 유 는 다음 과 같 습 니 다.
기능 실현 에 있어 서 이들 은 차이 가 별로 없고 뚜렷 한 성능 차이 나 중대 한 문제 가 없다.
문서 가 풍부 한 정도 에서 requireJS 는 SeaJS 보다 훨씬 좋 습 니 다.jQuery 와 jQuery 플러그 인 을 가장 간단하게 불 러 오 는 것 입 니 다.비록 이들 의 실현 방법 은 차이 가 많 지 않 지만 requireJS 는 직접 사용 할 수 있 는 Demo 가 있 습 니 다.SeaJS 는 문 서 를 읽 고 스스로 고생 해 야 합 니 다.일부 문제 의 해결 에 있어 서 requireJS 는 키워드 로 도 답 을 쉽게 찾 을 수 있다.
requireJS jQuery+jQuery 플러그 인 불 러 오기
일반 웹 앱 에 있어 서 jQuery 및 관련 플러그 인 을 도입 할 확률 이 가장 높 을 수 있 습 니 다.requireJS 도 해당 하 는 해결 방안 과동적 로드 jQuery 및 플러그 인문서 및인 스 턴 스 코드를 친절하게 제시 합 니 다.
최신 jQuery 1.9.X 에서 jQuery 는 마지막 에 자신 을 AMD 모듈 로 직접 등록 했다.즉,requireJS 를 모듈 로 직접 불 러 올 수 있다 는 것 이다.오래된 jQuery 를 불 러 오 는 방법 은 두 가지 가 있 습 니 다.
1.jQuery 를 requireJS 보다 먼저 불 러 오기
2.jQuery 코드 를 조금 만 처리 하고 jQuery 코드 에 감 싸 줍 니 다.

define(["jquery"], function($) { 
  // $ is guaranteed to be jQuery now */ 
}); 

requireJS 의 예제 에 서 는 requireJS 와 jQuery 를 하나의 파일 로 통합 합 니 다.jQuery 를 핵심 라 이브 러 리 로 사용 하 는 경우 이 방법 을 추천 합 니 다.
jQuery 플러그 인 에 도 두 가지 방법 이 있 습 니 다.
1.플러그 인 외부 패키지 코드

define(["jquery"], function($){ 
   // Put here the plugin code. 
}); 

2.reuqireJS 코드 를 사용 하여 불 러 오기 전에 플러그 인 을 등록 합 니 다(예 를 들 어 main.js).

requirejs.config({ 
  "shim": { 
    "jquery-cookie" : ["jquery"] 
  } 
}); 

requireJS 제3자 라 이브 러 리 불 러 오기
인 스 턴 스 앱 에 jQuery 이외 의 제3자 라 이브 러 리 도 사 용 됩 니 다.라 이브 러 리 가 표준 AMD 모듈 이 아 닌 데 도 이러한 라 이브 러 리 의 코드 를 변경 하고 싶 지 않 으 면 미리 정 의 를 내 려 야 합 니 다.

require.config({ 
   paths: { 
      'underscore': 'vendor/underscore' 
   }, 
   shim: { 
     underscore: { 
       exports: '_' 
     } 
   } 
}); 

CSS 파일 의 모듈 화 처리
requireJS 에서 모듈 의 개념 은 JS 파일 에 만 국한 되 고 그림,JSON 등 비 JS 파일 을 불 러 올 필요 가 있 으 면 requireJS 는 일련의 불 러 오기 플러그 인 을 실현 합 니 다.
그러나 안 타 깝 게 도 requireJS 는 공식 적 으로 CSS 를 모듈 화 처리 하지 않 았 고 우 리 는 실제 프로젝트 에서 일부 장면 을 만 날 수 있다.예 를 들 어 순환 방송 하 는 이미지 전시 란,예 를 들 어 고급 편집기 등 이다.거의 모든 부 UI 구성 요 소 는 JS 와 CSS 두 부분 으로 구성 되 고 CSS 사이 에 도 모듈 의 개념 과 의존 관계 가 존재 한다.
requireJS 와 의 통합 을 위해 서 는 require-css 를 사용 하여 CSS 의 모듈 화 와 의존 문 제 를 해결 합 니 다.
require-css 는 requireJS 플러그 인 입 니 다.다운로드 후 css.js 와 normalize.js 를 main.js 와 같은 등급 에 두 면 기본적으로 불 러 올 수 있 습 니 다.예 를 들 어 우리 프로젝트 에서 jQuery Mobile 의 css 파일 을 불 러 와 야 합 니 다.그러면 직접 이렇게 호출 할 수 있 습 니 다.

require(['jquery', 'css!../css/jquery.mobile-1.3.0.min.css'], function($) { 
}); 

그러나 이 CSS 는 본질 적 으로 jQuery Mobile 모듈 의 일부분 이기 때문에 더 좋 은 방법 은 이 CSS 파일 의 정 의 를 jQuery Mobile 의 의존 관계 에 두 는 것 입 니 다.최종 적 으로 우리 의 requireJS 정의 부분 은:

require.config({ 
   paths: { 
      'jquerymobile': 'vendor/jquery.mobile-1.3.0', 
      'jstorage' : 'vendor/jstorage', 
      'underscore': 'vendor/underscore' 
   }, 
   shim: { 
     jquerymobile : { 
      deps: [ 
        'css!../css/jquery.mobile-1.3.0.min.css' 
      ] 
     }, 
     underscore: { 
       exports: '_' 
     } 
   } 
}); 

모듈 을 사용 할 때:

require(['jquery', 'underscore', 'jquerymobile', 'jstorage'], function($, _) { 
}); 

jQuery Mobile 의 CSS 파일 은 자동 으로 불 러 옵 니 다.그러면 CSS 와 JS 는 하나의 모듈 로 통 합 됩 니 다.마찬가지 로 복잡 한 의존 관 계 를 가 진 다른 모듈 도 유사 하 게 처리 할 수 있 고 requireJS 는 의존 관계 의 논 리 를 해결 할 수 있다.
데이터 원본 불 러 오기 및 대기
웹 앱 은 일반적으로 백 엔 드 의 데 이 터 를 동적 으로 불 러 옵 니 다.데이터 형식 은 보통 JSON,JSONP 일 수도 있 고 JS 변수 일 수도 있 습 니 다.JS 변 수 를 예 로 들 면:

var restaurants = [ 
  { 
    "name": "KFC" 
  }, 
  { 
    "name": "7-11" 
  }, 
  { 
    "name": "    " 
  } 
] 

이 데이터 불 러 오기:

$.getScript('data/restaurants.json', function(e){ 
  var data = window.restaurants; 
  alert(data[0].name); //KFC 
}); 

단일 한 데이터 소스 는 정말 간단 하지만 한 응용 프로그램 에 여러 개의 데이터 소스 가 있 습 니 다.예 를 들 어 이 인 스 턴 스 App 에서 UI 는 사용자 정보,식당 정보,주문 정보 세 가지 데 이 터 를 불 러 와 야 일 을 할 수 있 습 니 다.다 중 플러그 인 리 셋 함수 만 있 으 면 코드 의 결합 이 매우 무 거울 수 있 습 니 다.
여러 데이터 로 딩 문 제 를 해결 하기 위해 서 제 습관 적 인 해결 방법 은 dataReady 이벤트 응답 체 제 를 구축 하 는 것 입 니 다.

var foodOrder = { 
 
  //                 
  dataReadyFunc : [] 
 
  //   URL      
  , dataSource : [ 
    { url : 'data/restaurants.json', ready : false, data : null }, 
    { url : 'data/users.json', ready : false, data : null }, 
    { url : 'data/foods.json', ready : false, data : null } 
  ] 
 
  //              
  , isReady : function(){ 
    var isReady = true; 
    for(var key in this.dataSource){ 
      if(this.dataSource[key].ready !== true){ 
        isReady = false; 
      } 
    } 
    return isReady; 
  } 
 
  //         ，     dataReadyFunc       
  , callReady : function(){ 
    if(true === this.isReady()){ 
      for(var key in this.dataReadyFunc){ 
        this.dataReadyFunc[key](); 
      } 
    } 
  } 
 
  //     ，            dataReadyFunc  
  , dataReady : function(func){ 
    if (typeof func !== 'function') { 
      return false; 
    } 
    this.dataReadyFunc.push(func); 
  } 
 
  , init : function(){ 
    var self = this; 
    var _initElement = function(key, url){ 
      $.getScript(url, function(e){ 
        //       ，      dataSource ， ready    true，   callReady 
        self.dataSource[key].data = window[key]; 
        self.dataSource[key].ready = true; 
        self.callReady(); 
      }); 
    } 
    for(var key in this.dataSource){ 
      _initElement(key, this.dataSource[key].url); 
    } 
  } 
} 

용법:

foodOrder.dataReady(function(){ 
  alert(1);   
}); 
foodOrder.init(); 

dataReady 에 있 는 alert 는 모든 데 이 터 를 불 러 온 후에 실 행 될 것 입 니 다.
이 처리 의 논 리 는 복잡 하지 않 습 니 다.실행 할 모든 방법 을 dataReady 를 통 해 잠시 저장 하고 데이터 가 모두 불 러 온 후에 실행 합 니 다.더욱 복잡 한 장면 은 이 방법 이 여전히 통용 되 고 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.