jQuery的發展史

jQuery的發展史，你知道嗎？

天天多學一點知識，就少寫一行代碼
2006年1月，jQuery的第一個版本面世，至今已經有6年多了（注：這個時間點是截止至出書時間）。雖然過了這麼久，但它依然以其簡潔、靈活的編程風格讓人一見鍾情。在本篇文章中，咱們將講述jQuery的發展歷史，讓讀者對jQuery有更多的瞭解。

2005年8月，John Resig提議改進Prototype的「Behaviour」庫，因而他在blog上發表了本身的想法，並用了3個例子作說明。

第一個例子是爲元素註冊一個事件：
Behaviour.register({
'#example li': function(e){
e.onclick = function(){
this.parentNode.removeChild(this);
}
}
});
他認爲應該改寫爲：
$('#example li').bind('click',function(){
this.parentNode.removeChild(this);
});
第二個例子是爲不一樣的元素註冊不一樣的事件：
Behaviour.register({
'b.someclass' : function(e){
e.onclick = function(){
alert(this.innerHTML);
}
},
'#someid u' : function(e){
e.onmouseover = function(){
this.innerHTML = "BLAH!";
}
}
});
他認爲應該改寫爲：
$('b.someclass').bind('click',function(){
alert(this.innerHTML);
});
$('#someid u').bind('mouseover',function(){
this.innerHTML = 'BLAH!';
});
第三個例子是爲不斷變化的元素註冊不一樣的事件：
Behaviour.register({
'#foo ol li': function(a) {
a.title = "List Items!";
a.onclick = function(){ alert('Hello!'); };
},
'#foo ol li.tmp': function(a) {
a.style.color = 'white';
},
'#foo ol li.tmp .foo': function(a) {
a.style.background = 'red';
}
});
他認爲應該改寫爲：
$('#foo ol li')
.set('title','List Items!')
.bind('click',function(){ alert('Hello!'); })
.select('.tmp')
.style('color','white')
.select('.foo')
.style('background','red');
這 些代碼也是jQuery語法的最初雛形。當時John的想法很簡單：他發現這種語法相對現有的JavaScript庫更爲簡潔。但他沒想到的是，這篇文章 一經發布就引發了業界的普遍關注。因而John開始認真思考着這件事情（編寫語法更爲簡潔的JavaScript程序庫），直到2006年1月14 日，John正式宣佈以jQuery的名稱發佈本身的程序庫。隨之而來的是jQuery的快速發展。
2006年8月，jQuery的第一個穩定版本，而且已經支持CSS選擇符、事件處理和AJAX交互。
2007 年7月，jQuery 1.1.3版發佈，此次小版本的變化包含了對jQuery選擇符引擎執行速度的顯著提高。從這個版本開始，jQuery的性能達到了Prototype、 Mootools以及Dojo等同類JavaScript庫的水平。同年9月，jQuery 1.2版發佈，它去掉了對XPath選擇符的支持，緣由是相對於CSS語法它已經變得多餘了。這一版可以對效果進行更爲靈活的定製，並且藉助新增的命名空 間事件，也使插件開發變得更容易。同時，jQuery UI項目也開始啓動，這個新的套件是做爲曾經流行但已過期的Interface插件的替代項目而發佈的。jQuery UI中包含大量預約義好的部件（widget），以及一組用於構建高級元素（例如可拖放、拖拽、排序）的工具。
注意：XPath（XML Path Language，XML路徑語言）是在XML文檔中識別不一樣元素或者元素值的一種語言，與CSS在HTML文檔中識別元素的方式相似。在涉及屬性選擇符時，jQuery使用了XPath中的慣例來標識屬性，即將屬性前置一個@符號並放在一對方括號中。例如，要選擇全部帶title屬性的連接，可使用下面的代碼：
$('a[@title]')
但在jQuery 1.2去掉對XPath選擇符的支持後，這種寫法就不能用了，必須使用以下代碼：
$('a[title]')
在一些老的代碼和插件中這種問題比較常見。
2008 年5月，jQuery 1.2.6版發佈，這版主要是將Brandon Aaron開發的流行的Dimensions插件的功能移植到了核心庫中，同時也修改了許多BUG，並且有很多的性能獲得提升。所以，若是把你之前的 jQuery版本升級到1.2.6，那麼你徹底能夠從你的代碼中排除Dimensions插件。
注意：Dimensions插件是一個得到元素尺寸、定位的插件。
在 jQuery迅速發展的同時，一些大的廠商也看中了商機。2009年9月，微軟和諾基亞公司正式宣佈支持開源的jQuery庫，另外，微軟公司還宣稱他們 將把jQuery做爲Visual Studio工具集的一部分。他將提供包括jQuery的智能提示、代碼片斷、示例文檔編制等內容在內的功能。微軟和諾基亞公司將長期成爲jQuery的 用戶成員，其餘成員還有Google，Intel，IBM，Intuit等公司。
2009年1月，jQuery 1.3版發佈，它使用了全新的選擇符引擎Sizzle，在各個瀏覽器下全面超越其餘同類型JavaScript框架的查詢速度，程序庫的性能也所以有了極 大提高。這一版本的第2個變化就是提供live()方法，使用live()方法能夠爲當前及未來增長的元素綁定事件，在1.3版以前，若是要爲未來增長的 元素綁定事件，須要使用livequery插件，而在1.3版中，能夠直接用live()方法。
注意：Sizzle是jQuery做者John Resig新寫的DOM選擇器引擎。Sizzle有一個重要的特色，它是徹底獨立於jQuery的，若是你不想用jQuery，能夠只用Sizzle。Sizzle下載地址：http://sizzlejs.com/
2010年1月，也是jQuery的四週年生日，jQuery 1.4版發佈，爲了慶祝jQuery四周歲生日，jQuery團隊特別建立了jquery14.com站點，帶來了連續14天的新版本專題介紹。

