ECMAScript 五与HTML5 的支持情况 _HTML/CSS

ECMAScript 5与HTML5 的支持情况

ECMAScript 5与HTML5离我们越来越近了，触摸屏相关的API开发中，未来的web世界更加多姿多彩。

Object.getPrototypeOf

支持浏览器：firefox3.6 chrome4

http://codereview.chromium.org/518056

Object.getOwnPropertyDescriptor

支持浏览器：IE8 chrome4

http://code.google.com/p/chromium/issues/detail?id=20345

Object.keys

支持浏览器： chrome4

http://code.google.com/p/chromium/issues/detail?id=21767

Object.defineProperty

支持浏览器： IE8

http://msdn.microsoft.com/en-us/library/dd548687(VS.85).aspx

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/defineProperty

Object.create

支持浏览器： chrome4

http://msdn.microsoft.com/en-us/library/dd548687(VS.85).aspx

Object.getOwnPropertyNames

支持浏览器： chrome4

http://code.google.com/p/v8/source/detail?r=3620

关于Object的扩展，可以看John Resig的这一篇博文《ECMAScript 5 Objects and Properties》

JSON

支持浏览器： IE8 chrome1+ safari3+ firefox3+

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/

http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

Date.now

支持浏览器： chrome4 firefox2+ safari4

http://trac.webkit.org/changeset/33422

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date/now

Date.prototype.toISOString

支持浏览器： chrome4 firefox3.6 safari4

https://bugs.webkit.org/show_bug.cgi?id=26594

String.prototype.trim

支持浏览器： chrome1+ firefox3+

https://bugs.webkit.org/show_bug.cgi?id=26590

http://code.google.com/p/v8/issues/detail?id=465

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim

“Array extras”

Array.prototype.{indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight}

IE8全部不支持，Opera不支持reduce,reduceRight，chrome与safari与firefox早就实现了

https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

Array.isArray

支持浏览器： chrome4 opera10.50

http://codereview.chromium.org/271072

ECMAScript 5 Getters and Setters

这是旧有的javascript不能模拟的新特性！

o = {

? a:7,

? get b() { return this.a+1; },

? set c(x) { this.a = x/2; }
};

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持浏览器：Firefox 2.0+, Safari 3.0+, Chrome 1.0+, Opera 9.5+

非标准，Firefox1.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+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

HTML5 DOM Storage

window.localStorage

window.sessionStorage //可跨域，标签页关掉就清空

支持浏览器：Firefox 3.5+, Safari 4.0+, IE 8.0+

http://www.w3.org/TR/webstorage/

http://www.quirksmode.org/dom/html5.html#localstorage

https://developer.mozilla.org/en/DOM/Storage

http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">
<h1>Entry</h1>
</html>

支持浏览器：Firefox 3.5+

http://www.w3.org/TR/offline-webapps/#offline

https://developer.mozilla.org/en/Offline_resources_in_Firefox

HTML5 Web SQL Database Storage

//2007年就实现了！

var database = openDatabase("Database Name", "Database Version");
?

database.executeSql("SELECT * FROM test", function(result1) {

?? // do something with the results

?? database.executeSql("DROP TABLE test", function(result2) {

???? // do some more stuff

???? alert("My second database query finished executing!");

?? });
});

支持浏览器：Safari, iPhone OS 3, Opera 10.50，chrome4

http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

http://www.weboshelp.net/getting-started-with-webos/156-palm-webos-html5-database-storage-tutorial/

HTML5 Web Workers

实现多线程！？

var worker = new Worker("worker.js");
// Watch for messages from the worker

worker.onmessage = function(e){

? // The message from the client:

? e.data
};
?

worker.postMessage("start");

支持浏览器：firefox3.1+

http://www.w3.org/TR/workers/

https://developer.mozilla.org/En/Using_web_workers

日本人用它来实现的框架