Yui 모듈 개발 원리 상해

인터넷 응용이 갈수록 무거워지면서 js 코드는 점점 거대해지고 자신의 코드를 어떻게 효과적으로 조직하는가가 매우 중요하다.우리는 마지막 버그가 어디서 튀어나왔는지 전혀 알지 못할 때까지 자신의 코드를 제어하는 것을 배워야 한다.전단의 모듈화 개발은 우리가 코드를 효과적으로 관리하는 데 도움을 줄 수 있다. 특히 많은 사람들이 개발할 때 개발 효율을 높일 수 있다.유이가 모듈을 만드는 방식은: 유이.add('module1', function (Y) { ... }, '1.0.0', requires: ['module2']);YUI는 전역 변수입니다. jquery의 $와 유사합니다.dd 방법의 첫 번째 매개 변수는 모듈의 이름module1이고 두 번째 매개 변수는 익명 함수이다. 그 안에는 모듈 내용이고 세 번째 매개 변수는 버전 이름이다. 네 번째 Requires는 모듈의 의존 관계를 나타낸다. 예를 들어 위는module1이module2(즉module2가module1보다 먼저 실행해야 한다).일반적으로 모든 모듈은 js 파일에 저장되며, 파일은 모듈 이름으로 명명됩니다. 즉 모듈module1은module1에 저장됩니다.js 파일에서module2는mudule2에 저장됩니다.js 파일에서로드 모듈 module1://YUI seed 파일을 로드하고 YUI의 모든 의존 관계를 포함합니다

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

다음은 위의 이 코드에 무슨 일이 일어날지 분석해 봅시다.1) YUI는 먼저 모듈에 존재하는 의존 관계를 분석하여 URL을 만듭니다.http://localhost:3000/yui/combo?mudule2.js&module1.js.module2 주의하세요.js는modul1에 있습니다.js 앞.2) 동적script 태그를 만들고 서버에 js 파일 요청하기

 
  
　　var script = document.createElement('script'); 
  
　　script = 'http://localhost:3000/yui/combo?mudule2.js&module1.js'; 
  
　　if(script.readyState) { 
  
　　　　//IE 
  
　　　　script.onreadystatechange = function () { 
  
　　　　　　if (script.readyState == "loaded" || script.readyState == "complete"){ 
  
　　　　　　　　script.onreadystatechange = null; 
  
　　　　　　　　//   
  
　　　　　　} 
  
　　　　}; 
  
　　} else { 
  
　　　　// IE 
  
　　　　script.onload = function () { 
  
　　　　　　//   
  
　　　　}; 
  
　　} 
  
　　document.body.append(script); 
  
 
 

3) 서버측에서 클라이언트가 보낸 요청을 감지하고 URL을 분석한 다음module2를 찾기 시작한다.js와module1.js 두 개의 js 파일과 두 개의 파일을 순서대로 하나의 파일로 조합하여 클라이언트에게 되돌려줍니다.마지막으로 전송된 js 파일의 내용은 다음과 같습니다.

 
  
//module2.js      
  
　　YUI.add('module2', function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; }, '1.0.0', requires: []); 
  
　　//module1.js      
  
　　YUI.add('module1', function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; }, '1.0.0', requires: ['module2']); 
  
 
 

4) 클라이언트가 되돌아오는 js를 받아들여 해석을 시작합니다. 즉, 안에 있는 YUI에서의dd 방법을 실행합니다. 실행 과정은 대체로 다음과 같습니다.

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

5) 해석이 완료되면 단계 2의 onload 방법(IE의 onreadystatechange 방법)을 자동으로 트리거하고 다음은 단계 2의 "예약"에 있는 코드입니다.

 
  
　　for(var i = 0, len = YUI.modules.length; i < len; i++) { 
  
　　　　//      export  api   this  ；this YUI     ， this = new YUI(); 
  
　　　　YUI.modules[i](this); 
  
　　} 
  
　　//callback  YUI().use        
  
　　//        ，  this  ， callback        module1   module2     api  
  
　　callback(this); 
  
  
 

이상은 유이의 모듈화 개발에 대한 간단한 소개를 빌려 유이의 실제 과정은 위보다 훨씬 복잡하다.