在 1.3及更早版本中，jQuery經過JavaScript的eval方法來解析json對象。在1.4中，若是你用的瀏覽器支持，則會使用原生的 JSON.parse解析json對象，這樣對json對象的書寫驗證則更爲嚴格。好比：{foo: "bar"}的寫法將不會被驗證爲合法的json對象，必須寫成{"foo":"bar"}。若是你的程序打算升級到1.4版本，那麼這一點要尤爲注意。
2010 年2月，jQuery 1.4.2版發佈，它新增了有關事件委託的兩個方法：delegate()和undelegate()。delegate()用於替代1.3.2中的 live()方法。這個方法比live()來的方便，並且也能夠達到動態添加事件的做用。好比給表格的每一個td綁定hover事件，代碼以下：
//1.4.2
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
//1.3.2
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
2011年1月，jQuery 1.5版發佈。該版本作了以下修改：

• 重寫Ajax模塊

（1）最大的變化是調用jQuery.ajax（或jQuery.get，jQuery.post等）會返回jqXHR的對象，爲不一樣瀏覽器內置的XMLHttpRequest對象提供了一致的超集，能夠完成之前不可能完成的任務，好比：停止JSONP請求。
（2）提供了更高級的統一的API。
（3）更好的擴展性，能夠方便地擴展Ajax的發送與接收，管理Ajax請求。

• 新增延遲對象

