Android HTML5多线程&文件上传

最新推荐文章于 2021-07-04 15:05:20 发布

weixin_34150503

最新推荐文章于 2021-07-04 15:05:20 发布

阅读量176

点赞数

文章标签：移动开发 javascript python ViewUI

原文链接：https://my.oschina.net/ososchina/blog/634952

版权

2019独角兽企业重金招聘Python工程师标准>>>

WebWorker,EventSource,Ajax,WebSocket,WebRTC共同构成网络生态中主要的部分，WebWoker多线程的出现，使得Javascript更容易实现异步编程，特别是在耗时任务使得Javascript更加健壮。

一.支持多线程和本地数据存储

支持LocalStorage数据存储

webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setAppCacheMaxSize(1024*1024*25);
String appCachePath = ctx.getApplicationContext().getCacheDir().getAbsolutePath();
webview.getSettings().setAppCachePath(appCachePath);
webview.getSettings().setAllowFileAccess(true);
webview.getSettings().setAppCacheEnabled(true);

2.支持多线程(Wokers与ShareWorker API)

settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
settings.setAllowContentAccess(true);
settings.setAllowFileAccessFromFileURLs(true);

二.实现多线程

1.实现workers.js子线程

var i=0;

function timedCount()
{
i=i+1;
self.postMessage(i);
setTimeout("timedCount()",500);
}
self.onmessage = function(event) {
  var method = event.data.method;
  var args = event.data.args;

   self.postMessage({method: method, reply: args });
  
  };
timedCount();

在html5中实现WebWorker的调用该

<script type="text/javascript" >
if(!!window.Worker&& typeof(Worker)!=="undefined")
   {
      window.worker = new Worker("./workers.js");
      window.worker.onmessage = function (event)
      {
          console.dir(event.data);
          document.querySelector('#span_title').innerHtml = event;
       };
       worker.onerror(function(event) {
          console.log(event);
        });
   }else{
      alert('不支持 Web Worker');
   }
   window.onbeforeunload = function()
   {
      window.worker.terminate();
   }
</script>

2.当然，同一个页面也能实现主线程与子线程通信

重点：<script id="worker" type="app/worker"></script>

<!DOCTYPE html>
<body>
  <script id="worker" type="app/worker">
    addEventListener('message', function() {
      postMessage('Work done!');
    }, false);
   </script>

  <script type="text/javascript">
    (function() {
      var blob = new Blob([document.querySelector('#worker').textContent]);
      var url = window.URL.createObjectURL(blob);
      var worker = new Worker(url);

      worker.addEventListener('message', function(e) {
        console.log(e.data);
      }, false);

      worker.postMessage('');
    })();
  </script>
  </body>
  </html>

3.再来看看ShareWorker

ShareWorker表示创建一个线程，能被其他同源同域的窗口，iframe都能访问，这也就是类似Java中的多线程中的资源共享，当然这里应该不会出现同步问题。

<!DOCTYPE HTML>
<title>Shared workers: demo 1</title>
<pre id="log">Log:</pre>
<script>
  var worker = new SharedWorker('workers.js',"com.my.share.webwoker"); //提供第二个参数，参数一致才能被共享
  var log = document.getElementById('log');
  worker.port.onmessage = function(e) { // note: not worker.onmessage!
    log.textContent += '\n' + e.data;
  }
</script>

当然，还有ServiceWorker,这里就不介绍了

http://javascript.ruanyifeng.com/htmlapi/webworker.html#toc7

----------------------------------------------------------------------------------------------------------------------