From 2a72f6159c02c611a25ab0909b92a701d3b97d5b Mon Sep 17 00:00:00 2001
From: YangJ0605 <1442122744@qq.com>
Date: Thu, 2 Jul 2020 18:06:08 +0800
Subject: [PATCH] learn

---
 ES6/proxy.js                                  |  4 +-
 ES6/proxy2.js                                 | 20 +++++++
 layout/index.html                             | 41 +++++++++++++
 layout/index2.html                            | 58 +++++++++++++++++++
 webwoker/rem.html                             | 37 ++++++++++++
 webwoker/webworker.html                       |  4 +-
 .../1.js"                                     |  7 +++
 7 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 ES6/proxy2.js
 create mode 100644 layout/index.html
 create mode 100644 layout/index2.html
 create mode 100644 webwoker/rem.html
 create mode 100644 "\345\245\275\347\224\250\347\232\204\346\226\271\346\263\225/1.js"
diff --git a/ES6/proxy.js b/ES6/proxy.js
index 6260aeb..7e86980 100644
--- a/ES6/proxy.js
+++ b/ES6/proxy.js
@@ -59,4 +59,6 @@ const myProxy = new Proxy(myObj, {
 })
 
 // console.log(myProxy.age)
-myProxy.age = '19'
\ No newline at end of file
+myProxy.age = '19'
+
+
diff --git a/ES6/proxy2.js b/ES6/proxy2.js
new file mode 100644
index 0000000..72942db
--- /dev/null
+++ b/ES6/proxy2.js
@@ -0,0 +1,20 @@
+let nums = [1, 2, 4]
+
+nums = new Proxy(nums, {
+  get(target, prop) {
+    if (prop in target) {
+      return target[prop]
+    } else {
+      return 0
+    }
+  }
+})
+
+console.log(nums[1])
+console.log(nums[22])
+
+
+
+// fo / 16 = win/width
+// 640/16 = 40
+//   414/640 * 16 = 10.35px
\ No newline at end of file
diff --git a/layout/index.html b/layout/index.html
new file mode 100644
index 0000000..08040a9
--- /dev/null
+++ b/layout/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .wp {
+      border: 1px solid red;
+      width: 300px;
+      height: 300px;
+      position: relative;
+    }
+
+    .box {
+      height: 50px;
+      width: 50px;
+      position: absolute;;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      background-color: red;
+    }
+
+    .box.size {
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="wp">
+    <div class="box">xxx</div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/layout/index2.html b/layout/index2.html
new file mode 100644
index 0000000..12c8f88
--- /dev/null
+++ b/layout/index2.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+
+  <style>
+    .outer {
+      height: 200px;
+      background-color: red;
+      padding: 10px;
+    }
+
+    .inner {
+      height: 100px;
+      background-color: blue;
+      margin-top: 50px;
+    }
+  </style>
+</head>
+<body>
+  <div class="outer">
+    <div class="inner"></div>
+  </div>
+</body>
+
+<script>
+let inner = document.querySelector('.inner')
+let outer = document.querySelector('.outer')
+
+// 监听outer元素的attribute变化
+new MutationObserver(function() {
+  console.log('mutate')
+}).observe(outer, {
+  attributes: true
+})
+
+// click监听事件
+function onClick() {
+  console.log('click')
+
+  setTimeout(function() {
+    console.log('timeout')
+  }, 0)
+
+  outer.setAttribute('data-random', Math.random())
+  Promise.resolve().then(function() {
+    console.log('promise')
+  })
+}
+
+inner.addEventListener('click', onClick)
+outer.addEventListener('click', onClick)
+
+</script>
+</html>
diff --git a/webwoker/rem.html b/webwoker/rem.html
new file mode 100644
index 0000000..d458dfc
--- /dev/null
+++ b/webwoker/rem.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <script>
+    (function (doc, win) {
+      var rootValue = 100;
+      var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function () {
+          var clientWidth = docEl.clientWidth;
+          console.log(clientWidth)
+          if (!clientWidth) return;
+          docEl.style.fontSize = rootValue * (clientWidth / 640) + 'px';
+        };
+      if (!doc.addEventListener) return;
+      win.addEventListener(resizeEvt, recalc, false);
+      doc.addEventListener('DOMContentLoaded', recalc, false);
+    })(document, window);
+  </script>
+  <style>
+    .test {
+      width: 1rem;
+      height: 16px;
+      background-color: red;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="test"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/webwoker/webworker.html b/webwoker/webworker.html
index 06ec676..ba3e78f 100644
--- a/webwoker/webworker.html
+++ b/webwoker/webworker.html
@@ -15,7 +15,9 @@
     worker.onmessage = function (e) {
       console.log(e.data)
     }
+
+
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git "a/\345\245\275\347\224\250\347\232\204\346\226\271\346\263\225/1.js" "b/\345\245\275\347\224\250\347\232\204\346\226\271\346\263\225/1.js"
new file mode 100644
index 0000000..7918597
--- /dev/null
+++ "b/\345\245\275\347\224\250\347\232\204\346\226\271\346\263\225/1.js"
@@ -0,0 +1,7 @@
+
+// 判断类型
+const isType = (type) => (target) => `[object ${type}]` === Object.prototype.toString.call(target)
+const isArray = isType('Array')
+const isPureObject = isType('Object')
+
+console.log(isArray([]))
