2024-10-18

LBJhui · Oct 18, 2024 · 0ac500c · 0ac500c
1 parent b87627a
commit 0ac500c
Show file tree

Hide file tree

Showing 4 changed files with 264 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,135 @@
+ESModule 的工作原理
+
+```js
+const o = (function () {
+  const obj = {
+    a: 1,
+    b: 2,
+  }
+  return {
+    get: function (k) {
+      return obj[k]
+    },
+  }
+})()
+// 闭包代码的提权漏洞
+// 如何在不改变上面代码的情况下，修改 obj 对象
+Object.defineProperty(Object.prototype, 'abc', {
+  get() {
+    return this
+  },
+})
+console.log(o.get('abc'))
+
+// 解决
+const o = (function () {
+  // var obj = Object.create(null)
+  const obj = {
+    a: 1,
+    b: 2,
+  }
+  // Object.setPropertytypeOf(obj, null)
+  return {
+    get: function (k) {
+      if (obj.hasOwnProperty(k)) {
+        return obj[k]
+      }
+    },
+  }
+})()
+```
+
+```js
+let a = 5
+let b = 6
+
+// ①
+const temp = b
+b = a
+a = temp
+
+// ②
+;[a, b] = [b, a]
+
+// ③ 数字
+a = a + b
+b = a - b
+a = a - b
+// a = b + (b = a) - b
+
+// ④ 整数
+a = a ^ b
+b = a ^ b
+a = a ^ b
+```
+
+```js
+// 手写 call
+Function.prototype.myCall = function (ctx, ...args) {
+  ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
+  const fn = this
+  const key = Symbol()
+  Object.defineProperty(ctx, key, {
+    value: fn,
+    enumerable: false,
+  })
+  const r = ctx[key](...args)
+  delete ctx[key]
+  return r
+}
+
+// 手写 bind
+Function.prototype.myBind = function (ctx, ...args) {
+  const fn = this
+  return function (...restArgs) {
+    if (new.target) {
+      return new fn(...args, ...restArgs)
+    }
+    return fn.apply(ctx, [...args, ...restArgs])
+  }
+}
+```
+
+```js
+// 并发请求
+function concurRequest(urls, maxNum) {
+  if (urls.length === 0) return Promise.resolve([])
+  return new Promise((resolve) => {
+    let index = 0 // 指向下一次请求的 url 对应的下标
+    const result = [] // 存储所有请求的结果
+    let count = 0 // 当前完成的请求数量
+    async function _request() {
+      const i = index
+      const url = urls[index]
+      index++
+      try {
+        const resp = await fetch(url)
+        result[i] = resp
+      } catch (err) {
+        result[i] = err
+      } finally {
+        count++
+        if (count === urls.length) {
+          resolve(result)
+        }
+        if (index < urls.length) {
+          _request()
+        }
+      }
+    }
+    for (let i = 0; i < Math.min(urls.length, maxNum); i++) {
+      _request()
+    }
+  })
+}
+```
+
+```ts
+// 对柯里化进行类型标注
+type Curried<A extends any[], R> = A extends [] ? () => R : A extends [infer P] ? (x: P) => R : A extends [infer P, ...infer Rest] ? (x: p) => Curried<Rest, R> : never
+declare function curry<A extends any[], R>(fn: (...args: A) => R): Curried<A, R>
+```
+
 localeCompare 字典顺序
 
 ```
@@ -962,12 +1094,6 @@ export default definConfig({
 })
 ```
 
-```
-对象属性
-symbol 属性不能被json序列化
-symbol 属性可以删除，configurable:true
-```
-
 call 方法第一个参数为 null 或 undefined，this 会被设置为全局对象
 
 ```
@@ -1074,6 +1200,11 @@ isNaN('x') // true
 
 实现 debounce 防抖函数
 
+```ts
+// 对防抖函数进行类型标注
+declare function debounce<T extends any[]>(fn: (...args: T) => any, delay: number): (...args: T) => void
+```
+
 自定义指令控制权限的弊端
 
 ```javascript
@@ -1309,8 +1440,12 @@ text-combine-upright
 Object.keys() 对象自有可枚举的属性
 hasOwnProperty() 对象自有属性
 getOwnPropertyDescriptor()
