最新微軟Ajax庫(kù)更新 新功能概覽
前日，ASP.NET開(kāi)發(fā)團(tuán)隊(duì)發(fā)布了Microsoft Ajax Library的一個(gè)重大更新版本(第六個(gè)預(yù)覽版)。這個(gè)更新版本包括了我們客戶端AJAX庫(kù)的一堆新的功能和改進(jìn)，可用于ASP.NET的任何一個(gè)版本(包括ASP.NET 2.0, 3.5 和 4.0)，可用于ASP.NET Web Forms 和 ASP.NET MVC項(xiàng)目。今天的發(fā)布包括下述主要改進(jìn)：
- 更好的命令式（Imperative）句法: 用于創(chuàng)建客戶端控件的新的簡(jiǎn)化代碼句法
- 客戶腳本裝載器（Client Script Loader）: 一個(gè)新的客戶端腳本裝載器，可以自動(dòng)地動(dòng)態(tài)裝載客戶端控件或庫(kù)所需的所有JavaScript文件，同時(shí)按正確的順序執(zhí)行腳本。
- 更棒的jQuery集成: 所有的Microsoft Ajax控件現(xiàn)在自動(dòng)呈示為jQuery插件。
除了客戶端腳本庫(kù)改進(jìn)外，今天我們還發(fā)布了一個(gè)新的Microsoft AJAX腳本縮小器（Minifier）工具（免費(fèi)），這個(gè)工具允許你通過(guò)減少JavaScript文件的大小，顯著地改進(jìn)你網(wǎng)站的性能。該工具可以命令行工具的形式運(yùn)行，也發(fā)布有Visual Studio MSBuild任務(wù)，你可以將其與你的VS項(xiàng)目集成，在編譯時(shí)，自動(dòng)地縮小JavaScript文件。
使用Microsoft AJAX庫(kù) (第六個(gè)預(yù)覽版)
使用Microsoft AJAX庫(kù)(第六個(gè)預(yù)覽版)發(fā)布開(kāi)始建造應(yīng)用，有以下兩種方式：
1) 你可以訪問(wèn) ASP.NET CodePlex網(wǎng)站，下載第六個(gè)預(yù)覽版（內(nèi)含一大堆例程）。
2) 或者，你也可以直接使用Microsoft Ajax 內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN)上的Microsoft Ajax庫(kù)腳本， 可以在.aspx 或 .html網(wǎng)頁(yè)中加入下述腳本標(biāo)識(shí)來(lái)做：
- <script src=”http://ajax.microsoft.com/ajax/beta/0910/Start.js” type=”text/javascript”></script>
想了解Microsoft AJAX CDN的話，閱讀一下我上個(gè)月的博客貼子，或者訪問(wèn)http://www.asp.net/ajax/cdn。
該發(fā)布中更好的命令式代碼句法
ASP.NET開(kāi)發(fā)團(tuán)隊(duì)聽(tīng)到了社區(qū)的反饋，在創(chuàng)建客戶端控件時(shí)，許多開(kāi)發(fā)人員更喜歡命令式（imperative）的代碼方式（較之于聲明式的句法方式）。在今天的發(fā)布中，我們引進(jìn)了一個(gè)簡(jiǎn)單的命令式代碼句法來(lái)創(chuàng)建客戶端控件，并與網(wǎng)頁(yè)中的HTML元素進(jìn)行綁定。該句法將得到VS 2008 和 VS 2010中的JavaScript Intellisense的完整支持。
下面是你現(xiàn)在可以編寫的命令式代碼的一個(gè)例子，用編程的手法創(chuàng)建一個(gè)客戶端DataView控件，顯示來(lái)自WCF web服務(wù)的數(shù)據(jù)：
上面的代碼生成一個(gè)新的Microsoft Ajax DataVie控件，將該控件附于一個(gè)id為“imageView”的HTML <div>元素。WCF服務(wù)的URL是由“dataProvider”屬性指定的，服務(wù)上的調(diào)用方法名是由“fetchOperation” 屬性指定的，“autoFetch”屬性表示在控件裝載時(shí)應(yīng)該自動(dòng)與WCF服務(wù)進(jìn)行綁定。
下面是DataView控件所依附的“imageView” HTML <div>元素的標(biāo)識(shí)，該<div>內(nèi)含一個(gè)模板，用于顯示從服務(wù)中獲取的每個(gè)數(shù)據(jù)項(xiàng)（注：模板是我們?cè)贛icrosoft Ajax以前一個(gè)預(yù)覽版本中引入的）：
上面模板中的 {{ Uri }} 和 {{ Name }} 表達(dá)式將為從服務(wù)中獲取的圖片的 Name 和 Uri屬性所替代，<img>元素上的屬性命名空間前綴 “sys:src”是用來(lái)防止瀏覽器試圖在實(shí)際的路徑 {Uri} 上裝載圖片的。 在模板裝載時(shí)，sys:src屬性的值將被插入src屬性中。
該網(wǎng)頁(yè)在瀏覽器中顯示時(shí)，我們將得到象下面這樣的一個(gè)簡(jiǎn)單相片陳列室：
或者，如果你不想在模板中使用聲明式綁定句法的話，你可以把模板修改為象下面這樣的純HTML標(biāo)識(shí)（不含{{ }}表達(dá)式）：
然后在創(chuàng)建DataView控件時(shí)，你可以象下面這樣，連接和指定一個(gè)itemRendered 事件處理函數(shù)：
然后， 你可以使用下面的JavaScript，實(shí)現(xiàn)“imageRendered” 事件處理， 使用 Sys.bind() 方法，用編程的手法 將值賦給模板中的 <img> and <span> 標(biāo)識(shí)：
這允許你將你的模板保持為純HTML標(biāo)識(shí)，而在運(yùn)行時(shí)提供顯示同樣的相片陳列室的體驗(yàn)。
使用Microsoft Ajax 客戶腳本裝載器（Client Script Loader）
Microsoft AJAX客戶端腳本庫(kù)現(xiàn)在分成了多個(gè)JavaScript文件，允許你只下載和使用你實(shí)際需要的那些腳本文件（也減小了下載大?。?。
但手工添加使用Ajax控件所需的所有腳本文件是很枯燥的，而且也容易出錯(cuò)。為方便使用客戶端控件以及單獨(dú)的客戶端腳本庫(kù)組件，我們?cè)诮裉斓陌l(fā)布中引進(jìn)了一個(gè)新的客戶端腳本裝載器（client script loader）。這個(gè)裝載器可以幫你自動(dòng)地裝載一個(gè)控件所需的所有腳本文件，同時(shí)在頁(yè)面裝載時(shí)，按正確的順序執(zhí)行這些腳本。
例如，下面這個(gè)頁(yè)面用了客戶端腳本裝載器裝載“watermark”（水?。┛丶璧乃心_本，然后將watermark控件連接到一個(gè)<input>文本框上：
注意一下上面的Sys.require()方法調(diào)用。在調(diào)用Sys.require()時(shí)，你提供你想裝載的客戶端組件的名稱（或者客戶端組件名稱的數(shù)組）。然后， sys.require()客戶端裝載器就會(huì)自動(dòng)地并行下載所需的所有腳本文件 （允許你的腳本較快地裝載，還允許你避免阻塞頁(yè)面的顯示）。在所要求的組件所需的所有腳本裝載完畢后，Sys.onReady() 就會(huì)被調(diào)用，生成一個(gè)watermark。
在上面，我們將“watermark”控件綁定到了一個(gè)id為 “name”的 <input> 文本框。在運(yùn)行時(shí)，watermark 控件會(huì)導(dǎo)致文本框有一個(gè)watermark（水?。ㄔ谟脩魧⒐鈽?biāo)設(shè)置到文本框，開(kāi)始鍵入文字時(shí)會(huì)自動(dòng)消失）：
客戶端腳本裝載器支持許多高級(jí)的功能，包括自動(dòng)腳本合并和懶式裝載，還能聰明地決定下載腳本庫(kù)的調(diào)試或者正式版本。還允許你通過(guò)使用Sys.require()句法，注冊(cè)自己的腳本庫(kù)，自動(dòng)地裝載它們。
將Microsoft Ajax 腳本庫(kù)控件與jQuery結(jié)合使用
Microsoft將jQuery作為ASP.NET MVC框架的一個(gè)標(biāo)準(zhǔn)組件發(fā)布，還將在Visual Studio 2010中，將其默認(rèn)加入新創(chuàng)建的ASP.NET Web Forms項(xiàng)目中。
在今天的預(yù)覽版中，我們將方便 jQuery 和 Microsoft Ajax 控件的集成，允許使用jQuery的開(kāi)發(fā)人員通過(guò)熟悉的 jQuery 插件 API句法來(lái)使用Microsoft Ajax控件。特別地，我們現(xiàn)在將把所有的Microsoft Ajax控件自動(dòng)地呈示為 jQuery 插件。也就是說(shuō)，在你往網(wǎng)頁(yè)上加jQuery時(shí)，你可以象使用jQuery插件那樣使用Microsoft Ajax控件。
例如，下面的腳本示范了如何使用jQuery來(lái)創(chuàng)建一個(gè)DataView以顯示來(lái)自WCF服務(wù)的數(shù)據(jù)（使用了jQuery插件那樣的代碼句法）：
注意上面，我是通過(guò)調(diào)用Sys.require()客戶端裝載器API來(lái)裝載jQuery的。你可以使用新的客戶端腳本裝載器來(lái)裝載jQuery，或者，你也可以使用標(biāo)準(zhǔn)的 <script>標(biāo)識(shí)來(lái)將jQuery腳本庫(kù)包含在頁(yè)面中。
在jQuery加到頁(yè)面中后，Microsoft Ajax腳本庫(kù)控件自動(dòng)呈示為jQuery插件。這意味著，你可以使用標(biāo)準(zhǔn)的jQuery插件句法來(lái)創(chuàng)建和依附Microsoft Ajax控件（就象上面那樣），并與jQuery的選擇器（selector）句法完美集成。
使用Microsoft Ajax Minifier減小JavaScript文件大小
大家用來(lái)減小JavaScript文件下載大小的常見(jiàn)的方式有2種： 壓縮（compression）和縮小（minification）。
在Windows服務(wù)器上使用IIS 7.0來(lái)宿主你的網(wǎng)站時(shí)，你可以配置IIS來(lái)自動(dòng)地使用GZIP壓縮算法來(lái)壓縮你的JavaScript文件，這在性能和文件的下載大小方面提供顯著的改進(jìn)。但是，你可以同時(shí)通過(guò)壓縮和縮?。╩inifying）你的JavaScript文件來(lái)得到附加的性能好處。Steve Sounders在他的優(yōu)秀圖書《High Performance Web Sites》中描述了這些附加好處。
除了發(fā)布MMicrosoft Ajax 腳本庫(kù) (第六個(gè)預(yù)覽版)外，今天我們還發(fā)布了一個(gè)新的免費(fèi)Microsoft Ajax Minifier工具，該工具可以幫你顯著減小你的JavaScript文件的大小。該工具是由MSN開(kāi)發(fā)團(tuán)隊(duì)的Ron Logon創(chuàng)建的，你可以在ASP.NET CodePlex網(wǎng)站上免費(fèi)下載Microsoft Ajax Minifier。
下面的屏幕截圖示范了使用諸如Douglas Crockford 的 JSMin, Dean Edward 的 Packer, 和 YUI Compressor 對(duì)標(biāo)準(zhǔn)的jQuery腳本庫(kù)進(jìn)行縮小后的結(jié)果。最下面的2個(gè)文件是用了Microsoft Ajax Minifier工具縮小后的。注意，Microsoft Ajax Minifier把jQuery的大小從125 KB 減小到了只有 53 KB之大。
Microsoft Ajax Minifier支持2個(gè)級(jí)別的縮?。撼Ｒ?guī)級(jí)，以及超級(jí)壓扁（hypercrunched）級(jí)。在使用常規(guī)級(jí)縮小時(shí)，Microsoft Ajax Minifier除去所有不必要的空白，注釋，花括號(hào)和分號(hào)。在啟用超級(jí)壓扁（hypercrunched）級(jí)時(shí)，Microsoft Ajax Minifier會(huì)全力減小JavaScript文件大小，它會(huì)縮小局部變量名稱，除去調(diào)用不到（unreachable）的代碼。
下面是一個(gè)JavaScript文件例子：
下面是用Microsoft Ajax Minifier(啟用了超級(jí)壓扁級(jí)別)縮小后的JavaScript文件：
注意，所有不必要的空白都被除去了，還注意，函數(shù)的參數(shù)firstValue和 secondValue 被重新命名為b 和 a了。
Microsoft Ajax Minifier下載包含了下述組件：
- ajaxmin.exe – 縮小JavaScript文件的命令行工具
- ajaxmintask.dll – 在Visual Studio項(xiàng)目中縮小JavaScript文件的MSBuild任務(wù)
- ajaxmin.dll – 可用在C# 或 VB.NET 應(yīng)用中縮小JavaScript文件的組件
在安裝Microsoft Ajax Minifier之后，你可以使用Microsoft Ajax Minifier命令行工具在控制臺(tái)命令行上縮小JavaScript文件。
你也可以選擇將Microsoft Ajax Minifier作為一個(gè)自定義的MSBuild任務(wù)加到 Visual Studio中去。將該MSBuild任務(wù)加到你的Visual Studio項(xiàng)目文件中去，允許你在任何時(shí)候編譯時(shí)，自動(dòng)地縮小所有的JavaScript文件，允許你以自動(dòng)化的方式進(jìn)行縮小操作。
結(jié)束語(yǔ)
今天的Microsoft Ajax腳本庫(kù)發(fā)布給客戶端開(kāi)發(fā)人員帶來(lái)了若干個(gè)令人興奮的新功能。新的簡(jiǎn)化命令式句法應(yīng)該對(duì)JavaScript開(kāi)發(fā)人員有吸引力。客戶端腳本裝載器極大地方便了客戶端控件的創(chuàng)建和文件下載的優(yōu)化。另外，jQuery集成也允許使用jQuery的開(kāi)發(fā)人員來(lái)利用Microsoft Ajax腳本庫(kù)的客戶端控件，模板化和數(shù)據(jù)訪問(wèn)功能，而不必改變他們的編程風(fēng)格。
最后，新的Microsoft Ajax Minifier也允許你通過(guò)減小JavaScrip文件的大小來(lái)顯著地改進(jìn)你的Ajax應(yīng)用的性能。你可以在命令行上使用該工具，或者在Visual Studio中編譯項(xiàng)目時(shí)使用。
閱讀Bertrand Le Roy關(guān)于第六個(gè)預(yù)覽版的博客貼子，更多地了解今天的發(fā)布的詳情。 點(diǎn)擊這里下載 Microsoft Ajax 腳本庫(kù) (第六個(gè)預(yù)覽版) 和新的 Microsoft Ajax Minifier。
希望本文對(duì)你有所幫助，
Scott
【編輯推薦】
