html5特性浅谈,离线存储,多线程等
我觉得,html5是不是规范其实不重要,所有的主流浏览器都或多或少的实现并竞争式的比拼实现的程度,单凭这一点就足够了。
因为要在四月一号听一个讲座所以提前对html5了解了一下,算是对得起演讲者。发现html5真的带来了重大的改变。而其中javascript起到的作用是毋庸置疑的,大量的改变其实在上层开发者看来只是增加了一个到两个js对象而已,比如离线存储和webworker等。所以越发发现我选择深入学习js的重要和明智了。java混饭吃,js和动态语言带给我未来。
不多说,简单的介绍一下我目前看到和尝试的部分特性。
1. Web Storage API, 这其实就是大名顶顶的离线存储特性了,离线存储主要有三种,数据库方式现在据说暂时停滞,剩下的是本地长时间存储和本地session存储。顾名思义,前者是一直保存的,可以用来保存如自定义布局等。后者典型应用是购物车啥的,只在当前session内有效。这些以前都是用cookie来完成的,可是cookie有很多缺点,如需要在s和b之间来回传,只有4k等等。
使用方式:
localStorage.data = 5;
localStorage就像个单例,是不是很简单,还有监听事件等。可以监听数据变化。
function displayStorageEvent(e)
var logged = "key:" + e.key + ", newValue:"
+ e.newValue + ",oldValue:" +
e.oldValue +", url:" + e.url + ", storageArea:" + e.storageArea
alert(logged);
}
window.addEventListener("storage", displayStorageEvent, true);
主要就是事件里面的key, newValue ,oldValue了,是不是挺简单的!?
2. Web Worker API
以前我们都说js是单线程的,那么有了这个是不是就是多线程了呢?
webworker 听名字就像java里面的swingworker模式,其实功能也差不多。比较来说,swingworker里面的dobackgroup里面是后台线程池里的线程,不建议访问组件,在webworker里面是不能访问dom api,这个是一个意思。而swingworker里面可以通过发送事件来更改页面,webworker也是这种方案,不同的是swingworker里面done可以回调到EDT,webworker里没发现类似的用法。说这么多,不如上例子啦:
function onMessage(m){
console.info(m.data);
}
function onError(m){
console.warn(m.message,m);
}
function init(){
worker = new Worker('msg.js');
worker.addEventListener('message',onMessage,true);
worker.addEventListener('error',onError,true);
document.getElementById('fire').addEventListener('click',function(){
worker.postMessage('hello ...' + document.getElementById('text'));
},true);
}
window.addEventListener('load',init,true);
这是主页面的js,在main.html中,其中的postMessage在dom元素的事件里被发出,相当于java中的事件派发线程中。而onMessage方法监听后台的线程发送的事件,该事件由worker指定的msg.js 发送,一会我们会看到。
function onMsg(m){
postMessage('worker echo' + m.data);
}
addEventListener('message',onMsg,true);
这个就是相当于后台的线程,在worker = new Worker('msg.js'); 之后就一直监听main.html中的事件,当点击fire按钮,发送事件,这里监听到。这时是前台向后台通信,后台线程接受到消息,又发送了消息,则这时前台线程中onMessage又监听到了消息,打印到控制台。
这个真的跟swingworker很像,写过swing的童鞋一定会会心一笑的!
暂说这两个特性,下篇待续。