整合第三方JS庫(kù)

方法1：javaScriptFile和styleSheetFile

對(duì)于一個(gè)dorado的view，如果我們希望引入外部第三方的js庫(kù)以及對(duì)應(yīng)css等資源文件我們可以通過(guò)View提供的以下兩個(gè)屬性引入： 例如在sample-center的view中： 通過(guò)如上方式引入一個(gè)js，頁(yè)面打開(kāi)后我們可以在源碼出看到這個(gè)js以及被直接合并到頁(yè)面中： 如果需要引入多個(gè)js，逗號(hào)分隔就可以:

<Property name="javaScriptFile">/libraries/syntax-highlighter/shBrushCss.js,/libraries/syntax-highlighter/shBrushJava.js,/libraries/syntax-highlighter/shBrushJScript.js,/libraries/syntax-highlighter/shBrushXml.js</Property>

當(dāng)然資源文件也可以放在src下，配置范例如下： 注意上面我們說(shuō)的是第三方的資源，如果僅僅是想給當(dāng)前View添加自定義的js或css，則可以采用同名規(guī)則，View會(huì)自動(dòng)加載，如圖：

注意最后三個(gè)文件，文件名一樣而擴(kuò)展名不一樣，這種情況下你根本就不需要配置javaScriptFile和styleSheetFile屬性，View默認(rèn)就會(huì)加載對(duì)應(yīng)的js和css。 對(duì)于這種使用方式的JS文件代碼的編寫(xiě)建議參考<<Javascript Controller技術(shù)>>

方法2：packages-config.xml

上面通過(guò)View提供的javaScriptFile和styleSheetFile屬性可以引入第三方的資源文件和js庫(kù)，但是還考慮到可能存在如下的情況： 多個(gè)View需要引入相同的js和css配置文件，并且這些js和css文件并不止一個(gè)，如果按照上面的方式配置就會(huì)比較羅嗦。 下面我們就引入packages-config.xml配置方式，在每一個(gè)項(xiàng)目的dorado-home文件夾下都有packages-config.xml配置文件。 該文件主要用于系統(tǒng)資源文件的打包處理。下面以sample-center為例簡(jiǎn)單介紹packages-config.xml的基本使用方式。 packages-config.xml的默認(rèn)代碼：

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <Patterns>
        <Pattern name="js" contentType="text/javascript" charset="UTF-8" mergeRequests='${configure["view.mergeJavaScript"]}' resourceSuffix=".js" />
        <Pattern name="css" contentType="text/css" charset="UTF-8" mergeRequests='${configure["view.mergeStyleSheet"]}' resourceSuffix=".css" />
    </Patterns>

 
    <Packages>
        <Package name="common" pattern="js"></Package>
    </Packages>
</config>

如sample-center中我們?cè)趙eb的根目錄中添加了如下的syntax-highlighter資源目錄，把相關(guān)的js和css都復(fù)制于此。 接下來(lái)我們可以在packages-config.xml中做出如下的配置：

<Packages>
    <Package name="common" pattern="js"></Package>

 
    <Package name="syntax-highlighter-css" pattern="css" baseUri=">libraries/syntax-highlighter">
        /libraries/syntax-highlighter/shCore,
        /libraries/syntax-highlighter/shThemeDefault
    </Package>
    <Package name="syntax-highlighter" pattern="js" depends="jquery,syntax-highlighter-css">
        /libraries/syntax-highlighter/jquery.beautyOfCode,
        /libraries/syntax-highlighter/jquery.beautyOfCode.init,
        /libraries/syntax-highlighter/shCore,
        /libraries/syntax-highlighter/shBrushJava,
        /libraries/syntax-highlighter/shBrushJScript,
        /libraries/syntax-highlighter/shBrushXml
    </Package>
</Packages>

xml代碼中添加了兩個(gè)package(名稱(chēng)為syntax-highlighter和syntax-highlighter-css),其pattern用于定義資源的類(lèi)型，分別為js和css。 我們先看view如何引用其中的資源： view提供了packages屬性，用于引入packages-cinfig.xml中配置的資源包，如果有多個(gè)資源包，逗號(hào)分隔： 通過(guò)view的packages屬性我們就可以方便的引入一組js或css文件。

depends

在sample-center范例工程中，我們注意到ViewSource.view.xml中只引入了syntax-highlighter一個(gè)package： 但是最終運(yùn)行的時(shí)候，我們通過(guò)chorme的元素審查功能可以看到相關(guān)的syntax-highlighter-css包中的資源也被下載： 這就是package節(jié)點(diǎn)中depends屬性的含義了。 從上圖中我們也可以看出采用packages機(jī)制與采用View中的javaScriptFile與styleSheetFile機(jī)制引入第三方資源的機(jī)制還是有所差別的，javaScriptFile與styleSheetFile中的資源會(huì)被合并到頁(yè)面中，而采用package機(jī)制引入的資源不會(huì)合并，而是作為頁(yè)面的資源引用機(jī)制加載。

注意其中name為syntax-highlighter的package中定義了depends,表示這個(gè)package依賴jquery和syntax-highlighter-css兩個(gè)package,其中jquery是dorado核心包默認(rèn)提供的，直接使用就可以。 這樣當(dāng)一個(gè)View通過(guò)packages屬性引入一個(gè)資源包的時(shí)候，會(huì)根據(jù)depends設(shè)定自動(dòng)加載依賴的資源包。

baseUri

再來(lái)解釋一下syntax-highlighter-css屬性中baseUri的含義，package內(nèi)部定義的資源默認(rèn)采用Resource機(jī)制加載，如果我們定義了baseUri就表示從一個(gè)相對(duì)的web應(yīng)用的資源目錄的根路徑。 其中baseUri中的">"符號(hào)表示從web應(yīng)用的根目錄開(kāi)始計(jì)算。 當(dāng)然了，package中資源的加載也支持其他的方式，例如你可以將這些資源放置在src下，如： 那么packages-config.xml的配置就可以調(diào)整為： 在對(duì)應(yīng)資源的前面添加classpath:標(biāo)識(shí)。

common

對(duì)于一些你希望在所有View中都加載的js資源，你可以通過(guò)名稱(chēng)為common的package定義，如： 這樣View中的packages即使不定義，dorado的資源管理機(jī)制也會(huì)自動(dòng)的將配置中的js資源加載到所有的view中。 同樣的你也可以在common中利用depends或baseUri屬性引入更多第三方的js和css資源，一個(gè)范例參考一下：

min壓縮

另外，如果你希望支持資源包壓縮功能，從而減輕網(wǎng)絡(luò)資源下載的數(shù)據(jù)量，則需要將相關(guān)的css和js利用第三方的工具包(例如:YUI Compressor)做好min.css或min.js文件，并放在對(duì)應(yīng)的資源文件夾下，如： 這樣一旦我們采用production運(yùn)行模式(參考<<基礎(chǔ)教程>>的運(yùn)行模式)的時(shí)候，資源下載管理器會(huì)自動(dòng)尋找對(duì)應(yīng)的min類(lèi)型的文件下載，只有在找不到的前提下才選用未做min處理的資源文件下載。

方法3:$load()

參考代碼:

$load("http://map.qq.com/api/js?v=2.exp",{
    type:"js",
    callback:function(){
        console.log("加載成功");
    }
})

方法4：用JSP或Velocity等頁(yè)面模板

你可以用JSP或Velocity等頁(yè)面模板技術(shù)，這樣引用資源在頁(yè)面模板中定義就可以 參考范例: http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.Main.d#40354下載：packages-config.xmpackages-config.xmpackages-config.xmpackages-config.xm