Add files via upload

Fantastic-Chen · Oct 11, 2018 · 644323d · 644323d
1 parent 26bc2bd
commit 644323d
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 0 deletions.
diff --git a/Web Workers/06_Web Workers_测试.html b/Web Workers/06_Web Workers_测试.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>06_Web Workers_测试</title>
+</head>
+<body>
+<!--
+1. H5规范提供了js分线程的实现, 取名为: Web Workers
+2. 相关API
+  * Worker: 构造函数, 加载分线程执行的js文件
+  * Worker.prototype.onmessage: 用于接收另一个线程的回调函数
+  * Worker.prototype.postMessage: 向另一个线程发送消息
+3. 不足
+  * worker内代码不能操作DOM(更新UI)
+  * 不能跨域加载JS
+  * 不是每个浏览器都支持这个新特性
+-->
+
+<input type="text" placeholder="数值" id="number">
+<button id="btn">计算</button>
+<script type="text/javascript">
+  // 1 1 2 3 5 8    f(n) = f(n-1) + f(n-2)
+  function fibonacci(n) {
+    return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
+  }
+  // console.log(fibonacci(7))
+  var input = document.getElementById('number')
+  document.getElementById('btn').onclick = function () {
+    var number = input.value
+    var result = fibonacci(number)
+    alert(result)
+  }
+
+</script>
+</body>
+</html>
diff --git a/Web Workers/06_Web Workers_测试2.html b/Web Workers/06_Web Workers_测试2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>06_Web Workers_测试</title>
+</head>
+<body>
+<!--
+1. H5规范提供了js分线程的实现, 取名为: Web Workers
+2. 相关API
+  * Worker: 构造函数, 加载分线程执行的js文件
+  * Worker.prototype.onmessage: 用于接收另一个线程的回调函数
+  * Worker.prototype.postMessage: 向另一个线程发送消息
+3. 不足
+  * worker内代码不能操作DOM(更新UI)
+  * 不能跨域加载JS
+  * 不是每个浏览器都支持这个新特性
+-->
+
+<input type="text" placeholder="数值" id="number">
+<button id="btn">计算</button>
+<script type="text/javascript">
+  var input = document.getElementById('number')
+  document.getElementById('btn').onclick = function () {
+    var number = input.value
+
+    //创建一个Worker对象
+    var worker = new Worker('worker.js')
+    // 绑定接收消息的监听
+    worker.onmessage = function (event) {
+      console.log('主线程接收分线程返回的数据: '+event.data)
+      alert(event.data)
+    }
+
+    // 向分线程发送消息
+    worker.postMessage(number)
+    console.log('主线程向分线程发送数据: '+number)
+  }
+  // console.log(this) // window
+
+</script>
+</body>
+</html>
diff --git a/Web Workers/H5 Web Workers(多线程).png b/Web Workers/H5 Web Workers(多线程).png
diff --git a/Web Workers/worker.js b/Web Workers/worker.js
@@ -0,0 +1,15 @@
+function fibonacci(n) {
+  return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
+}
+
+console.log(this)
+this.onmessage = function (event) {
+  var number = event.data
+  console.log('分线程接收到主线程发送的数据: '+number)
+  //计算
+  var result = fibonacci(number)
+  postMessage(result)
+  console.log('分线程向主线程返回数据: '+result)
+  // alert(result)  alert是window的方法, 在分线程不能调用
+  // 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
+}