forked from fanruan/fineui
iapyang
2 years ago
3 changed files with 200 additions and 0 deletions
@ -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> |
||||||
@ -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(); |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
@ -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(); |
||||||
Loading…
Reference in new issue