IE 8 Beta 1 出來(lái)好久了，由于對(duì)IE7的使用仍然心有余悸（之前曾裝了IE7又馬上轉(zhuǎn)向了Firefox陣營(yíng)），我這次IE8的安裝仍然忐忑不安。無(wú)奈經(jīng)常需要使用代理瀏覽，而不知怎么搞的使用Firefox的about:config配置了N多遍了怎么也配置不好，每當(dāng)別人嘲笑我說(shuō)怎么還用老古董的IE6時(shí)，我就無(wú)可奈何。。。今天也要嘗嘗鮮了！

不看不知道，發(fā)現(xiàn)IE8的功能非常強(qiáng)大，其中最為耀眼的便是其強(qiáng)大的代碼調(diào)試工具，同F(xiàn)irebug的距離又縮小了一大步。除此之外，IE8還有兩個(gè)令人眼睛一亮的功能：WebCast和Activity(為方便嘗試，本文采用http://ie8.taobao.com/list.php作為示例，這是淘寶針對(duì)IE8New Features 提供的Preview 頁(yè)面，支持Web Cast和Activity。)。

1. Developer Tools

Developer Tools 提供了三個(gè)Tab, HTML\CSS\Script，其中，HTML Tab顯示DOM樹(shù)，CSS Tab顯示CSS樣式表，Script Tab會(huì)提供頁(yè)面源代碼，并方便我們對(duì)JavaScript的調(diào)試。有人說(shuō)：這有什么稀奇的呢？先別急，我們先看看Debug的功能：

當(dāng)我們點(diǎn)擊了"Start Debugging"的按鈕后，就可以設(shè)置在Javascript腳本中設(shè)置斷點(diǎn)了，這令在IE中調(diào)試動(dòng)態(tài)語(yǔ)言的夢(mèng)想變成了現(xiàn)實(shí)。然后可以在右側(cè)的窗口中查看系統(tǒng)中Local變量當(dāng)前的值。同其他程序語(yǔ)言的調(diào)試工具一樣，可以Step into, Step over, 查看調(diào)用棧以及添加查看的變量等。另外，Developer Tools還提供了Immediate Window允許開(kāi)發(fā)者在當(dāng)前的上下文環(huán)境中撰寫(xiě)Script代碼并立即顯示結(jié)果。

更為神奇的是HTML Tab。HTML Tab除顯示DOM樹(shù)之外，在其右側(cè)窗口還會(huì)根據(jù)選擇的DOM節(jié)點(diǎn)，顯示每個(gè)標(biāo)簽使用的CSS樣式表，當(dāng)前標(biāo)簽的Layout模型，每個(gè)樣式繼承自何處，都可以非常直觀的看到。而且，當(dāng)我們想知道去掉某個(gè)CSS樣式后的網(wǎng)頁(yè)效果時(shí)，只需要將CSS表中相應(yīng)項(xiàng)的check去掉，就可以立即在原始網(wǎng)頁(yè)中觀察到效果！

除此以外，Developer Tools提供了View和OutLine兩個(gè)Menu，OutLine菜單提供了對(duì)不同的HTML元素的高亮顯示（同F(xiàn)ireFox提供的功能類(lèi)似），而View菜單對(duì)于網(wǎng)站設(shè)計(jì)者非常有用，提供了"IE5”,"IE7","IE8"3種不同的模式預(yù)覽頁(yè)面。開(kāi)發(fā)者可以快速的檢測(cè)頁(yè)面的IE兼容性。（唉，如果IE或Firefox能夠提供對(duì)對(duì)方產(chǎn)品的兼容性就更好了。。。不過(guò)應(yīng)該是遙遙無(wú)期的事情）

2. Web Cast
在淘寶的這個(gè)頁(yè)面中，當(dāng)鼠標(biāo)移動(dòng)到列表中的商品時(shí)，在左上方會(huì)出現(xiàn)一個(gè)小圖標(biāo) ，該小圖標(biāo)提示使用者可以將此條目加入Web剪輯中。鼠標(biāo)選擇該條目，會(huì)彈出Web Slice的提醒頁(yè)面，選擇“Add”之后，在IE中便可以在Favorites中看到該Web Slice的導(dǎo)航標(biāo)簽了。單擊該標(biāo)簽，便可以看到商品的信息。

這是怎么做到的呢？我們使用Developer Tools來(lái)查看一下HTML代碼，發(fā)現(xiàn)所有的商品表格中都有類(lèi)似這樣的屬性：

<tr class="hslice" id="item_5">
    <td width="20%" valign="middle" align="center" height="90" class="entry-content">
        <img src="http://img08.taobaocdn.com/bao/uploaded/i8/T1n8RbXb0n_QxtXcfX_114424.jpg_sum.jpg" border="0" title="裝飾畫(huà)/無(wú)框畫(huà)/客廳/ 手繪油畫(huà)/版畫(huà)//客廳/ 0705DM1314" /></td>
    <td width="60%" height="90" class="entry-title">
        <a target="_blank" href="http://auction1.taobao.com/auction/0/item_detail-0db2-ccabd3de2b21ee9744c062589e5be157.jhtml">裝飾畫(huà)/無(wú)框畫(huà)/客廳/ 手繪油畫(huà)/版畫(huà)//客廳/ 0705DM1314</a>
    </td>
    <td width="20%" height="90" align="center" class="entry-content">
        一口價(jià)
        <span class="price"><sup style="color:#111;">￥</sup>59.00</span>
        <a style="display:none;" rel="feedurl" href="webslice/feed.php?itemID=ccabd3de2b21ee9744c062589e5be157&xID=0db2">訂閱到 WebSlice</a> 
    </td>
</tr>

支持Web Slice Support的關(guān)鍵的屬性為'class="hslice"', 'class='entry-content"'，class='entry-title'。WebSlice 使用 hAtom Microformat 和 WebSlice 格式的組合來(lái)描述 Web 頁(yè)面的可預(yù)訂部分。訂閱WebSlice后，WebSlice標(biāo)簽顯示的標(biāo)題為entry-title中注明的標(biāo)題，在該例中，預(yù)覽后顯示的內(nèi)容為entry-content鏈接的feed中最新的內(nèi)容。請(qǐng)注意：Web Slice會(huì)自動(dòng)更新?tīng)顟B(tài)。比如，拍賣(mài)的商品剩余時(shí)間會(huì)由于點(diǎn)擊Web Slice的時(shí)間不同而自動(dòng)更新。

3. Activities

在以前，我們使用復(fù)制和粘貼技術(shù)將一個(gè)網(wǎng)站有用的信息復(fù)制到另外一個(gè)網(wǎng)站。

比如，我們?cè)诰W(wǎng)上看到了一個(gè)朋友的聯(lián)系地址，想要使用Google Map的服務(wù)，我們的做法是這樣：復(fù)制這個(gè)地址，打開(kāi)google map，然后粘貼該地址用于檢索。當(dāng)我們想要再次進(jìn)行查找時(shí)，又要重復(fù)一遍這樣的過(guò)程。

