由于是源自筆記，對(duì)每個(gè)條目我只會(huì)列出稱(chēng)呼和語(yǔ)法特征，暫時(shí)沒(méi)時(shí)間寫(xiě)詳細(xì)的解釋和可執(zhí)行的示例，但是會(huì)給出相關(guān)的文檔地址，除了列出已經(jīng)支持該特性的瀏覽器，也會(huì)為不支持的瀏覽器提供替代/過(guò)渡的實(shí)現(xiàn)。好罷這篇本來(lái)是我私下做的筆記，我特別喜歡在Evernote上做備忘的筆記，雖然上次看到漏屋老師的文章里說(shuō)我現(xiàn)在的年齡才剛剛進(jìn)入記憶力的巔峰期……但是我的自信心仍然屢受打擊！比如跟別人討論The Dark Knight里小丑在醫(yī)院對(duì)檢察官說(shuō)了什么讓他變成雙面人，我一句對(duì)白都想不起來(lái)，還有big bang theory s2里penny玩age of conan時(shí)的人物名字是”Queen Penelope”，我看的時(shí)候印象很深，一個(gè)月后就連奧德賽都想不起來(lái)了。留份筆記總覺(jué)得心里踏實(shí)些……啊又跑題了
本文整理了一些最重要（或者說(shuō)人氣比較高罷）的新標(biāo)準(zhǔn)，雖然它們多數(shù)還只是w3c的草案，離Recommendation級(jí)別還早，卻已經(jīng)成為新一輪瀏覽器大戰(zhàn)中備受追捧的明星，開(kāi)發(fā)者社區(qū)里也涌現(xiàn)出大量相關(guān)的demo和API封裝，有些已經(jīng)進(jìn)入生產(chǎn)環(huán)境（比如google在iphone上實(shí)現(xiàn)的gmail離線(xiàn)應(yīng)用），其實(shí)我覺(jué)得如今的web領(lǐng)域里，從廠商私有技術(shù)轉(zhuǎn)換成委員會(huì)標(biāo)準(zhǔn)再轉(zhuǎn)換成通用技術(shù)產(chǎn)生殺手級(jí)應(yīng)用的周期已經(jīng)顯著的加速了，是因?yàn)楝F(xiàn)在web application的需求太高了么…… UPDATE：剛才在solidot發(fā)軟文的時(shí)候我突然想明白怎么表述這個(gè)問(wèn)題：其實(shí)現(xiàn)在很多瀏覽器廠商同時(shí)也是基于瀏覽器的應(yīng)用開(kāi)發(fā)者和web標(biāo)準(zhǔn)的制定者，就好像修筑舞臺(tái)的工程師同時(shí)也是舞臺(tái)上的演員和舞蹈動(dòng)作的導(dǎo)演一樣，所以google, mozilla, apple們都在不遺余力的實(shí)現(xiàn)那些有利于開(kāi)發(fā)web應(yīng)用的技術(shù)標(biāo)準(zhǔn)，即時(shí)它們還是W3C Working Draft，相比之下IE team就比較缺乏動(dòng)力，果然計(jì)劃經(jīng)濟(jì)缺乏活力亞XD……
由于是源自筆記，對(duì)每個(gè)條目我只會(huì)列出稱(chēng)呼和語(yǔ)法特征，暫時(shí)沒(méi)時(shí)間寫(xiě)詳細(xì)的解釋和可執(zhí)行的示例，但是會(huì)給出相關(guān)的文檔地址，除了列出已經(jīng)支持該特性的瀏覽器，也會(huì)為不支持的瀏覽器提供替代/過(guò)渡的實(shí)現(xiàn)。
===================廢話(huà)結(jié)束的分割線(xiàn)=======================
CSS3 Media queries
對(duì)整個(gè)外鏈css文件和部分css代碼使用的媒體類(lèi)型偵測(cè)，人氣高的原因顯然是因?yàn)橐苿?dòng)設(shè)備……
- <link media=“all and (orientation:portrait)” src="screen.css" type="text/css">
- @media all and (min-color: 4) { ... }
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-mediaqueries/
MDC文檔：https://developer.mozilla.org/En/CSS/Media_queries
Opera文檔：http://www.opera.com/docs/specs/css/
支持：Firefox 3.5+, Safari 3+, Opera 7+
CSS3 2D Transforms
css變形，有人用這個(gè)實(shí)現(xiàn)偽3d效果以及旋轉(zhuǎn)效果的jquery插件
- -moz-transform: rotate(-45deg) skew(15deg, 15deg);
- sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-2d-transforms/
MDC文檔：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介紹: http://webkit.org/blog/130/css-transforms/
支持：Firefox 3.5+, Safari 3.1+
替代/過(guò)渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx
CSS3 Transitions and CSS Animations
備受期待的css動(dòng)畫(huà)，webkit團(tuán)隊(duì)提出的草案，transition實(shí)現(xiàn)簡(jiǎn)單的屬性漸變，animation定義更復(fù)雜的動(dòng)畫(huà)效果
- transition-property: width;
- transition-duration: 1s;
-
- animation-name: 'diagonal-slide';
- animation-duration: 5s;
- animation-iteration-count: 10;
- @keyframes 'diagonal-slide' {}
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-transitions/
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-animations/
webkit博客的介紹：http://webkit.org/blog/138/css-animation/
約翰同學(xué)的介紹：http://ejohn.org/blog/css-animations-and-javascript/
支持：Safari 3.1+
CSS3 Downloadable fonts
能在網(wǎng)頁(yè)里嵌入任意字體是設(shè)計(jì)師的夢(mèng)想……不過(guò)這里支持的也僅限truetype和opentype
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文檔：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文檔：https://developer.mozilla.org/en/CSS/@font-face
支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+
附贈(zèng)：其他CSS3 property的兼容性
ppk同學(xué)維護(hù)的文檔: http://www.quirksmode.org/css/contents.html
css3.info維護(hù)的文檔：http://www.css3.info/modules/selector-compat/
一個(gè)測(cè)試頁(yè)面：http://westciv.com/iphonetests/
HTML5 DOM Storage
簡(jiǎn)潔的持久存儲(chǔ)，鍵值對(duì)的形式
- window.localStorage
- window.sessionStorage //可跨域，標(biāo)簽頁(yè)關(guān)掉就清空
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/webstorage/
ppk同學(xué)維護(hù)的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文檔：https://developer.mozilla.org/en/DOM/Storage
MSDN文檔：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
支持：Firefox 3.5+, Safari 4.0+, IE 8.0+
HTML5 Offline Application Cache
用一個(gè)manifest文件緩存靜態(tài)資源（圖片,css, js之類(lèi)）在離線(xiàn)狀態(tài)下使用，不是結(jié)構(gòu)化數(shù)據(jù)
- <html manifest="foo.manifest">
- CACHE MANIFEST
- index.html
- style/default.css
- images/logo.png
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/offline-webapps/#offline
MDC文檔：https://developer.mozilla.org/en/Offline_resources_in_Firefox
支持：Firefox 3.5+
HTML5 Database Storage
本地?cái)?shù)據(jù)庫(kù)，支持sql，最早是google gears實(shí)現(xiàn)，現(xiàn)在的w3c草案的編輯也是google的工程師……但奇怪的是，gears的api跟現(xiàn)在的草案不兼容，chrome甚至為了保留捆綁的gears的數(shù)據(jù)庫(kù)api而刪除了webkit實(shí)現(xiàn)的html5 api……而google在iphone上實(shí)現(xiàn)gmail離線(xiàn)功能的時(shí)候又采用webkit的api……真糾結(jié)……
- var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
- db.transaction(function(tx) {
- tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
- });
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介紹：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文檔：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1
支持：Safari 3.1+
替代/過(guò)渡：Gears http://code.google.com/p/gears/wiki/Database2API
HTML5 Web Workers
多線(xiàn)程，在后臺(tái)執(zhí)行復(fù)雜運(yùn)算，不能操作dom，線(xiàn)程之間通過(guò)消息事件通信
- var myWorker = new Worker('my_worker.js');
- myWorker.onmessage = function(event) { event.data };
- myWorker.postMessage(str);
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/workers/
MDC文檔：https://developer.mozilla.org/En/Using_web_workers
支持：Firefox 3.5+
替代/過(guò)渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal
HTML5 Geolocation
地理api
- window.navigator.geolocation
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/geolocation-API/
MDC文檔：https://developer.mozilla.org/En/Using_geolocation
支持：Firefox 3.5+
替代/過(guò)渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI
HTML5 Drag and Drop
原生拖拽事件
- ondragstart
- ondrag
- ondragend
- //拖拽過(guò)程中
- ondragenter
- ondragover
- ondragleave
- ondrop
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/html5/editing.html#dnd
MDC文檔：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文檔：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233
支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+
HTML5 Audio and Video
用html標(biāo)簽來(lái)嵌入視頻音頻的好處并非是“開(kāi)源格式”，而是“開(kāi)放性”，讓多媒體可以與其他頁(yè)面元素交互，或者用頁(yè)面技術(shù)去跟視頻“mashup”，這種隨意組合和交互的能力是web技術(shù)興盛的基石，也是像flash這類(lèi)封閉RIA容器最大的缺點(diǎn)。
- <video controls>
- <source src=“zombie.ogg” type=“video/ogg”/>
- <source src=“zombie.mp4″ type=“video/mp4″/>
- </video>
MDC文檔：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介紹：http://webkit.org/blog/140/html5-media-support/
支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/過(guò)渡：用video標(biāo)簽嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/
HTML5 Canvas
apple發(fā)明，最早應(yīng)用于dashboard，目前主流的js圖像技術(shù)，mozilla已經(jīng)在實(shí)現(xiàn)OpenGL ES標(biāo)準(zhǔn)的Canvas 3D了，另外據(jù)說(shuō)ie team為支持canvas做了大量工作……實(shí)際上canvas api相當(dāng)?shù)讓?，特別是交互方面，不如svg直觀，所以出現(xiàn)了很多封裝它的庫(kù)
- var ctx = $('#canvas')[0].getContext("2d");
- ctx.fillStyle = "#00A308";
- ctx.beginPath();
- ctx.arc(220, 220, 50, 0, Math.PI*2, true);
- ctx.closePath();
- ctx.fill();
MDC文檔：https://developer.mozilla.org/en/Canvas_tutorial
支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/過(guò)渡：excanvas.js http://code.google.com/p/explorercanvas/
SVG
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896
支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/過(guò)渡：raphael.js http://raphaeljs.com/
XMLHttpRequest 2
主要是增加跨域能力以及請(qǐng)求過(guò)程中的事件
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/XMLHttpRequest2/
MDC文檔：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文檔：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
支持：Firefox 3.5+（實(shí)現(xiàn)了部分）, IE 8.0+（實(shí)現(xiàn)了部分）
Access Control
千呼萬(wàn)喚的跨域訪(fǎng)問(wèn)控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是準(zhǔn)備提交給w3c標(biāo)準(zhǔn)化的東西……
- Access-Control-Allow-Origin: http://foo.example
w3c標(biāo)準(zhǔn)：http://www.w3.org/TR/cors/
MDC文檔：https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文檔：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx
支持：Firefox 3.5+, IE8.0+
E4X (ECMA-357)
Firefox和ActionScript3早就實(shí)現(xiàn)了的東西……不過(guò)其實(shí)現(xiàn)在json這么流行，有沒(méi)有E4X好像都無(wú)所謂了～（瞎說(shuō)的，其實(shí)在js代碼里直接寫(xiě)dom對(duì)象而不是html字符串，會(huì)方便很多）
MDC文檔：https://developer.mozilla.org/en/E4X
支持：Firefox 1.5+
ECMAScript 5 Native JSON
原生的JSON支持，速度和安全性都比eval強(qiáng)一百倍亞一百倍，另外要注意Douglas Crockford的json2.js是一個(gè)用js實(shí)現(xiàn)的js解釋器，所以安全性更好
- JSON.parse( text, translate )
- JSON.stringify( obj, translate )
- String.prototype.toJSON
- Boolean.prototype.toJSON
- Number.prototype.toJSON
- Date.prototype.toJSON
MDC文檔：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文檔：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx
支持：Firefox 3.5+, IE8+
替代/過(guò)渡：json2.js http://www.json.org/json2.js
ECMAScript 5 Array Extras
js1.6里實(shí)現(xiàn)的數(shù)組方法，主要是forEach, map, fliter這幾個(gè)函數(shù)式編程里非常重要的方法，還有反向查詢(xún)
- Array.prototype.indexOf( str )
- Array.prototype.lastIndexOf( str )
- Array.prototype.every( fn )
- Array.prototype.some( fn )
- Array.prototype.filter( fn )
- Array.prototype.forEach( fn )
- Array.prototype.map( fn )
MDC文檔：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras
支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/過(guò)渡：都可以通過(guò)擴(kuò)展Array.prototype來(lái)模擬
ECMAScript 5 isArray()
區(qū)分?jǐn)?shù)組和對(duì)象
- Array.isArray([]); // true
支持：無(wú)
替代/過(guò)渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]”;};
ECMAScript 5 Object
用GOOGLE I/O演講里的話(huà)來(lái)說(shuō)：更魯棒(robust)的對(duì)象系統(tǒng)
- Object.getPrototypeOf( obj )
約翰同學(xué)的講解：http://ejohn.org/blog/objectgetprototypeof/
支持：Firefox3.5
替代/過(guò)渡：object.__proto__ 或 object.constructor.prototype
- Object.create( proto, props ) //克隆或繼承對(duì)象
-
- Object.keys( obj ) //數(shù)據(jù)結(jié)構(gòu)的映射
- Object.getOwnPropertyNames( obj )
-
- Object.preventExtensions( obj ) //不能添加新屬性
- Object.isExtensible( obj )
-
- Object.seal( obj ) //不能刪除和修改屬性的配置，不能添加新屬性
- Object.isSealed( obj )
-
- Object.freeze( obj ) //不能刪除和修改屬性的配置，不能添加新屬性，不能寫(xiě)屬性
- Object.isFrozen( obj )
約翰同學(xué)的講解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/
支持：無(wú)
替代/過(guò)渡：Object.create和Object.keys可以自己實(shí)現(xiàn)
ECMAScript 5 Property Descriptor
對(duì)象屬性的訪(fǎng)問(wèn)控制
- Object.getOwnPropertyDescriptor( obj, prop )
- Object.defineProperty( obj, prop, desc )
- Object.defineProperties( obj, props )
- desc = {
- value: true,
- writable: false, //修改
- enumerable: true, //for in
- configurable: true, //刪除和修改屬性
- get: function(){ return name; },
- set: function(value){ name = value; }
- }
約翰同學(xué)的講解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/
支持：無(wú)
替代/過(guò)渡：Object.defineProperties其實(shí)相當(dāng)于jQuery.extend，用來(lái)實(shí)現(xiàn)Mixin
ECMAScript 5 Getters and Setters
python和ruby里都有的屬性訪(fǎng)問(wèn)方法
- obj = {
- get innerHTML() { return …; },
- set innerHTML(newHTML) { … }
- };
MDC文檔：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/過(guò)渡：
非標(biāo)準(zhǔn)，F(xiàn)irefox1.5里的舊方法
- HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
- HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});
支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
標(biāo)準(zhǔn)
- Object.defineProperty(document.body, "innerHTML", { get : function () {} });
MSDN文檔：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
支持：IE8+ (只能對(duì)DOM使用)
ECMAScript 5 Strict Mode
ES5的嚴(yán)格模式，刪除了舊版本中容易引起問(wèn)題的元素，并且會(huì)顯式的報(bào)錯(cuò)，方便調(diào)試
- "use strict"; //以下情況下拋出異常
- //對(duì)未定義的變量賦值
- //操作被設(shè)置為不可寫(xiě)，不可配置或不可擴(kuò)充的屬性
- //刪除變量，函數(shù)，參數(shù)
- //在對(duì)象直接量里重復(fù)定義屬性
- //eval做關(guān)鍵字，在eval的字符串里定義變量
- //覆寫(xiě)arguments
- //使用arguments.caller和arguments.callee（匿名函數(shù)必須具名才能引用自己）
- //(function(){ ... }).call( null ); // Exception
- //使用with
約翰同學(xué)的講解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
支持：無(wú)
替代/過(guò)渡：……從現(xiàn)在開(kāi)始養(yǎng)成嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣
ECMAScript 5 其他新特性
傳遞函數(shù)的引用時(shí)，綁定this
- Function.prototype.bind(thisArg, arg1, arg2....) /
支持：無(wú)
替代/過(guò)渡：prototype http://www.prototypejs.org/api/function/bind
ISO-formatted dates
- Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ
支持：無(wú)
替代/過(guò)渡：datejs http://code.google.com/p/datejs/
支持：Firefox3.5
替代/過(guò)渡：各種正則實(shí)現(xiàn) http://blog.stevenlevithan.com/archives/faster-trim-javascript
===================廢話(huà)又開(kāi)始的分割線(xiàn)=======================
其實(shí)我把這個(gè)東西發(fā)出來(lái)是希望能促進(jìn)創(chuàng)新的氛圍，讓更多人認(rèn)識(shí)到很多新技術(shù)已經(jīng)進(jìn)入到“實(shí)用”階段。
如果只是想做個(gè)實(shí)驗(yàn)性的webgame，或是只能用于特定平臺(tái)的應(yīng)用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已經(jīng)足夠罷。
如果不能無(wú)視主流平臺(tái)，有很多技術(shù)能讓你gracefully degrade（優(yōu)雅的退化）或者選取不同的方法實(shí)現(xiàn)兼容的接口。
如果你等不及IE x在若干年后實(shí)現(xiàn)xx，希望提前享受福利，有些技術(shù)的設(shè)計(jì)原則就是讓你能在沒(méi)有native支持的情況下可以自己實(shí)現(xiàn)一模一樣的功能或語(yǔ)法糖（syntactic sugar），比如ES5對(duì)象的繼承和訪(fǎng)問(wèn)控制，從ES4/ActionScript3時(shí)期那些老土的關(guān)鍵詞（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不會(huì)只是為了酷炫罷……
很多人都喜歡抱怨“我這輩子都沒(méi)機(jī)會(huì)用HTML5”，但是只要把視線(xiàn)從自己腳下那巴掌大塊地移開(kāi)看看別處，會(huì)發(fā)現(xiàn)世界其實(shí)一直都在改變喔XD
