H5 web Worker
H5线程
线程中可用的变量、函数与类
- self：用来表示本线程范围内的作用域。
- postMessage(msg)：向创建线程的源窗口发送消息。
- onmessage：获取接收消息的事件句柄。
- importScripts(urls)：导入其它JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件，导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。
- navigator对象：与window.navigator对象类似，具有appName、platform、userAgent、appVersion等属性。
- sessionStorage、localStorage：可以在线程中使用Web Storage。
- XMLHttpRequest：可以在线程中处理Ajax请求。
- Web Workers：可以在线程中嵌套线程。
- setTimeout()、setInterval()：可以在线程中实现定时处理。
- close()：结束本线程。
- eval()、isNaN()、escape()等：可以使用所有JavaScript核心函数。
- object：可以创建和使用本地对象。
- WebSockets：可以使用WebSockets API来向服务器发送和接收信息。
index.html
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title></title>
<style>
li{padding: 10px 0;color: #666666;}
#btnNa{color: #00FFFF;text-align:center;background: green;font-size: 16px;width:50%;height: 50px;line-height: 50px;border: none;margin: 0 auto;}
</style>
</head>
<body>
<center><h3>我的 Web WorKer</h3></center>
<p>
<ul>
<p><strong>线程中可用的变量、函数与类</strong></p>
<li>self：用来表示本线程范围内的作用域。</li>
<li>postMessage(msg)：向创建线程的源窗口发送消息。</li>
<li>onmessage：获取接收消息的事件句柄。</li>
<li>importScripts(urls)：导入其它JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件，导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。</li>
<li>navigator对象：与window.navigator对象类似，具有appName、platform、userAgent、appVersion等属性。</li>
<li>sessionStorage、localStorage：可以在线程中使用Web Storage。</li>
<li>XMLHttpRequest：可以在线程中处理Ajax请求。</li>
<li>Web Workers：可以在线程中嵌套线程。</li>
<li>setTimeout()、setInterval()：可以在线程中实现定时处理。</li>
<li>close()：结束本线程。</li>
<li>eval()、isNaN()、escape()等：可以使用所有JavaScript核心函数。</li>
<li>object：可以创建和使用本地对象。</li>
<li>WebSockets：可以使用WebSockets API来向服务器发送和接收信息。</li>
</ul>
</p>
<hr />
<button id="btnNa">点击拿取JSON数据</button>
<section id="numDiv"></section>
</body>
<script src="../js/zepto.min.js"></script>
<script src="index.js"></script>
</html>index.js
代码语言：javascript复制;
(function() {
if(typeof(Worker) !== "undefined") { //判断浏览器对worker是否支持
// Yes! Web worker support!
// Some code.....
} else {
alert("对不起，页面不支持 Web Worker !!!");
return false;
}
var numDiv, work = null;
numDiv = document.getElementById('numDiv');
document.getElementById('btnNa').onclick = function() {
if(work) {
return;
}
work = new Worker('getJson.js');
work.postMessage({"metod":"get","href":"q_main.json","asyc":"true"})
work.onmessage = function(e) {
if(e.data){
var data = JSON.parse(e.data),str = "";
data = data.data;
for(var i = 0; len = data.length, i < len; i ) {
str = "<section><div><span>" data[i].title "</span></div><div><ul>";
var leng = data[i].dataList.length;
for(var j = 0; j < leng; j ) {
if(j <= 1) {
if(data[i].dataList[j].header.length >= 12) {
str = "<li style='line-height:2rem;'><span style='width: 84%;display: block;text-indent: 0;padding-left: 16px;'>" data[i].dataList[j].header "</span></li>";
} else {
str = "<li>" data[i].dataList[j].header "</li>";
}
}
}
str = "</ul></div></section>";
}
$("#numDiv").append(str);
}
if(work) {
work.terminate(); //停止，释放掉资源
work = null; //work重新初始化
}
};
};
})();getJson.js
代码语言：javascript复制;(function() {
//importScripts("../js/zepto.min.js");//用于引入相关的操作文件，但是不支持window属性
var ajax = function ajax(data) {
if(!data) {
console.log("参数为空")
return false;
}
var xhr = new XMLHttpRequest();
xhr.open(data.metod, data.href, data.asyc); //false同步，true 异步
xhr.onload = function() {
postMessage(xhr.responseText);
};
var param = "username=baiyu&passwd=123";
xhr.send(param);
}
self.onmessage = function(e) {
ajax(e.data);
};
})();q_main.json
代码语言：javascript复制{
"data":[
{
"id":"1",
"title":"新闻",
"img":"understand-icon",
"dataList":[
{
"header":"日本5天23次抗议中国钓岛巡航 开始寻外援帮",
"content":"日本5天23次抗议并未吓走在钓鱼岛海域巡航的中国海警船，10日，日本政府和媒体开始寻求“外援”。日本媒体10日集中报道“美国表示密切关注状况”，并重申钓鱼岛“在日本施政下”。而据NHK电视台称，日本外务省在官方网站上公布了“入侵日本领海的中国公务船活动照片和资料”，并计划将其翻译成英语，向外界传播。"
}, {
"header":"土耳其威胁退出北约",
"content":"土俄翻开“历史新篇章”后，土耳其外长恰武什奥卢10日接受该国安纳多卢通讯社采访时表示，若北约不再提供必要支持，土耳其或“考虑退出北约”。另据美国有线电视新闻网11日报道，土总统埃尔多安对美国发出最后通牒，必须在土耳其与居伦之间做出选择。难道土耳其要掀翻与美国和北约“友谊的小船”？"
}
]
}
]
}