再比如，我們?cè)诰W(wǎng)上看到了一個(gè)QQ號(hào)，想要了解該QQ號(hào)的主人的相關(guān)信息。那么我們需要首先打開(kāi)QQ，然后查找QQ用戶，輸入QQ號(hào)碼，得到搜索結(jié)果之后才能查看用戶信息。。。

IE 8的Activities特性使用戶不再如此繁瑣。如果服務(wù)提供商能夠遵循“OpenService 活動(dòng)”XML格式來(lái)指定HTTP請(qǐng)求的格式，并且在網(wǎng)站中加入活動(dòng)安裝按鈕，則不需要用戶訪問(wèn)相應(yīng)的網(wǎng)站，便可以使用服務(wù)了。

在淘寶IE8的頁(yè)面中，選擇右側(cè)的安裝Taobao Activity按鈕，安裝淘寶商品搜索Activity。然后，當(dāng)選中某些相關(guān)的內(nèi)容后，會(huì)出現(xiàn)Activity浮動(dòng)Toolbar，選擇該浮動(dòng)Toolbar，下拉列表中將出現(xiàn)所有可用的服務(wù)。將鼠標(biāo)移到“淘寶搜索”Item上，將會(huì)自動(dòng)彈出前12個(gè)搜索結(jié)果的圖片。可以直接點(diǎn)擊圖片以查看內(nèi)容。

這是怎么實(shí)現(xiàn)的呢？同樣非常簡(jiǎn)單。只要在原來(lái)已有服務(wù)的基礎(chǔ)上，按照OpenService 活動(dòng)XML格式來(lái)描述服務(wù)，并提供發(fā)布活動(dòng)的方法就可以了。下面為淘寶的Open Service Definition代碼：

<?xml version="1.0" encoding="UTF-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <homepageUrl>http://www.taobao.com</homepageUrl>
    <display>
        <name>淘寶搜索</name>
        <icon>http://www.taobao.com/favicon.ico</icon>
    </display>
    <activity category="查找">
        <activityAction context="selection">
            <preview action="http://ie8.taobao.com/activities/preview.php?query={selection}" />
            <execute method="get" action="http://ie8.taobao.com/list.php?query={selection}" />
        </activityAction>
    </activity>
</openServiceDescription>

如果要發(fā)布活動(dòng)，需要運(yùn)行如下javascript代碼：window.external.addService('<path> /GetMap.xml');
淘寶是通過(guò)如下方法加入的：

<!--HTML TAG-->
<button type="button" onclick="addActivity();">安裝 Taobao Activity</button>
 

IE8當(dāng)前已經(jīng)支持的有下面這些活動(dòng)服務(wù)（你可以很容易的用上面的方式添加自己的活動(dòng)服務(wù)）：
map：Windows Live Map、Google Maps、Yahoo!Maps、Mapquest
blog：Windows Live Spaces、Windows Live Writer、Blogger
define：Encarta、Wikipedia、Dictionary.com
add：Del.icio.us、Reddit、Google Reader
translate：Windows Live Translation、Babelfish、Google Translation
IE8中還提供了活動(dòng)本地化的方法，可以根據(jù)用戶的地域來(lái)提供不同內(nèi)容的活動(dòng)。
可從這個(gè)網(wǎng)站查看現(xiàn)有IE8支持的中文頂級(jí)活動(dòng)：http://ie.microsoft.com/activities/zh-chs/default.aspx
該網(wǎng)站為IE8支持的英文頂級(jí)活動(dòng)：http://ie.microsoft.com/activities/default.aspx

后記

IE8 Beta2在8月份就要出來(lái)了，不知會(huì)有什么更新更Shining的特性。但無(wú)論如何，從IE8 Beta1來(lái)看，IE8的整體設(shè)計(jì)中，對(duì)用戶、代碼開(kāi)發(fā)人員以及服務(wù)提供商都提供了更為強(qiáng)大的支持，有理由期待IE8能走的更遠(yuǎn)。我們不希望一家公司壟斷某個(gè)產(chǎn)品，我們希望的是，在互相的競(jìng)爭(zhēng)中，能夠最終給使用者帶來(lái)更多的愉悅，實(shí)現(xiàn)軟件本應(yīng)實(shí)現(xiàn)的價(jià)值。