YUI (Yahoo! User Interface) Combo handling 匯整壓縮

星期三, 七月 02, 2008

YUI (Yahoo! User Interface) Combo handling 匯整壓縮

上星期聽 Joseph 說, 要節省 Request 數量, YUI 有另外一個新東西, 可以一次把要的 YUI Library 整合成一個, 一起壓縮後再傳出來.

大致上意思是如下, 原本要載入 reset-fonts-grids, base, skin 等, 範例如下:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">

可以整合成如下一行:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.5.2/build/reset-fonts-grids/reset-fonts-grids.css&2.5.2/build/base/base-min.css&2.5.2/build/assets/skins/sam/skin.css">

就是 combo "?" 後接上原本 http://yui.yahooapis.com/ 的值即可,第一個之後使用 "&" 接, 大概分解如下:

combo ? 2.5.1/build/reset-fonts-grids/reset-fonts-grids.css
& 2.5.1/build/base/base-min.css
& 2.5.1/build/assets/skins/sam/skin.css
載入順序也是會造你寫的順序加入,上述就是先 reset -> base -> skin 這樣子載入.(下述 js 亦同)

同樣 Javascript 也有, ex:

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-min.js"></script>

可以整合成:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo/yahoo-min.js&2.5.2/build/dom/dom-min.js&2.5.2/build/event/event-min.js&2.5.2/build/autocomplete/autocomplete-min.js"></script>

再來就隨機應用囉~ :)

YUI 提供的工具: Serving YUI Files from Yahoo! Servers (感謝 ulita 提供)

作者 jon ( Programming ) :: 迴響 (2):: 靜態連結網址

相關標籤

this is comment icon 也可以到這裡 [回覆]