完美世界txt下载,辰东完美世界有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

QWrap入門之a(chǎn)pps種子應(yīng)用

就像是一棵樹有很多果實一樣，QWrap也有很多apps，本文講解種子應(yīng)用?！胺N子”是沿用YUI3的說法，種子應(yīng)用是解決模塊加載問題的應(yīng)用，包括：模塊預(yù)加載、異步按需加載、模塊應(yīng)用。

apps果實篇之：種子

或許有些同學(xué)對異步加載模塊不大熟悉，沒關(guān)系，我們先感性的看一下這段代碼

 
 
 
  
  
    
  
  
    
  
  
    
  
  
  QW應(yīng)用之一：seed_youa  
  
  
    
  
  
    
  
  
    
  
  
    
  
  
  div1-----時間

div2-----時間

function test(){

QW.use('jQuery,YouaCore',function(){

$('#div1').css('color','red').find('>.content').html(new Date()+'');//這段代碼用到了jquery用法

W('#div2').css('color','blue').query('.content').html(new Date().format('YYYY-MM-dd hh:mm:ss'));//這段代碼用到了Youa版的QWrap

});

}

1. 如果用戶瀏覽此網(wǎng)頁時，只加載了一個體積很小的seed_youa.combo.js這個js(其實就是seed_youa.js（http://dev.qwrap.com/resource/js/apps/seed_youa.js）)，這個js經(jīng)yui壓縮后的大小為4K。

2. 當(dāng)用戶點擊按鈕時，按鈕對應(yīng)的js用到j(luò)Query與YouaCore，點擊后才會去加載那兩個jQuery與YouaCore對應(yīng)的js，之后才有運(yùn)行效果。

3. 第二次點擊按鈕，由于前面已經(jīng)加載過js，所以這次會直接運(yùn)行按鈕事件。

分析一下以上三步，分兩種情況。

A. 對于只進(jìn)行了第一步操作的用戶，他們用seed_youa.js替代了jQuery與YouaCore兩個js的流量(這是好處甲);

B. 對于進(jìn)行過第二步操作的用戶，由于以上流量的節(jié)約，會讓用戶提前能夠點擊按鈕(這是好處乙)，點擊后異步加載需要的js，加載完后事件才運(yùn)行，即點擊與運(yùn)行存在一個時間差(這是壞處甲)，并且三個js都用到了，相對于傳統(tǒng)寫法，http多了一個seed_youa.combo.js(這是壞處乙)。

另外，對于頁面程序員來說，他在寫按鈕事件時，只需要知道自己的這段js用到了哪些模塊，而不用關(guān)心這些模塊是否已經(jīng)加載(這是好處丙)，不過，他引用模塊的方式有了一些變化(少鍵入html代碼，多鍵入js代碼)。

好處甲、好處乙、好處丙、壞處甲、壞處乙，還有些沒有分析到的好處與壞處，反正有利有弊。

那么，在什么情況下利大于弊、什么情況下弊大于利，而我們該如何興利除弊?

如果這個頁面的用戶100%不會點擊按鈕，則幾乎沒壞處，只有好處甲、好處丙。

如果頁面100%的用戶會點擊按鈕，則需要權(quán)衡再權(quán)衡利弊再想辦法。

好的，我們先暫且擱置這些細(xì)節(jié)，因為以上內(nèi)容已足夠讓同學(xué)們對“異步按需加載”有了感性的認(rèn)識。我們把提供這種異步按需加載的js叫種子(seed)。

我們看一下seed_youa.js，它是一個組合js(即前面一篇文章所說的B類apps：開發(fā)時可以是多個文件，但上線時會先合并后上線。)

它由三個js組成：

 
 
 
  
  
  document.write('<\/script>');  
  
  
  document.write('<\/script>');  
  
  
  document.write('<\/script>')

core/core_base.js是QWrap的主干js
core/module.h.js是模塊管理器，也是一個Helper，提供三個方法：addConfig、use、provide，代碼參見：http://dev.qwrap.com/resource/js/core/module.h.js
youa_modules_config.js是youa項目只所使用到的常用模塊配置，通過addConfig進(jìn)行模塊配置，代碼如下：

 
 
 
  
  
  /*Lib Module*/ 
  
  
  QW.ModuleH.addConfig({  
  
  
      YouaCore: {  
  
  
          url: '//apps/core_dom_youa_lazy.combo.js',  
  
  
          loadedChecker:function(){  
  
  
              return !!(QW.W);  
  
  
          }  
  
  
      },  
  
  
      Ajax: {  
  
  
          url: '//components/ajax/ajax.youa.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Anim: {  
  
  
          url: '//components/animation/anim.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Cookie: {  
  
  
          url: '//components/cache/cache.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Storage: {  
  
  
          url: '//components/cache/cache.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Drag: {  
  
  
          url: '//components/drag/drag.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Editor: {  
  
  
          url: '//components/editor/editor.js',  
  
  
          requires: 'YouaCore,Panel' 
  
  
      },  
  
  
      Panel: {  
  
  
          url: '//components/panel/panel.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Suggest: {  
  
  
          url: '//components/suggest/suggest.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      "Switch": {  
  
  
          url: '//components/switch/switch.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Tree: {  
  
  
          url: '//components/tree/tree.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      Valid: {  
  
  
          url: '//components/valid/valid.js',  
  
  
          requires: 'YouaCore' 
  
  
      },  
  
  
      jQuery: {  
  
  
          url: 'http://common.cnblogs.com/script/jquery.js',  
  
  
          loadedChecker:function(){  
  
  
              return !!(window.jQuery && window.jQuery.fn);  
  
  
          }  
  
  
      }  
  
  
  });   
  
  
   
  
  
  /*Logic Module*/ 
  
  
  QW.ModuleH.addConfig({  
  
  
      "User": {  
  
  
          url: '//global/userv3.js',  
  
  
          requires: 'YouaCore',  
  
  
          loadedChecker: function() {  
  
  
              return !!window.topbar;  
  
  
          }  
  
  
      },  
  
  
      ShopMap: {  
  
  
          url: '//sp/map/shopmap.js',  
  
  
          requires: 'YouaCore' 
  
  
      }  
  
  
  });

看到這個配置文件的同學(xué)也許會問：模塊添加得越來越多會怎么辦?為什么不像YUI一樣，在各個模塊的js里進(jìn)行addConfig，而要集中起來addConfig?

不錯，理論上是會越來越大，但是，實際上最大能大到多少?并且不一定是所有的模塊配置都要放在這里面。在頁面的js里也可以QW.addConfig('MyPageJs','//my.js')的。所謂的太大，只是個理論問題，不是個實際問題。

YUI在各個模塊的js里進(jìn)行add，有好處，也有壞處。

好處就是多了個沙箱機(jī)制，沙箱理論看起來很嚴(yán)謹(jǐn)，可以滿足YUI的嚴(yán)謹(jǐn)性潔癖----其實我一直沒有理解它對實用者都有啥好處。

而壞處，也有很多。例如：

1. 需要模塊的代碼來適應(yīng)他的加載機(jī)制。----例如，jQuery也可以算是個模塊，憑什么要讓獨立的jquery來改代碼?

2. 假設(shè)我改了jQuery的代碼來適應(yīng)這loader，那是不是也損失了jQuery的原來的用法，即預(yù)加載模式用法(在HTML的Header里引用jquery.js，在頁面直接用$('#id').show())。

3. 例如use('Editor',function(){})時，其實由于依賴關(guān)系，會按需加載YouaCore,Drag,Panel,Editor四個js，因為依賴關(guān)系是在各自的js里，理論上無法將四個請求合并成一個請求，也無法在請求editor.js時就并行請求drag.js。

4. 如果客戶端緩存了js，我們更新Editor.js后，use('Editor',function(){})無法知道是否需要在editor.js后添加版本號。

5. 如果有復(fù)合模塊，例如core_dom_youa_lazy.js其實是同時擁有很多小模塊功能的一個js，那在drap.js里如何定義依賴?

而QWrap的“集中配置”方式，上面幾條都不是什么問題。

對于第一條第二條，已經(jīng)解決，即：addConfig時的loadedChecker參數(shù)。

例如，這樣配置jQuery：

 
 
 
  
  
  QW.ModuleH.addConfig({  
  
  
      jQuery: {  
  
  
          url: 'http://common.cnblogs.com/script/jquery.js',  
  
  
          loadedChecker:function(){  
  
  
              return !!(window.jQuery && window.jQuery.fn);  
  
  
          }  
  
  
      }  
  
  
  });

這個jQuery引用的是博客園網(wǎng)站的，我們沒有作任何修改。

如果頁面已經(jīng)預(yù)加載了jquery，運(yùn)行QW.use('jQuery',function(){})也不會再次加載jquery.js。

當(dāng)然，用戶還可以保持習(xí)慣，用以前的預(yù)加載經(jīng)典用法。

對于第三條合并請求與并行請求，QW目前還沒做，不過，只需調(diào)整一下module.h.js里的某一段代碼即可。在源代碼里有說明：

 
 
 
  
  
  function loadsJsInOrder() {  
  
  
        //瀏覽器不能保證動態(tài)添加的ScriptElement會按順序執(zhí)行，所以人為來保證一下  
  
  
        //參見：http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/  
  
  
        //測試幫助：http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=3&jsdelay=0&n=1&t=1294649352  
  
  
        //todo: 目前沒有充分利用部分瀏覽器的并行下載功能，可以改進(jìn)。  
  
  
        //todo: 如果服務(wù)器端能combo，則可修改以下內(nèi)容以適應(yīng)。  
  
  
        var moduleI = loadingModules[0];  
  
  
        function loadedDone() {  
  
  
            moduleI.loadStatus = 2;  
  
  
            var cbs = moduleI.__callbacks;  
  
  
            for (var i = 0; i < cbs.length; i++) {  
  
  
                cbs[i]();  
  
  
            }  
  
  
            isLoading = false;  
  
  
            loadsJsInOrder();  
  
  
        }  
  
  
        if (!isLoading && moduleI) {  
  
  
            //alert(moduleI.url);  
  
  
            isLoading = true;  
  
  
            loadingModules.splice(0, 1);  
  
  
            var checker = moduleI.loadedChecker;  
  
  
            if (checker && checker()) { //如果有l(wèi)oaderChecker，則用loaderChecker判斷一下是否已經(jīng)加載過  
  
  
                loadedDone();  
  
  
            } else {  
  
  
                loadJs(moduleI.url.replace(/^\/\//, QW.PATH), loadedDone);  
  
  
            }  
  
  
        }  
  
  
    }

對于第四條緩存，由于是統(tǒng)一配置，所以只需在發(fā)布時，在配置文件的js后面加上對應(yīng)js的md5碼的前N位即可。

例如，線上的配置可能是：

 
 
 
  
  
  Ajax: {  
  
  
        url: '//components/ajax/ajax.youa.js?111111.js',  
  
  
        requires: 'YouaCore' 
  
  
    },  
  
  
    Anim: {  
  
  
        url: '//components/animation/anim.js?222222.js',  
  
  
        requires: 'YouaCore' 
  
  
    }

頁面引用的種子，也是在后面加上它的md5碼的前N位。

這樣做的好處是：每次上線后，用戶也只需下載有過修改的js。

對于第五條的復(fù)合模塊問題，由于是統(tǒng)一配置，所以根本就不是問題。

說了seed_youa.js的這么多好處，當(dāng)然還要說明一個限制：項目中需要有一個水平還過得去的js同學(xué)，來負(fù)責(zé)這個統(tǒng)一的模塊配置文件。

關(guān)于module.h.js還有挺多內(nèi)容要講的，不過，絕大同學(xué)不用關(guān)心它的實現(xiàn);關(guān)心他的實現(xiàn)的同學(xué)大多也看過NK行的YUI3種子，再看這個兩百行的module.h.js，應(yīng)該是小case，這里先略過。

小結(jié)一下，QWrap的這個種子應(yīng)用是綠色版的，并且小巧、靈活，可以直接復(fù)制過去引用。不過需要注意一下你所放的路徑，防止QW.PATH的值計算有誤，或者強(qiáng)制改掉QW.PATH的值。

附：QWrap網(wǎng)址：http://www.qwrap.com

原文：http://www.cnblogs.com/jkisjk/archive/2011/04/15/qwrap_apps_seed_youa.html

分享題目：QWrap入門之a(chǎn)pps種子應(yīng)用
網(wǎng)頁地址：http://fisionsoft.com.cn/article/djdcsho.html

新聞中心

其他資訊