就像是一棵樹有很多果實一樣，QWrap也有很多apps，本文講解"QWrap的Youa版應(yīng)用"，即apps/core_dom_youa.js。

Youa是QWrap的***個真正全面使用QWrap的項目，apps/core_dom_youa.js中同時包含core、dom、youa三種retouch，在介紹Retouch機(jī)制時已經(jīng)對他們分別作過介紹，他們同時起作用的結(jié)果就是：我們只引入一個js，就可以 :

像prototype一樣這樣寫：

new Date().format(); 

像jQuery一樣，這樣寫：

W('#aaa a.aaa').click(fun).css('color','red');  
W('body').css('color','black').query('>h1').color('red'); 

還可以像YUI3一樣這樣寫：

use('Drag,Valid',function(){alert([Drag,Valid]);}); 

當(dāng)然，也可以像YUI2一樣用靜態(tài)方法(當(dāng)然，我們不推薦YUI2這種用法)：

Dom.setStyle(el,'color','red'); 

前面講的兩個應(yīng)用一樣，apps/core_dom_youa.js也是一個復(fù)合文件，它含以下文件：

document.write('<script type="text/javascript" src="' + srcPath + 'core/core_base.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/module.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/browser.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/string.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/object.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/array.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/hashset.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/date.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/function.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/class.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/helper.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/custevent.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'core/custevent_retouch.js"><\/script>');  
 
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/selector.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/dom.u.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.w.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/event.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/event.w.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/eventtarget.h.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/jss.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.c.js"><\/script>');  
 
   document.write('<script type="text/javascript" src="' + srcPath + 'core/core_retouch.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'dom/dom_retouch.js"><\/script>');  
   document.write('<script type="text/javascript" src="' + srcPath + 'apps/youa_retouch.js"><\/script>'); 

事實上，還包括apps/youa_modules_config.js，不過由于組件這一塊還沒有放出來，所以先忽略掉。。。

發(fā)布時會將各個分文件合并起來，內(nèi)容如：apps/core_dom_youa.js(http://dev.qwrap.com/resource/js/_docs/_jk/js/apps/core_dom_youa.js)

這個文件經(jīng)YUI壓縮后大小為48K，gzip后大小為17K?？梢元毩⑹褂?。

在有啊的項目開發(fā)中，只需要使用一個QWrap庫就可以了，之前由注釋生成的文檔主要只是Helper方法的基本用法，那些并不是頁面編碼的同學(xué)希望使用的。所以，制作一個真正給頁面編碼同學(xué)使用的文檔，一直是一個迫切的需求。關(guān)于這個文檔，一直覺得是體力活，一直寄望有新同學(xué)或外包給別人來寫，拖延了很久，最終還是認(rèn)為自己動手來寫更切實際。2010年底，培培同學(xué)幫忙寫好css與html結(jié)構(gòu)，2010年十二月到2011年一月，花了一個月左右的時間，來完成這個體力活(還有好奇參與)，雖說有很多不足，好在幾乎能夠滿足同學(xué)們的需求了。----整理文檔時，也趁機(jī)人肉測試了很多單元測試中未出現(xiàn)的case，也找到了不少足子，還是挺值得的，慶幸沒有外包給別人來寫文檔。

正如曾在retouch小結(jié)里所講過的，retouch后的QWrap的用法很多，只能列出一些推薦的用法，免得列得太多反而讓人混淆。這份文檔在這里可以看到：

http://dev.qwrap.com/resource/js/_docs/_jk/

因為做得不夠?qū)I(yè)，所以臨時還是以“_jk”為目錄名，等專業(yè)版本出來后再改名吧。

有了這份文檔，就不用詳細(xì)介紹各種用法了，看一下就明白。

有幾點需要說明一下：

1. 各種Helper，在實際中并不使用。使用的都是經(jīng)過變換的方法，那些變換的方法即是retouch的產(chǎn)物。

2. 每一個方法的使用文檔里，都會有說明是它經(jīng)過什么變換得來的，例如，w.addClass是"本方法是由QW.NodeH.addClass經(jīng)“mul”、“methodize”變換得到"，點擊一下就可以看到原方法。

3. 所有方法都是QWrap的方法，與其它庫的方法參數(shù)有可能不一致，大部分有QWrap自己的考量，如果同學(xué)覺得不合理可以反饋一下，方便我們改進(jìn)。

4. 有啊項目之所以能只用QWrap而不用其它框架，還有一個原因是：QWrap有自己的一系列常用組件。。。這個將會在以后介紹組件時講到。

5. 為什么沒有Ajax與動畫?----因為它們被降級到組件級別了。

原文：http://www.cnblogs.com/jkisjk/archive/2011/04/22/qwrap_apps_core_dom_youa.html

【編輯推薦】

1. QWrap入門之a(chǎn)pps果實擴(kuò)展JS原生類
2. QWrap入門之a(chǎn)pps種子應(yīng)用
3. QWrap選擇器的一個bug:tagName的大小寫
4. QWrap入門指南