欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

根據配置文件加載js依賴模塊

 更新時間:2014年12月29日 10:52:29   投稿:hebedich  
這篇文章主要介紹了根據配置文件加載js依賴模塊,解決方法是筆者自己的思路,拋磚引玉,需要的朋友可以參考下

要求:

根據下面的配置文件

復制代碼 代碼如下:

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']}
]

寫一個函數(shù)

def getfiles(name)

返回 加載某個name指定的頁面,要加載的js文件列表,有依賴的要先加載

小菜解法

    此題粗看起來很簡單,實則不然。

     難點在于依賴模塊的加載時機。假如有這樣的依賴關系:A-B&C、B-C,A模塊依賴B模塊和C模塊,同時B模塊又依賴了C模塊,總不能讓C加載兩次吧!

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

     此算法沒有考慮循環(huán)依賴的情景。

     代碼如下:

復制代碼 代碼如下:

 /**
  * 不考慮循環(huán)依賴
  * @type {Function}
  */
 var loadModule = (function(){
     /**
      * 業(yè)務邏輯封裝
      * @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
      */
     var logics = {
         chainHead: {},     //鏈表頭
         chainCurrent: {},  //鏈表當前節(jié)點
         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(" ") + " ";  //統(tǒng)一標準,末尾補一個空格
             //依賴模塊去重
             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 < nameArray.length; 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 < module.require.length; 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 < array.length; i++){
                 item = array[i];
                 //獲取指定模塊
                 if(item && item[name] === value){
                     return item;
                 }
             }
             //找不到返回null
             return null;
         }
     };
     //暴露對外接口
     return function(){
         return logics.main.apply(logics, arguments);
     };
 }());
 /**
  * Test Usecase
  * @type {*[]}
  */
 var modules=[
     {'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, "upload"));

相關文章

  • js與jquery分別實現(xiàn)tab標簽頁功能的方法

    js與jquery分別實現(xiàn)tab標簽頁功能的方法

    這篇文章主要介紹了js與jquery分別實現(xiàn)tab標簽頁功能的方法,結合實例形式對比分析了javascript與jQuery分別實現(xiàn)tab標簽功能的操作技巧,需要的朋友可以參考下
    2016-11-11
  • JavaScript canvas繪制漸變顏色的矩形

    JavaScript canvas繪制漸變顏色的矩形

    這篇文章主要為大家詳細介紹了JavaScript canvas繪制漸變顏色的矩形,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • js獲取當前年月日-YYYYmmDD格式的實現(xiàn)代碼

    js獲取當前年月日-YYYYmmDD格式的實現(xiàn)代碼

    下面小編就為大家?guī)硪黄猨s獲取當前年月日-YYYYmmDD格式的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • alert中斷settimeout計時功能

    alert中斷settimeout計時功能

    在測試過程中發(fā)現(xiàn)alert會中斷settimeout的計時功能,關閉對話框后,settimeout的時間會重頭開始計時,而不是從中斷處,感興趣的朋友可以了解下
    2013-07-07
  • 微信JSAPI支付操作需要注意的細節(jié)

    微信JSAPI支付操作需要注意的細節(jié)

    這篇文章主要介紹了微信JSAPI支付中所遇到的那些坑,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • JS模擬面向對象全解(一、類型及傳遞)

    JS模擬面向對象全解(一、類型及傳遞)

    首先說明JS的特點。JS是弱類型的語言,像什么模板多態(tài)、又是類又是結構的說法,就完全不存在。
    2011-07-07
  • 實例分析瀏覽器中“JavaScript解析器”的工作原理

    實例分析瀏覽器中“JavaScript解析器”的工作原理

    本文主要對javascript解析器的工作原理進行實例分析,具有很好的參考價值,下面就跟小編一起來看下吧
    2016-12-12
  • JavaScript 私有成員分析

    JavaScript 私有成員分析

    JavaScript是世界上最受誤解的語言。有人認為它缺少信息隱藏的屬性(封裝),因為JavaScript對象不能擁有私有變量和函數(shù)。但這是誤解。JavaScript對象可以有私有成員。下面進行說明。
    2009-01-01
  • 微信小程序傳值常用的4種方式

    微信小程序傳值常用的4種方式

    微信小程序開發(fā)中的大部分知識點和前端開發(fā)是一模一樣的,這篇文章主要給大家介紹了關于微信小程序傳值常用的4種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • 含有CKEditor的表單如何提交

    含有CKEditor的表單如何提交

    如何提交含有CKEditor的表單,其實很簡單的在提交事件中加入這一句即可解決問題
    2014-01-01

最新評論