feat: 添加demo

2 years ago · e866536978
3 changed files with 200 additions and 0 deletions
--- a/examples/worker_new.html
+++ b/examples/worker_new.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
+    <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
+</head>
+<body>
+    <div id="wrapper"></div>
+    <script src="./worker_new/index.js"></script>
+</body>
+</html>
--- a/examples/worker_new/index.js
+++ b/examples/worker_new/index.js
@ -0,0 +1,105 @@
+document.cookie = "test=demo";
+
+// worker获取主线程资源
+var CookieAction = BI.inherit(BI.Workers.WorkerBaseAction, {
+    addActionHandler: function() {
+        this.controller.addActionHandler("Cookie", this.getCookie.bind(this));
+    },
+
+    getCookie: function() {
+        return document.cookie;
+    }
+});
+
+// 调用worker计算
+var FibonacciAction = BI.inherit(BI.Workers.WorkerBaseAction, {
+    addActionHandler: function() {},
+
+    getResult: function(times) {
+        return this.controller.requestPromise("Fibonacci", { times: times })
+            .then(function(v) {
+                console.log(v);
+            });
+    }
+});
+
+// 主线程与worker多次交互
+const HeartBeatCheckAction = BI.inherit(BI.Workers.WorkerBaseAction, {
+    addActionHandler: function() {
+        this.controller.addActionHandler("HeartBeatChecked", this.recieveHeartBeatChecked.bind(this));
+    },
+
+    recieveHeartBeatChecked: function (payload) {
+        console.log("heartbeat: " + payload.time);
+    },
+
+    startHeatBeatCheck: function() {
+        return this.controller.request("HeartBeatCheckStart");
+    },
+
+    stopHeatBeatCheck: function() {
+        return this.controller.request("HeartBeatCheckStop");
+    }
+});
+
+var WorkerThreadWorker = BI.inherit(BI.Workers.MainThreadWorker, {
+    initActions: function() {
+        this.cookieAction = this.createAction(CookieAction);
+
+        this.fibonacciAction = this.createAction(FibonacciAction);
+
+        this.heartBeatCheckAction = this.createAction(HeartBeatCheckAction);
+    },
+
+    calculateFibonacci: function(times) {
+        this.fibonacciAction.getResult(times);
+    },
+
+    startHeatBeatCheck: function() {
+        this.heartBeatCheckAction.startHeatBeatCheck();
+    },
+
+    stopHeatBeatCheck: function() {
+        this.heartBeatCheckAction.stopHeatBeatCheck();
+    }
+});
+
+var mainThreadWorker = new WorkerThreadWorker({
+    workerUrl: "./worker_new/worker.js",
+    workerName: "demo"
+});
+
+BI.createWidget({
+    type: "bi.vertical",
+    element: "#wrapper",
+    vgap: 10,
+    hgap: 10,
+    items: [
+        {
+            type: "bi.button",
+            text: "点击计算斐波那契数列第40项",
+            width: 200,
+            handler: function() {
+                console.log("click");
+    
+                mainThreadWorker.calculateFibonacci(40);
+            }
+        },
+        {
+            type: "bi.button",
+            text: "开始心跳",
+            width: 200,
+            handler: function() {
+                mainThreadWorker.startHeatBeatCheck();
+            }
+        },
+        {
+            type: "bi.button",
+            text: "停止心跳",
+            width: 200,
+            handler: function() {
+                mainThreadWorker.stopHeatBeatCheck();
+            }
+        }
+    ]
+});
--- a/examples/worker_new/worker.js
+++ b/examples/worker_new/worker.js
@ -0,0 +1,80 @@
+self.importScripts("https://fanruan.design/fineui/fineui_without_jquery_polyfill.js");
+
+var CookieAction = BI.inherit(BI.Workers.WorkerBaseAction, {
+    addActionHandler: function() {},
+
+    getCookie: function() {
+        return this.controller.requestPromise("Cookie");
+    }
+});
+
+function fibonacci(n) {
+    if (n === 1 || n === 2) {
+        return 1;
+    }
+    
+    return fibonacci(n - 2) + fibonacci(n - 1);
+}
+
+var FibonacciAction = BI.inherit(BI.Workers.WorkerBaseAction, {
+    addActionHandler: function() {
+        this.controller.addActionHandler("Fibonacci", this.getResult.bind(this));
+    },
+
+    getResult: function(payload) {
+        return fibonacci(payload.times);
+    }
+});
+
+const HeartBeatCheckAction = BI.inherit(BI.Workers.WorkerBaseAction, {
+    addActionHandler: function() {
+        this.controller.addActionHandler("HeartBeatCheckStart", this.startHeatBeatCheck.bind(this));
+        this.controller.addActionHandler("HeartBeatCheckStop", this.stopHeatBeatCheck.bind(this));
+    },
+
+    startHeatBeatCheck: function() {
+        var self = this;
+
+        if (!this.timer) {
+            console.log("heart beat check started");
+
+            this.timer = setInterval(function() {
+                // 模拟请求
+                setTimeout(function() {
+                    self.controller.request("HeartBeatChecked", {
+                        time: new Date()
+                    });
+                }, 50);
+            }, 5 * 1000);
+        } else {
+            console.log("heart beat has already started!");
+        }
+    },
+
+    stopHeatBeatCheck: function() {
+        console.log("heart beat check stopped");
+
+        clearInterval(this.timer);
+    }
+});
+
+var WorkerThreadWorker = BI.inherit(BI.Workers.WorkerThreadWorker, {
+    initActions: function() {
+        this.cookieAction = this.createAction(CookieAction);
+
+        this.fibonacciAction = this.createAction(FibonacciAction);
+
+        this.heartBeatCheckAction = this.createAction(HeartBeatCheckAction);
+    },
+
+    fetchCookie: function() {
+        return this.cookieAction.getCookie()
+            .then(function (v) {
+                console.log(v);
+            });
+    }
+});
+
+var workerThreadWorker = new WorkerThreadWorker();
+
+workerThreadWorker.fetchCookie();