Ubuntu 和 Ruby on Rails 中文筆記: 1月 2010

jQuery 1.4正式發佈：一起來看有哪些新變化（上篇）

為慶祝jQuery的四週年生日，jQuery官方團隊正式發佈了jQuery的1.4版本。在這個版本中，jQuery官方團隊做了大量的編碼、測試和文檔工作，相對之前版本自然改進不少，讓我們一起來看看有那些新變化吧。
本文分上下兩篇，上篇主要總體介紹jQuery 1.4版本的相關使用及更新，下篇通過一些代碼示例來展示更新的方法及新添加的方法。
【下載及調用】
像以往一樣，官方提供了jQuery的兩份拷貝，一份是壓縮版本（使用Google Closure Compiler壓縮，之前使用的是YUI），另一份是未壓縮版本（用來調試和閱讀）。

jQuery壓縮版本（23kb，gzip壓縮後）
jQuery未壓縮版本（154kb）

本博之前曾提議過通過google服務器加載jQuery，提高加載速度。現在，我們依然可以通過Google的服務器調用壓縮後的jQuery 1.4版本文件，如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">script>

【新特性及變化】
在jQuery 1.4中，許多常用的jQuery方法被重寫，這些改進不僅更易用，也帶來了性能的顯著提升。
注：以下為概述，不詳之處參見下篇的代碼解釋。

為一些方法添加設置函數（Setter Functions） 在之前版本中，我們可以給attr()方法傳入一個函數，將函數的返回值賦予某個屬性。1.4中，這個功能被添加到了更多的方法中：.css()、.attr()、 .val()、 .html()、 .text()、 .append()、.prepend()、 .before()、.after()、.replaceWith(), .wrap()、 .wrapInner()、 .offset()、 .addClass()、.removeClass()、 .toggleClass()。
此外，在下面方法中，還可以傳入當前值作為設置函數的第二個參數，供設置函數使用：.css()、.attr()、.val()、.html()、.text()、.append()、.prepend()、.offset()、.addClass()、.removeClass()、和 .toggleClass()。例如：
```
jQuery('')
.attr("alt", function(index, value) {
    return "Please, " + value;
});
```
更新了jQuery中序列化的核心方法jQuery.param() 之前對於{foo: ["bar", "baz"]}序列化後的結果是「foo=bar&foo=baz」，現在為「foo[]=bar&foo[]=baz」。
這樣更改的目的主要是告訴接收端，傳入的是一個數組對象。
在jQuery.ajax 中可在不指定dataType屬性時，會根據response的content-type自動識別。
例如：ajax請求返回的對象是json類型（application/json），則dataType會自動指定為」json」（不指定的情況下）。
在jQuery.ajax請求中，添加對Etag的支持。 之前jQuery在ajax請求中是在header中不發送If-None-Match值的（也就是不支持Etag），也就默認忽略了瀏覽器緩存。現在可以通過指定ifModified屬性開啟它。
提示：如果您不瞭解http header的相關知識，推薦閱讀這篇文章。
使用原生的JSON.parse，對json進行嚴格解析 在1.3及更早版本中，jQuery通過javascript的eval方法來解析json對象。在1.4中，如果你用的瀏覽器支持，則會使用原生的JSON.parse進行json對象解析，這樣對json對象的書寫驗證則更為嚴格。如：{foo:「bar」}的寫法將不會被驗證為合法的json 對象，必須寫成{」foo」:「bar」}。如果你的程序打算升級到1.4版本，那麼這一點要尤其注意了。
在使用.serialize() 序列化時，添加對HTML5元素的支持

為ajax請求添加上下文支持，參考jQuery.ajax()

jQuery.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
        jQuery(this).addClass("done");
    }
});

