日期:2014-05-17  浏览次数:20677 次

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的童鞋一定会会心一笑的!
      暂说这两个特性,下篇待续。