開發人員藉此可使用沒法當即得到的返回值（如異步Ajax請求的返回結果），並且第一次可以附加多個事件處理器。
好比，使用新的jQuery Ajax API實現下面的代碼：
// 發出請求，並記住jqxhr對象
var jqxhr = $.ajax({ url: "example.php" })
.success(function() { alert("success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
// 這裏能夠作其它工做 ...
// 完成另外一個功能
jqxhr.complete(function(){ alert("second complete"); });

• jQuery.sub()

能夠方便地建立jQuery副本，不影響原有的jQuery對象，避免jQuery衝突。示例代碼以下：
(function(){
var sub$ = jQuery.sub();
sub$.fn.myCustomMethod = function(){
return 'just for me';
};
sub$(document).ready(function() {
sub$('body').myCustomMethod() ; // 'just for me'
});
})();

alert( typeof jQuery('body').myCustomMethod ); // undefined

• 內部開發系統

jQuery 團隊內部開發系統的兩點改變：一是服務器端用NodeJS替換了老的Java/Rhino系統，使得團隊能夠專一於JavaScript環境的新變化；二 是所用的代碼壓縮優化程序從Google Closure Compiler切換到UglifyJS，新工具的壓縮效果很是使人滿意。
2011年5月，jQuery 1.6版發佈。該版本重寫了Attribute模塊和大量的性能改進。值得注意的是這次更新有2個破壞性的變動，將會影響到現有打算升級到1.6的那些項目。

• 變動1：更新data()方法

在jQuery1.5中，data()方法能夠用來將元素上的數據屬性轉化爲JSON形式的值。JQuery 1.6已經更新了此功能，data()方法獲取的值會以駝峯形式展現，以配合W3C HTML5規範。好比：
//html:
<span data-max-value="15" data-min-value="5"></span>
//js:
$('span').data(); //jQuery 1.5.2輸出：{"max-value":15,"min-value":5}
$('span').data(); //jQuery 1.6 輸出： {"maxValue":15,"minValue":5}

• 變動2：獨立方法處理DOM屬性，以區分DOM的attributes和properties

通常狀況下，attributes表示從文檔中獲取DOM的狀態信息，而properties表示元素的動態狀態信息。好比：
//html:
<input type="text" value="abc">
//js:
$("input:text").attr('value') ; //輸出 abc
$("input:text").prop('value') ; //輸出 abc
若是用戶手動改變文本框的值爲「abcdef」，那麼：
$("input:text").attr('value') ; //輸出 abc
$("input:text").prop('value') ; //輸出 abcdef
一樣，若是網頁中的複選框的代碼以下：
<input type="checkbox" checked />
那麼結果也會有所不一樣：
$(":checkbox").attr('checked'); //輸出''，空字符串
$(":checkbox").prop('checked'); //輸出 true
因此在jQuery 1.6中，若是要判斷複選框是否選中，需在事件處理程序中使用：
$(this).prop("checked")
//或者 $(this).is(":checked")

由 於jQuery 1.6對attr()方法的改變，致使不少使用attr()方法的程序出現問題，必須修改成1.6的語法才能使用，這個不向前兼容的改變引發了開發的強烈 不滿。因而在不到10天的時間裏，jQuery 1.6.1發佈，它調整了attr()方法，使其兼容1.6以前的作法。好比：
$(":checkbox").attr("checked", true);
$("option").attr("selected", true);
$("input").attr("readonly", true);
$("input").attr("disabled", true);
if( $(":checkbox").attr("checked") ) { /* Do something */ }
2011年11月，jQuery 1.7版發佈。該版本作了以下修改：

• 新的事件API：on()和off()

新的on()和off()API統一了jQuery中全部對文檔綁定事件的操做，並且它們也更加簡短。代碼以下：
$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );
其中on()替代了以前版本中的bind()、delegate()和live()；off()替代了unbind()、undelegate()和die()。下面代碼是新舊API調用之間對應的例子：
$('a').bind('click', myHandler); //舊
$('a').on('click', myHandler); //新

$('form').bind('submit', { val: 42 }, fn); //舊
$('form').on('submit', { val: 42 }, fn); //新

$(window).unbind('scroll.myPlugin'); //舊
$(window).off('scroll.myPlugin'); //新

$('.comment').delegate('a.add', 'click', addNew); //舊
$('.comment').on('click', 'a.add', addNew); //新

$('.dialog').undelegate('a', 'click.myDlg'); //舊
$('.dialog').off('click.myDlg', 'a'); //新

$('a').live('click', fn); //舊

$(document).on('click', 'a', fn); //新
$('a').die('click'); //舊

$(document).off('click', 'a'); //新

• 事件委託的性能改進

隨 着頁面大小和複雜度的不斷增加，事件委託變得愈來愈重要。好比Backbone, JavaScript MVC和Sproutcore等應用框架都使用了大量的事件委託。考慮到這一點，jQuery 1.7重構了事件委派，使其更加快速，尤爲是在大多數常見狀況下。圖10-1是1.6.4和1.7版本的性能比較，最終的事件委託和1.6.4相比，節省 了大約一半的時間：

• 更好地支持IE 6/7/8下的HTML 5

任何試圖在IE 6/7/8中使用新的相似於<section>的HTML 5標籤，毫無疑問都會遇到IE 6/7/8沒法解析這些標籤，甚至將這些標籤從文檔中移除的問題。在jQuery 1.7中，爲較舊IE版本中html()一類的方法創建了對HTML 5的支持。這一功能和之前的innerShiv相同，但你仍然須要在你的文檔頭部加入HTML5Shiv（或者Modernizr）以使舊IE版本支持 HTML 5標籤。如須要更多資料，請查看The Story of the HTML5 Shiv（http://paulirish.com/2011/the-history-of-the-html5-shiv/）。

• 更直觀地切換動畫

在jQuery的舊版本中，相似於slideToggle()或fadeToggle()的切換動畫在互相堆放和前一個動畫被stop()終止時沒法正常工做。在1.7版本中這一狀況被修復，動畫系統會記住元素的初始值並在一個切換的動畫被提早終止時重置它們。

• 異步模塊定義(AMD)

jQuery 1.7支持AMD規範，能夠和遵循AMD規範的腳本加載器協做，好比RequireJS或者curl.js。

• jQuery.Deferred

jQuery.Deferred對象除了提供新的進度處理及通知方法以外，同時也新增一個可用來取得目前Deferred狀態的state()方法。Deferred也經過jQuery.Callbacks機制來提供給開發者一個統一的事件處理接口。

• jQuery.isNumeric()

在使用jQuery的過程當中，有時候須要知道一個參數是數值或能夠被成功的轉換爲數值的狀況。因此jQuery開發並公開jQuery.isNumeric()方法。爲它傳遞一個任意類型的參數，它將對應的返回true或false。

• 棄用和刪除的功能

jQuery將開始棄用過期的特性，以使代碼庫更加精簡，同時提升性能。好比live()和die()已在1.7版本中被棄用，這些方法還將繼續有效，但爲了兼容之後的版本不建議使用它們，可使用on()、off()和delegate()之類的代替。
一些非標準的特性在1.7版本中被完全移除了，好比event.layerX和event.layerY，可使用event.originalEvent.layerX和event.originalEvent.layerY代替。

jQuery.isNaN()：這一未公開的實用函數已被刪除，新的jQuery.isNumeric()提供了相似的功能，而且能夠被更好的支持。

jQuery.event.proxy()：這一未公開和過期的方法已被刪除，開發者應使用公開的jQuery.proxy方法代替。
jQuery全部版本的發行說明能夠在官方站點查到，網址爲http://blog.jquery.com/和http://jquery. org/history/。

本文摘自《鋒利的jQuery》(第2版)