在jQuery.ajax()請求時，接收XMLHttpRequest對象作為success的第三個參數
在ajax請求時，總是設定Content-Type屬性 在1.3版本中，如果ajax發送的數據為空時，則不發送Content-Type屬性值，1.4中則總是顯式設定Content-Type值。這是因為有些程序後端通過Content-Type值判斷如何響應。
當用jsonp方式進行ajax請求時，可以顯式指定callback的名稱 之前jsonp的callback名稱是由jQuery生成的隨機名稱，現在可以通過jsonpCallback參數顯式指定
部分CSS相關方法被重寫。其中，.css()方法效率有兩倍的提升， .addClass()、.removeClass()和.hasClass()效率有三倍的提升。.toggleClass() 方法可以一次切換多個class
```
$("div").toggleClass("current active");
```
在jQuery 1.4中，許多dom操作相關方法在性能上大幅提升 其中.append()、 .prepend()、.before()、和 .after() 的性能被改善，
.html() 的性能提升了近3倍。
.remove() 和 .empty()的性能提升了近4倍。
jQuery(」tag」)效率有所提升 當傳入一個tag名稱進行尋找時，搜索算法有所改進。
使用id開始的選擇器獲取元素的速度進一步提升類似於jQuery(』#id p')這樣以id開始的選擇器獲取元素的速度有所優化，速度是最快的。
jQuery()（或$()）將返回jQuery空對象 在之前當調用jQuery()時，默認返回的是document的jQuery對象，也就是等價於jQuery(』document')。在1.4版本中將不再做這樣的轉換，直接返回jQuery空對象。
在1.4中，之前jQuery().ready()的寫法不建議使用（雖然仍然可以用），應當寫作jQuery(document).ready()或jQuery(function(){})
添加了新事件.focusin()和.focusout() .focusin()和.focusout()方法等價於focus()和blur()方法，不同的是支持事件冒泡。需要注意的是focus()和blur()事件依然不可以通過live()方法綁定。
幾乎所有事件都支持live()綁定 除了ready、focus（用focusin替代）、blur（用focusout替代）事件外的所有事件都支持live綁定
jQuery 1.4對內部結構重新組織，並開始建立代碼風格規範 之前的core.js被劃分為attribute.js, css.js, data.js, manipulation.js, traversing.js和queue.js。ready事件被移至core.js中。
jQuery 1.4開始建立了代碼風格規範，大多數核心代碼符合這一規範。雖然這個規範僅有幾條，但我相信這是一個良好的開端。

【相關測試】
在jQuery 1.4中解決了207個bug（相比之下，1.3解決了97個bug）。
此外，測試用例從1.3.2的1504個增加了1.4版本的3060個。這些測試100%通過當下主流瀏覽器（Safari 3.2,Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera10.10, 和 Chrome）。
【版本兼容性處理】
從上面還是可以看出1.4是做了相當多的更新，為了保證當前版本的向後兼容（也就是希望你之前使用jQuery 1.3版本的程序平穩過渡到1.4版本上），官方特意提供了兼容性腳本補丁，如下使用：

<script src="http://code.jquery.com/jquery.js">script>
     <script src="http://code.jquery.com/jquery.compat-1.3.js">script>

註：以上內容以jQuery官方文檔為依據撰寫而成，更加詳細內容可直接訪問官方說明頁面。

該[指南]版權以及最終解釋權為作者阿里巴巴（中文站）用戶體驗設計部李龍（李小帥）所有，轉載請註明出處。

標準和規範：
1.柵格化：

我們所說的柵格化是指在網頁設計工作中對柵格系統的建立和應用。網頁柵格系統來源於平面柵格系統，它以規則的網格陣列來指導和規範網頁中的版面佈局以及信息分佈。

柵格化可以使信息呈現工整簡潔、美觀易讀，降低頁面開發和運維成本。它結構變化相對靈活，擴展性強。

2.以8px為橫向柵格單位：

以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數，包括圖片和版塊寬度，這樣可以在一定程度上加快頁面（特別是對於J-PEG圖片）的渲染速度（基於計算機內部二進制的運算機制）。其在擴展和兼容性上也有一定優勢。

在阿里巴巴中文站中，佈局間距的最小單位為8px，佈局區塊採用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現的柵格系統：

32px:適用於市場、社區等相關頁面

24px:適用於旺鋪相關頁面

3.頁面定寬：

自適應可以根據瀏覽器顯示情況自動調整頁面寬度，但是因為用戶水平方向的聚焦範圍有限，所以當頁面過寬時，用戶的瀏覽和操作成本會增加；而當頁面過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結果），自適應則會導致佈局變形和內容錯亂。給頁面規定寬度可以避免這些問題。

在綜合考慮當下主流分辨率情況、瀏覽器外觀對顯示空間的佔用、人機工程學中對水平視角和聚焦範圍的規定以及8px單位等多種因素後，我們認為 960px是一個相對更加合理的頁面寬度。在阿里巴巴中文網站中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。

Ubuntu 和 Ruby on Rails 中文筆記

2010年1月22日星期五

ubuntu 9.10 禁用 IPV6

2010年1月20日星期三

jQuery 1.4 的新特性及改變（上篇）

2010年1月13日星期三

如何設計有效的佈局？

網誌存檔

搜尋此網誌

標籤

友站連結