POSTS

jQuery 1.4 研究與報導 之個人見解（一）

本文皆為個人見解如有錯誤,煩請賜教.
jQuery 1.4 於2010/01/14 釋出.
官方同時間開啟一個活動專欄頁面報導 14 Days of jQuery.
In celebration of jQuery’s 4th birthday, the jQuery team is pleased to release the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone into this release, and we’re really quite proud of it.

I want to personally thank Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Katić, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint who put a lot of work into fixing bugs and getting the release out the door.
文中開頭就敘述了.1.4的釋出跟jQuery的生日是同一天（蠻有意義的）.並且更新了官網說明文件.

Downloading

這次官方使用Google Closure Compiler 來做壓縮.

還有再google提供的cdn

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

詳細說明請看官方圖表

Easy Setter Functions

其中<a href="http://api.jquery.com/css">css()</a>, <a href="http://api.jquery.com/attr">.attr()</a>, <a href="http://api.jquery.com/val">.val()</a>, <a href="http://api.jquery.com/html">.html()</a>, <a href="http://api.jquery.com/text">.text()</a>, <a href="http://api.jquery.com/append">.append()</a>, <a href="http://api.jquery.com/prepend">.prepend()</a>, <a href="http://api.jquery.com/before">.before()</a>, <a href="http://api.jquery.com/after">.after()</a>, <a href="http://api.jquery.com/replaceWith">.replaceWith()</a>, <a href="http://api.jquery.com/wrap">.wrap()</a>, <a href="http://api.jquery.com/wrapInner">.wrapInner()</a>, <a href="http://api.jquery.com/offset">.offset()</a>, <a href="http://api.jquery.com/addClass">.addClass()</a>, <a href="http://api.jquery.com/removeClass">.removeClass()</a>, <a href="http://api.jquery.com/toggleClass">.toggleClass()</a>.
可以像<a href="http://api.jquery.com/attr">.attr()</a>的用法 .attr( attributeName, function(index, attr) ). 做可傳入函數,由函數的傳回值當作參數值.

<a href="http://api.jquery.com/css">.css()</a>, <a href="http://api.jquery.com/attr">.attr()</a>, <a href="http://api.jquery.com/val">.val()</a>, <a href="http://api.jquery.com/html">.html()</a>, <a href="http://api.jquery.com/text">.text()</a>, <a href="http://api.jquery.com/append">.append()</a>, <a href="http://api.jquery.com/prepend">.prepend()</a>, <a href="http://api.jquery.com/offset">.offset()</a>, <a href="http://api.jquery.com/addClass">.addClass()</a>, <a href="http://api.jquery.com/removeClass">.removeClass()</a>, and <a href="http://api.jquery.com/toggleClass">.toggleClass()</a>. 則更神哩.

新用法

// find all ampersands in A's and wrap with a span
$('a').html(function(i,html){
  return html.replace(/&/gi,'&');
});

// Add some information to the title of the anchors
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

舊的要做上上訴功能

// find all ampersands in A's and wrap with a span
$("a”).each(function(i) {
    var $a = $(this);
    var str = text.replace(/&/gi,'&');
    $a.html(str);
});

// Add some information to the title of the anchors
$("a”).each(function(i) {
    var $a = $(this);
    var str = $a.attr("title");
    var title = str + " (Opens in External Window)";
    $a.attr("title",title);
});

Ajax 的變更

在 jQuery 1.3中ajax參數使用 {foo: ["bar", "baz"]} 所帶出的字串 “foo=bar&foo=baz”.
而 jQuery 1.4則為“foo[]=bar&foo[]=baz”.
如果不喜歡 可以使用全域的變數使他關閉或啟用.
使用方式

// Enables for all serialization
jQuery.ajaxSettings.traditional = true;

// Enables for a single serialization
jQuery.param( stuff, true );

// Enables for a single Ajax requeset
$.ajax({ data: stuff, traditional: true });

更多資訊請參考: jQuery.param() Documentation, jQuery.ajax() Documentation, Commit, Code

JSON and script types auto-detected by content-type

只要是Ajax請求回應的ContentType為 applcation/json 怎此回應視為”json”類型.

如為type (text/javascript or application/x-javascript) 預設視為“script”類型,(並且只要不是特別設定類型)會直接執行回傳script內容.這改變都是ajax速度改變的主因.

Etag support has been added

目前支援新的快取識別方式,不需要像以前在丟個奇怪無趣的參數.
Etag 目前需配合瀏覽器,與伺服端的支援方可使用.(apache2 預設是沒有啟用的)

Strict JSON parsing, using native JSON.parse

jQuery 1.3 還有更早以前版本使用 JavaScript’s eval 去還原取的的JSON內容. jQuery 1.4 使用原生型 JSON 處理. 如果為異常的資料 (如  {foo: "bar"}) 將被 jQuery 的 jQuery.getJSON 所拒絕.

Serialize HTML5 elements

新的 HTML5 input types (如 `datetime` and `range`)表格元件, 將包含到 <a href="http://api.jquery.com/serialize">.serialize()</a> .

Context for Ajax Request

現在可以對單一的目標做Ajax請求並指定請求成功後所要執行的功能,且只要在依次指定宣告完成即可.

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

Success callback receives XHR object as third argument

Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.（這段我看不懂）

Explicitly set a content-type

在以前  jQuery 1.3 contentType 並沒有被明確被定義  jQuery.ajax 即使在沒有送出也是. 但 jQuery 1.4, contentType將會送出. 這改變都是ajax速度改變的主因.

Explicitly specify a JSONP callback name

新版可以指定JSONP的callback函數名稱了

Avoid pre-flighting cross-domain XHR

支援 (部分)跨往域的ajax請求.
jQuery.ajax() is now using onreadystatechange instead of a timer
jQuery.ajax() 現在使用一種請求xhr.onreadystatechange 以時間做觸發.（可以參考）

The performance of .css() and .attr() has been improved.
.css() .attr() 做了很大的效能躍進.請看官網的圖表

Quick Element Construction

jQuery 1.4 現在可使用結構化用法去建構！！（這是我認為最棒的地方）
可以一次定義完！！

jQuery("





  ", {
      id: "foo",
      css: {
          height: "50px",
          width: "50px",
          color: "blue",
          backgroundColor: "#ccc"
      },
      click: function() {
         $(this).css("backgroundColor", "red");
      }
  }).appendTo("body");

.eq(-N), .get(-N)
這是新的元件,在取的的特定的物件更方便.（不用再那一直next之類的）
New .first() and .last() methods
.first() 等同於.eq(0) .
.last() 等同於.eq(-1).

comments powered by Disqus