根據設定檔載入js依賴模組_javascript技巧

要求：

根據下面的設定檔

複製程式碼 程式碼如下:

module=[
{'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.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載入兩次吧！

     小菜給出的這個解法，只是一個思路，肯定有比這更好的算法，小菜覺得可以用二叉樹之類的算法解決，但小菜不會呀~~~

     此演算法沒有考慮循環依賴的情境。

     代碼如下：

複製程式碼 程式碼如下:

 /**
  * 不考慮循環依賴
  * @type {Function}
 */
 var loadModule = (function(){
     /**
      * 業務邏輯封裝
      * @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
     */
     var logics = {
         chainHead: {},     //鍊錶頭
         chainCurrent: {},  //鍊錶目前節點
         srcCache: {},      //module src 快取
         /**
          * 對外介面
          * @param modules  設定物件
          * @param name  模組名稱
          * @returns {Array} 依賴模組列表，依照載入先後順序排列
         */
         main: function(modules, name){
             var nameArray = [],  //模組名稱清單
                 srcArray = [],   //依賴模組清單
                 nameStr = "",    //模組名稱字串集
                 repeatRegex = /(^| )([w] ).*2/,  //模組名稱去重正規
                 i = 0;
             //粗略載入所有依賴模組
             this.load(modules, name)
             //建構模組名稱字串集
             this.chainCurrent = this.chainHead;
             while(this.chainCurrent.next){
                 nameArray.push(this.chainCurrent.name);
                 this.chainCurrent = this.chainCurrent.next;
             }
             nameStr = nameArray.join(" ") " ";  //統一標準，最後請補一個空格
             //依賴模組去重物
             while(repeatRegex.exec(nameStr)){
                 nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
                     return g0.substring(0, (g0.length - g2.length));
                 });
             }
             nameStr = nameStr.substring(0, (nameStr.length - 1));  //去掉補充的多餘空格
             //依賴模組名稱轉換為模組路徑
             nameArray = nameStr.split(" ");
             for(i = 0; i                  srcArray.push(this.srcCache[nameArray[i]]);
             }
             return srcArray;
         },
         /**
          * 遞歸載入模組
          * @param modules  設定物件
          * @param name  模組名稱
          */
         load: function(modules, name){
             var node = {},
                 module = this.findModule.call(modules, "name", name),
                 i = 0;
             //判斷模組是否存在
             if(!module){
                 throw Error("依賴模組 " name " 未找到");
             }
             //建構模組依賴鍊錶
             node.name = name;
 //            node.src = module.src;
             this.srcCache[name] = module.src;
             node.next = this.chainHead;
             this.chainHead = node;
             //遞歸依賴
             if(module.require && module.require.length){
                 for(i = 0;i                      this.load(modules, module.require[i]);
                 }
             }
         },
         /**
          * 依據指定屬性名稱和屬性值來尋找模組
          * @param name  屬性名稱
          * @param value  屬性值
          * @returns {*}
         */
         findModule: function(name, value){
             var array = this,
                 item = {},
                 i = 0;
             //遍歷模組
             for(i = 0; i                  item = array[i];
                 //取得指定模組
                 if(item && item[name] === value){
                     return item;
                 }
             }
             //找不到使用null
             return null;
         }
     };
     //暴露對外介面
     return function(){
         return logics.main.apply(logics, arguments);
     };
 }());
 /**
  * 測試案例
  * @type {*[]}
 */
 var 模組=[
     {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
     {'name':'swfobject','src':'/js/utils/swfobject.js'},
     {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
     {'name':'uploadify','src':'/js/utils/uploadify.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','login','uploadify']}
 ];
 console.log(loadModule(modules, "上傳"));