구성 파일에 따라 js 종속 모듈 로드(JavaScript 면접 문제)

18647 단어 JavaScript
면접 문제
 
아래 프로필에 따라 module=[{'name':'jquery','src':'/js/lib/jquery-1.8.3.js=[[{'name':'j'''''j''''''jquery''''':'/jjs/jque'j'jjjjjjjjjjjjjjjj'''''''''','s's''''''''''''''''/jjjjquery''''''''''''''''''':'s'/다음 프로필 아래 프로필에 따라'modulululule==='= [[[다음 프로필 아래 프로필 아래 프로필 loadify.js','require': ['swfobject']}, {'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']}, {'name':'register','src':'/js/page/reg.js','require':['jqform']}, {'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},{'name':'upload','src':'/js/page/upload.js','require': ['fancybox','jqform','uploadify']}] 함수 def getfiles(name)를 써서 어떤name가 지정한 페이지를 불러오는 것을 되돌려줍니다. 불러올 js 파일 목록은 의존적으로 불러와야 합니다.
 
간단한 해법
 
이 문제는 보기에는 매우 간단해 보이지만 실제로는 그렇지 않다.
어려운 점은 모듈의 적재 시기에 의존하는 데 있다.만약에 이런 의존 관계가 있다면 A-B&C, B-C, A모듈은 B모듈과 C모듈에 의존한다. 이 동시에 B모듈은 C모듈에 의존한다. C를 두 번 불러올 수 없잖아!
반찬이 제시한 이 해법은 단지 하나의 사고방식일 뿐이다. 이보다 더 좋은 알고리즘이 있을 것이다. 반찬은 두 갈래 나무 같은 알고리즘으로 해결할 수 있다고 생각하지만 반찬은 그럴 수 없다.
이 알고리즘은 순환 의존의 상황을 고려하지 않았다.
코드는 다음과 같습니다.
  1 /**
  2  *        
  3  * @type {Function}
  4  */
  5 var loadModule = (function(){
  6     /**
  7      *       
  8      * @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
  9      */
 10     var logics = {
 11         chainHead: {},     //   
 12         chainCurrent: {},  //      
 13         srcCache: {},      //module src   
 14         /**
 15          *     
 16          * @param modules      
 17          * @param name      
 18          * @returns {Array}       ,          
 19          */
 20         main: function(modules, name){
 21             var nameArray = [],  //      
 22                 srcArray = [],   //      
 23                 nameStr = "",    //        
 24                 repeatRegex = /(^| )([\w]+ ).*\2/,  //        
 25                 i = 0;
 26 
 27             //          
 28             this.load(modules, name)
 29 
 30             //          
 31             this.chainCurrent = this.chainHead;
 32             while(this.chainCurrent.next){
 33                 nameArray.push(this.chainCurrent.name);
 34                 this.chainCurrent = this.chainCurrent.next;
 35             }
 36             nameStr = nameArray.join(" ") + " ";  //
 37 
 38             //      
 39             while(repeatRegex.exec(nameStr)){
 40                 nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
 41                     return g0.substring(0, (g0.length - g2.length));
 42                 });
 43             }
 44             nameStr = nameStr.substring(0, (nameStr.length - 1));  //         
 45 
 46             //             
 47             nameArray = nameStr.split(" ");
 48             for(i = 0; i < nameArray.length; i++){
 49                 srcArray.push(this.srcCache[nameArray[i]]);
 50             }
 51 
 52             return srcArray;
 53         },
 54         /**
 55          *       
 56          * @param modules      
 57          * @param name      
 58          */
 59         load: function(modules, name){
 60             var node = {},
 61                 module = this.findModule.call(modules, "name", name),
 62                 i = 0;
 63             //        
 64             if(!module){
 65                 throw Error("     " + name +"    ");
 66             }
 67             //        
 68             node.name = name;
 69 //            node.src = module.src;
 70             this.srcCache[name] = module.src;
 71             node.next = this.chainHead;
 72             this.chainHead = node;
 73             //    
 74             if(module.require && module.require.length){
 75                 for(i = 0;i < module.require.length; i++){
 76                     this.load(modules, module.require[i]);
 77                 }
 78             }
 79         },
 80         /**
 81          *                 
 82          * @param name      
 83          * @param value     
 84          * @returns {*}
 85          */
 86         findModule: function(name, value){
 87             var array = this,
 88                 item = {},
 89                 i = 0;
 90             //    
 91             for(i = 0; i < array.length; i++){
 92                 item = array[i];
 93                 //      
 94                 if(item && item[name] === value){
 95                     return item;
 96                 }
 97             }
 98 
 99             //     null
100             return null;
101         }
102     };
103 
104     //      
105     return function(){
106         return logics.main.apply(logics, arguments);
107     };
108 }());
109 
110 
111 /**
112  * Test Usecase
113  * @type {*[]}
114  */
115 
116 var modules=[
117     {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
118     {'name':'swfobject','src':'/js/utils/swfobject.js'},
119     {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
120     {'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
121     {'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
122     {'name':'register','src':'/js/page/reg.js','require':['jqform']},
123     {'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
124     {'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','login','uploadify']}
125 ];
126 
127 console.log(loadModule(modules, "upload"));

좋은 웹페이지 즐겨찾기