YUI 모듈 개발 원리에 대한 자세한 설명_기본 지식

인터넷 애플리케이션이 점점 더 무거워지고 js 코드가 점점 커지면서 자신만의 코드를 어떻게 효과적으로 구성하는가가 매우 중요해졌습니다. 갑자기 튀어나오는 수많은 버그로 끝나는 대신, 우리 자신의 코드를 제어하는 ​​방법을 배워야 합니다. 모듈식 프런트 엔드 개발은 특히 여러 사람이 개발할 때 코드를 효과적으로 관리하여 개발 효율성을 높이는 데 도움이 됩니다.

YUI가 모듈을 생성하는 방식은 :
YUI.add('module1', function (Y) { ... }, '1.0.0', require: [' module2']);
YUI는 jquery의 $와 유사한 전역 변수입니다. add 메소드의 첫 번째 매개변수는 모듈 module1의 이름이고, 두 번째 매개변수는 모듈 내용인 익명 함수이고, 세 번째 매개변수는 버전 이름이며, 네 번째 require는 모듈의 종속성을 나타냅니다. module1은 module2에 따라 다릅니다. 즉, module2는 module1보다 먼저 실행되어야 합니다.
보통 각 모듈은 js 파일에 저장되며 파일 이름은 모듈 이름을 따서 지정됩니다. 즉, 모듈 module1은 module1.js 파일에 저장되고 module2는 module2.js 파일에 저장됩니다.
모듈 module1 로드:
//모든 YUI 종속성을 포함하는 YUI 시드 파일 로드

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

<script><br>　YUI().use('module1', function (Y ) { .. });<br></script>

위의 코드 줄에서 무슨 일이 일어날지 분석해 보겠습니다.
1) YUI는 먼저 module1 모듈의 종속성을 분석하고 http://localhost:3000/yui/combo?mudule2.js&module1.js라는 URL을 생성합니다. module2.js가 module1.js 앞에 있다는 점에 유의하세요.
2) 동적 스크립트 태그를 생성하고 서버에서 js 파일을 요청합니다

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

　var script = document.createElement('script ');
script = 'http://localhost:3000/yui/combo?mudule2.js&module1.js';
if(script.readyState) {
//IE
script.onreadystatechange = 함수 ( ) {
　if (script.readyState == "loaded" || script.readyState == "complete"){
　script.onreadystatechange = null;
　　　 //예약됨
　　　}
};
　} else {
　　 //IE가 아닌
　script.onload = function () {
　　　 //예약됨
　　};
　}
　document.body .append(스크립트);

3) 서버는 클라이언트로부터 들어오는 요청을 감지하고 URL을 구문 분석한 다음 두 개의 js 파일 module2.js 및 module1.js를 찾기 시작하고 두 파일을 순서대로 하나의 파일로 결합한 후 반환합니다. 그것을 클라이언트에게. 반환된 최종 js 파일의 내용은 다음과 같습니다.
　

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

//module2.js의 내용
YUI.add('module2', function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; }, '1.0 .0', require : []);
//module1.js의 내용
YUI.add('module1', function (Y) { Y.module1 = {}; Y.module1.name = ' module1'; } , '1.0.0', 필요: ['module2']);

4) 클라이언트는 반환된 js를 수신하고 구문 분석을 시작합니다. 즉, 내부의 YUI에서 add 메소드를 실행합니다. 실행 과정은 대략 다음과 같습니다.

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

YUI.modules = {};
　// module2
YUI.modules.push(function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; });
//module1
YUI.modules .push( 함수 (Y) { Y.module1 = {}; Y.module1.name = 'module1'; });

5) 구문 분석이 완료되면 2단계의 onload 메서드(IE의 경우 onreadystatechange 메서드)가 자동으로 트리거됩니다. 다음은 2단계의 "reserved"에 있는 코드입니다.

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

　for(var i = 0, len = YUI.modules .length; i < len; i ) {
//이것은 YUI의 인스턴스입니다.
YUI.modules[ i](this);
　}
　//callback은 YUI()의 콜백 함수입니다.use
　//이 시점에서 모듈 구문 분석이 완료되었으므로 this 매개 변수를 전달합니다. 콜백에서 원하는 대로 module1을 호출할 수 있습니다. 그리고 module2의 API 출력
callback(this);

위는 YUI의 도움을 받은 모듈 개발에 대한 간략한 소개입니다. YUI의 실제 프로세스는 위보다 훨씬 더 복잡합니다.