-defineProperty()
+defineProperty()  value writable enumerable configurable
 使用 in 遍历属性，原型上也会查找
+
+对象属性
+symbol 属性不能被json序列化
+symbol 属性可以删除，configurable:true
 ```
 
 ```js

diff --git a/code/disorder/图片裁剪上传原理.html b/code/disorder/图片裁剪上传原理.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>图片裁剪上传原理</title>
+    <style>
+      img {
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <input type="file" /><br />
+    <img src="" alt="" class="preview" />
+    <script>
+      const input = document.querySelector('input')
+      const preview = document.querySelector('.preview')
+      input.onchange = (e) => {
+        const file = e.target.files[0]
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          preview.src = e.target.result
+        }
+        reader.readAsDataURL(file)
+      }
+
+      // 交互
+
+      // 上传
+      // 获取裁剪后的 file 对象
+      function cut() {
+        const cutInfo = {
+          x: 2000,
+          y: 1000,
+          oWidth: 1000,
+          oHeight: 1000,
+          width: 200,
+          height: 200,
+        }
+        const cvs = document.createElement('canvas')
+        const ctx = cvs.getContext('2d')
+        cvs.width = cutInfo.width
+        cvs.height = cutInfo.height
+        ctx.drawImage(preview, cutInfo.x, cutInfo.y, cutInfo.oWidth, cutInfo.oHeight, 0, 0, cutInfo.width, cutInfo.height)
+        cvs.toBlob((blob) => {
+          const file = new File([blob], 'cut.png', {
+            type: 'image/png',
+          })
+        })
+      }
+    </script>
+  </body>
+</html>
diff --git a/code/disorder/环绕式照片墙.html b/code/disorder/环绕式照片墙.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>环绕式照片墙</title>
+    <link rel="stylesheet" href="./demo.css" />
+    <style>
+      /* @use 'sass:math';
+
+      body {
+        background: #000;
+        perspective: 2000px;
+      }
+
+      .ring {
+        width: 100vw;
+        height: 100vh;
+        transform-style: preserve-3d;
+        transform: rotate(340deg, 20deg); // 改变 y 轴坐标即可以转动
+
+        img {
+          position: absolute;
+          $imgWidth: 300px;
+          $imgHeight: 400px;
+          width: $imgWidth;
+          height: $imgHeight;
+          left: 50%;
+          top: 50%;
+          margin-left: -$imgWidth / 2;
+          margin-top: -$imgHeight / 2;
+          $r: 500px;
+          $n: 10;
+          $pDeg: 360deg / $n;
+          backface-visibility: hidden;
+          opacity: 0.5;
+          transition: opcacity 0.2s;
+          &:hover {
+            opacity: 1;
+          }
+          @for $i from 0 through $n - 1 {
+            &:nth-child(#{$i + 1}) {
+              $deg: $i * $pDeg;
+              $x: math.sin($deg) * $r;
+              $z: math.cos($deg) * $r;
+              transform: translate3d(#{$x}, 0, #{$z}) rotateY(-180deg + $deg);
+            }
+          }
+        }
+      } */
+    </style>
+  </head>
+  <body>
+    <div class="ring">
+      <img src="https:picsum.photos/id/21/400/600/" alt="" />
+      <img src="https:picsum.photos/id/22/400/600/" alt="" />
+      <img src="https:picsum.photos/id/23/400/600/" alt="" />
+      <img src="https:picsum.photos/id/24/400/600/" alt="" />
+      <img src="https:picsum.photos/id/25/400/600/" alt="" />
+      <img src="https:picsum.photos/id/26/400/600/" alt="" />
+      <img src="https:picsum.photos/id/27/400/600/" alt="" />
+      <img src="https:picsum.photos/id/28/400/600/" alt="" />
+      <img src="https:picsum.photos/id/29/400/600/" alt="" />
+      <img src="https:picsum.photos/id/30/400/600/" alt="" />
+    </div>
+  </body>
+</html>
diff --git a/code/disorder/用CSS自定义咖啡.html b/code/disorder/用CSS自定义咖啡.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>CodePen - For The Love Of Coffee</title>
+    <title>CodePen - For The Love Of Coffee用CSS自定义咖啡</title>
     <style>
       @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
       * {