learn

abstain23 · Jul 2, 2020 · 2a72f61 · 2a72f61
1 parent a160620
commit 2a72f61
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 2 deletions.
diff --git a/ES6/proxy.js b/ES6/proxy.js
@@ -59,4 +59,6 @@ const myProxy = new Proxy(myObj, {
 })
 
 // console.log(myProxy.age)
-myProxy.age = '19'
+myProxy.age = '19'
+
+
diff --git a/ES6/proxy2.js 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
diff --git a/layout/index.html 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>
diff --git a/layout/index2.html 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
@@ -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>
diff --git a/webwoker/webworker.html b/webwoker/webworker.html
@@ -15,7 +15,9 @@
     worker.onmessage = function (e) {
       console.log(e.data)
     }
+
+
   </script>
 </body>
 
-</html>
+</html>
diff --git a/好用的方法/1.js b/好用的方法/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([]))