ECMAScript 5与HTML5的支持情况

2011-03-20
8分钟阅读时长
3934字
阅读

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

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之类)在离线状态下使用,不是结构化数据

Entry

支持浏览器: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

日本人用它来实现的框架

HTML5 Geolocation
支持浏览器:FF3.5+, iPhone OS 3

HTML5 Demo: geolocation

Geolocation

Finding your location: checking…

运行代码

http://www.w3.org/TR/geolocation-API/

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

HTML5 Drag and Drop
原生拖放API

HTML5 Drag and drop demonstration

运行代码

支持浏览器:IE8, Safari 4, FF3.5

IE8如果报错,请刷新当前页面……

http://www.w3.org/TR/html5/editing.html#dnd

https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

HTML5 Video
支持浏览器:Safari 4, FF3.5,chrome3+

HTML5 Demo: video

Video

00:00 / loading…

Note that (at time of writing) Webkit nightly supports full screen mode, which will add a button above.

运行代码

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

http://webkit.org/blog/140/html5-media-support/

HTML5 audio
支持浏览器:Safari 4, FF3.5,chrome3+
<!doctype html>

阅读器
English Standard Version Bible Bible.en.Crossway.ESV.2001 Luke.2.1-Luke.2.20 Bible Bible Bible –>

Luke 2:1-20 (ESV)

<audio controls=”” style=”width:100%; height:2em;”>

Notice: Your browser doesn’t appear to support HTML5 Audio. Please use try Firefox 3.5, Chrome, or Safari.

<!–

The Birth of Jesus Christ

–>

In those days a decree went out from Caesar Augustus that all the world should be registered. This was the first registration when Quirinius was governor of Syria. And all went to be registered, each to his own town. And Joseph also went up from Galilee, from the town of Nazareth, to Judea, to the city of David, which is called Bethlehem, because he was of the house and lineage of David, to be registered with Mary, his betrothed, who was with child. And while they were there, the time came for her to give birth. And she gave birth to her firstborn son and wrapped him in swaddling cloths and laid him in a manger, because there was no place for them in the inn.

The Shepherds and the Angels–>

And in the same region there were shepherds out in the field, keeping watch over their flock by night. And an angel of the Lord appeared to them, and the glory of the Lord shone around them, and they were filled with fear. And the angel said to them, Fear not, for behold, I bring you good news of great joy that will be for all the people. For unto you is born this day in the city of David a Savior, who is Christ the Lord. And this will be a sign for you: you will find a baby wrapped in swaddling cloths and lying in a manger. And suddenly there was with the angel a multitude of the heavenly host praising God and saying,

Glory to God in the highest,
and on earth peace among those with whom he is pleased!

When the angels went away from them into heaven, the shepherds said to one another, Let us go over to Bethlehem and see this thing that has happened, which the Lord has made known to us. And they went with haste and found Mary and Joseph, and the baby lying in a manger. And when they saw it, they made known the saying that had been told them concerning this child. And all who heard it wondered at what the shepherds told them. But Mary treasured up all these things, pondering them in her heart. And the shepherds returned, glorifying and praising God for all they had heard and seen, as it had been told them.


Scripture taken from The Holy Bible, English Standard Version. Copyright ©2001 by Crossway Bibles, a publishing ministry of Good News Publishers. Used by permission. All rights reserved. Text provided by the Crossway Bibles Web Service.

运行代码

HTML5 canvas
支持浏览器:IE以外所有新锐浏览器
<!doctype html>

canvas by 司徒正美

Canvas

返回

运行代码

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

HTML5 SVG
支持浏览器:Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+

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

http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

HTML5 XMLHttpRequest 2与跨域
支持浏览器:IE8与firefox3.5+各实现了部分

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

https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress

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

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

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

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

HTML5的标签变更情况:
http://www.w3schools.com/html5/html5_reference.asp

——————————————————————————–

上述特征的支持情况只对目前有效……

 

Avatar
zfkun 喜欢游戏、热爱技术、追求艺术、崇尚自由、渴望精彩、最爱唠叨