H5 web Worker

￡神魔★判官ぃ 2022-09-25 05:18 189阅读 0赞

## H5 web Worker ##

**H5线程**

**线程中可用的变量、函数与类**

1.  self：用来表示本线程范围内的作用域。
2.  postMessage(msg)：向创建线程的源窗口发送消息。
3.  onmessage：获取接收消息的事件句柄。
4.  importScripts(urls)：导入其它JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件，导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。
5.  navigator对象：与window.navigator对象类似，具有appName、platform、userAgent、appVersion等属性。
6.  sessionStorage、localStorage：可以在线程中使用Web Storage。
7.  XMLHttpRequest：可以在线程中处理Ajax请求。
8.  Web Workers：可以在线程中嵌套线程。
9.  setTimeout()、setInterval()：可以在线程中实现定时处理。
10. close()：结束本线程。
11. eval()、isNaN()、escape()等：可以使用所有JavaScript核心函数。
12. object：可以创建和使用本地对象。
13. WebSockets：可以使用WebSockets API来向服务器发送和接收信息。

index.html

<!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

;
    (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

;(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

{
        "data":[ { "id":"1", "title":"新闻", "img":"understand-icon", "dataList":[ { "header":"日本5天23次抗议中国钓岛巡航 开始寻外援帮", "content":"日本5天23次抗议并未吓走在钓鱼岛海域巡航的中国海警船，10日，日本政府和媒体开始寻求“外援”。日本媒体10日集中报道“美国表示密切关注状况”，并重申钓鱼岛“在日本施政下”。而据NHK电视台称，日本外务省在官方网站上公布了“入侵日本领海的中国公务船活动照片和资料”，并计划将其翻译成英语，向外界传播。" }, { "header":"土耳其威胁退出北约", "content":"土俄翻开“历史新篇章”后，土耳其外长恰武什奥卢10日接受该国安纳多卢通讯社采访时表示，若北约不再提供必要支持，土耳其或“考虑退出北约”。另据美国有线电视新闻网11日报道，土总统埃尔多安对美国发出最后通牒，必须在土耳其与居伦之间做出选择。难道土耳其要掀翻与美国和北约“友谊的小船”？" } ] } ] }

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