2011-03-17 2 views
2

YUI3으로로드해야하는 JavaScript 모듈을 작성하려고합니다. 파일 및 폴더를 어떻게 구성해야합니까? 권장 폴더 구조가 있습니까? "코어"또는 "갤러리"와 비슷한 파일을 저장하면로드가 쉽지 않을까요?내 YUI3 자바 스크립트 파일을 어디서 어떻게 저장해야합니까?

다음과 같은 방식으로 스크립트를 저장하면 "유이(). 사용 ..."호출에 모든 단일 모듈을 나열해야합니까?

de-mylib-www/mymodules/mod1/mod1-base.js 
de-mylib-www/mymodules/mod2/mod2-base.js 
de-mylib-www/mymodules/mod3/mod3-base.js 
de-mylib-www/mymodules/mod3/mod3-class1.js 
de-mylib-www/mymodules/mod3/mod3-class2.js 

답변

0

이 작업을 수행하는 올바른 방법은 페이지가 YUI.use() 호출에 필요한 모듈을 나열하고 그 모듈은 요구 사항으로 필요한 모듈을 나열하는 것입니다.

페이지에서 mod3-class2을 사용하고 및 mod3-base에 따라 mod3-class2을 사용한다고 가정합니다.

YUI.add('mod3-class2', function(Y) { 
    /* Module code here */ 
}, 'module version', { 
    requires: ['mod1-base', 'mod3-base'] 
}); 

당신은 또한에 설정 파일을 사용하는 YUI Build Tool 사용할 수 있습니다 : 당신은 다음과 같은 mod3-class2.jsmod3-class2의 종속성을 지정합니다

YUI().use('mod3-class2', function (Y) { 
    /* Your code here */ 
}); 

: 당신은 당신의 메인 페이지에 이런 걸 원하는 것 해당 래퍼 코드를 생성하십시오.

2

YUI의 로더 패턴을 최대한 활용하려면 몇 가지 규칙을 따라야합니다. 당신의 예제는 디렉토리 패터닝이 이루어지는 한 거의 정확하게 보인다.

문서에 자바 스크립트 소스 파일을 명시 적으로 포함하지 않는 한 YUI 로더에게 모듈이 있고 그 모듈의 종속성을 알릴 필요가 있습니다. 현재로서는 모듈에 대해 종속성이로드되는 방식에 a bug이 있으므로, 두 위치, 로더 구성 및 YUI.add 문의 접미사로 종속성을 선언해야합니다.

두 가지 방법으로 로더를 구성 할 수 있습니다

: 당신이 그것을 사용하기를 호출하기 전에 YUI()에 인수로 설정을 전달할 수 있습니다, 또는 당신이 YUI_config 전역 변수에 구성을 지정할 수 있습니다

var cfg = { 
    /* other configs */ 
    modules: { 
     'mod3-base': { requires: [ 'mod3-class1', 'mod3-class2' ] }, 
     'mod3-class1': { /* */ }, 
     'mod3-class2': { /* */ } 
    } 
} 

// You could pass the config in as an argument: 
YUI(cfg).use('mod3-class2', function(Y) { 
    // your code 
}); 

// Or set it as a magic global: 
YUI_config = cfg; // will implicitly configure all YUI().use statements 

모듈 파일을 찾을 위치를 알 수 있도록 로더를 구성해야합니다.

일반적으로 로더는 각 모듈이 하나 이상의 하위 모듈 파일과 연결된 "수퍼 모듈"파일을 포함하는 고유 한 디렉토리를 가질 것으로 기대합니다.

  1. 베이스 base.js
  2. 베이스 build.js
  3. 베이스 pluginhost.js
  4. base.js 예를 들어, 우리는 다음과 같은 패턴을 볼 수있는 "자료"모듈보고 :

이러한 4 가지 유형 각각에는 "원시"소스 파일, "-min"및 "-debug"소스의 세 가지 변형이 있습니다. . 로더를 구성하는 방법에 따라 축소 된 변형을 찾을 수도 있습니다.

관련 문제