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 提供)