提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

H5 web Worker

文件 对象 线程
2023-04-18 14:42:45 时间

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日报道，土总统埃尔多安对美国发出最后通牒，必须在土耳其与居伦之间做出选择。难道土耳其要掀翻与美国和北约“友谊的小船”？"
               }
            ]
        }
    ]
}

相关文章