整合第三方JS庫

方法1：javaScriptFile和styleSheetFile

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

<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下，配置范例如下： 注意上面我們說的是第三方的資源，如果僅僅是想給當(dāng)前View添加自定義的js或css，則可以采用同名規(guī)則，View會自動加載，如圖：

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

方法2：packages-config.xml

上面通過View提供的javaScriptFile和styleSheetFile屬性可以引入第三方的資源文件和js庫，但是還考慮到可能存在如下的情況： 多個View需要引入相同的js和css配置文件，并且這些js和css文件并不止一個，如果按照上面的方式配置就會比較羅嗦。 下面我們就引入packages-config.xml配置方式，在每一個項目的dorado-home文件夾下都有packages-config.xml配置文件。 該文件主要用于系統(tǒng)資源文件的打包處理。下面以sample-center為例簡單介紹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中我們在web的根目錄中添加了如下的syntax-highlighter資源目錄，把相關(guān)的js和css都復(fù)制于此。 接下來我們可以在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代碼中添加了兩個package(名稱為syntax-highlighter和syntax-highlighter-css),其pattern用于定義資源的類型，分別為js和css。 我們先看view如何引用其中的資源： view提供了packages屬性，用于引入packages-cinfig.xml中配置的資源包，如果有多個資源包，逗號分隔： 通過view的packages屬性我們就可以方便的引入一組js或css文件。

depends

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

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

baseUri

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

common

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

min壓縮

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

方法3:$load()

參考代碼:

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

方法4：用JSP或Velocity等頁面模板

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