update

.gitignore

@@ -1 +1,3 @@
 node_modules
+test.*
+.vscode

aboutCSS.md

@@ -1,6 +1,8 @@
 # 与 css 相关，多学习 css
 
 ## css inset
+
+- 同时设置上下左右等多个属性值
 - inset : top | right| bottom | left
 - 使用例：
   ```css
@@ -10,8 +12,10 @@
       inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
   }
   ```
+
 ## css 过渡 transition
--   有transition-property、transition-duration、transition-timing-function 和 transition-delay这几个属性，不过一般使用时应该都是用transition合起来写。
+
+- 有 transition-property、transition-duration、transition-timing-function 和 transition-delay 这几个属性，不过一般使用时应该都是用 transition 合起来写。
 - 使用例：
 
   ```css
@@ -25,6 +29,7 @@
   ```
 
 ## css 动画 滚动条驱动
+
 - animation-timeline
 - 有时间再写
 
@@ -192,3 +197,31 @@
       color: green;
   }
   ```
+
+## grid
+
+    ```css
+    .container {
+        display: grid;
+        grid-template-columns: repeat(2, 100px 20px 80px);
+        /* repeat 配合auto-fill/auto-fit 配合minmax 实现自适应布局 */
+        grid-template-columns: 1fr 1fr minmax(100px, 1fr);
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+        /* 先行后列，尽可能填满 */
+        grid-auto-flow: row dense;
+    }
+    .item-1 {
+        /* 边框所对应的网格线 */
+        /* grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 */
+        grid-column-start: 2;
+        grid-column-end: 4;
+        grid-column: 2/4;
+        grid-row: 1/2;
+    }
+    ```
+## point-event
+
+    当为none时，所有点击事件无效
+
+## 

aboutOthers.md

@@ -1,3 +1,101 @@
 # 杂谈 记录一些碎碎念
+
 ---
-npx用来临时使用一个库（如rollup）
+
+npx 用来临时使用一个库（如 rollup）
+
+---
+
+强缓存和协商缓存的 header 参数
+强缓存：
+Expires：过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求
+Cache-Control：当值设为 max-age=300 时，则代表在这个请求正确返回时间（浏览器也会记录下来）的 5 分钟内再次加载资源，就会命中强缓存。
+cache-control：除了该字段外，还有下面几个比较常用的设置值：
+（1） max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒；
+（2） s-maxage：和 max-age 是一样的，不过它只针对代理服务器缓存而言；
+（3）public：指示响应可被任何缓存区缓存；
+（4）private：只能针对个人用户，而不能被代理服务器缓存；
+（5）no-cache：强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到 请求，然后判断资源是否变更，是则返回新内容，否则返回 304，未变更。这个很容易让人产生误解，使人误 以为是响应不被缓存。实际上 Cache-Control: no-cache 是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
+（6）no-store：禁止一切缓存（这个才是响应不被缓存的意思）。
+
+---
+
+mvvm: 
+
+vm: 关注绑定器，将数据和视图绑定，自动更新，低耦合。model仅关注数据更新
+
+---
+
+垃圾回收相关：
+
+window.gc: 手动调用垃圾回收
+
+现代主要使用标记清除法。
+进入执行环境的时候标记上。
+离开环境的时候直接回收。
+
+常见的内存泄漏：
+全局变量，解决方式： 全局变量
+定时器未清除：记得及时清除
+闭包： 解决方式： 及时设置为null
+dom元素删除后未清除： 解决方式： 及时设置为null
+
+栈（Stack）
+特点：栈是一种后进先出（LIFO, Last In First Out）的数据结构。
+
+存储内容：用于存储简单的数据类型（如数字、字符串、布尔值）和函数调用上下文。
+
+内存分配和释放：内存分配和释放非常快速，直接在栈顶操作。函数调用结束后，栈帧自动释放。
+
+作用：主要用于管理函数调用和局部变量。
+
+堆（Heap）
+特点：堆是一种无序的数据结构，用于动态分配内存。
+
+存储内容：用于存储复杂的数据类型（如对象、数组）。
+
+内存分配和释放：内存分配比较灵活，但管理和回收内存需要垃圾回收机制（GC, Garbage Collection）来处理。
+
+作用：用于存储需要动态分配的较大数据块和复杂数据结构。
+
+---
+
+babel相关：
+
+Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
+
+---
+
+es6几个主要的：
+1. let， const
+2. 箭头函数
+3. class
+4. 模板字符串
+5. 解构
+6. 函数传参默认值&rest
+
+---
+
+http响应头请求头
+
+请求头：
+content-type： 请求的数据的类型
+Authorization： 身份验证，如JWT这样的
+UA： 浏览器环境
+
+响应头：
+set-cookie
+content-length
+cache-control
+
+跨域cookie需要服务器进行设置
+
+
+---
+
+SEO优化
+
+1. 大量使用语义化标签
+2. 保证关键词覆盖率，title之类，配置meta信息
+3. 制定一个站点地图，放在“robot.txt”中
+4. 结构化数据

aboutTS.md

@@ -1,18 +1,21 @@
 # 以下是关于 ts（以及任何关于 ts 的不限于语法，技巧之类的学习心得）
 
 ## any unknown void never
+
 - any 表示任意类型。这导致不会对类型进行任何检查，用太多不太好就是了。
--   unknown 表示位置类型。看作any的安全版本。可以赋值为任何类型，但在使用之前必须进行类型检查或类型断言。
+- unknown 表示位置类型。看作 any 的安全版本。可以赋值为任何类型，但在使用之前必须进行类型检查或类型断言。
 - void 代表没有返回值。
 - never 代表永远不会有任何返回值，如死循环或抛出异常。
 
 ## 接口 interface
--   基本可以认为是声明object类型用的东西
+
+- 基本可以认为是声明 object 类型用的东西
 
 ## 泛型 <T>
 
 - 实际上可以理解为是一种类型的变量
 - 如：
+
   ```ts
   function identity<T>(arg: T): T {
       return arg
@@ -35,3 +38,155 @@
   let pair: Pair<string, number> = { first: 'hello', second: 42 }
   console.log(pair) // 输出: { first: 'hello', second: 42 }
   ```
+
+## 箭头函数与普通函数的区别
+
+- 箭头函数没有 yield
+- 无 prototype
+- 没有 this 和 arguments
+
+## 使用 Object.freeze()
+
+- Object.freeze() 可以冻结一个对象，使其不能添加、删除或修改属性。
+
+  ```ts
+  const obj = { key: 'value' };
+  Object.freeze(obj);
+
+  obj.key = 'new value'; // 无效
+  obj.newKey = 'new value'; // 无效
+  delete obj.key; // 无效
+
+  console.log(obj);
+  ```
+
+## 使用 Object.defineProperty()使对象某一 key 其不可变
+
+- Object.defineProperty() 可以定义对象属性，并使其不可变。
+
+  ```ts
+  const obj = {};
+  Object.defineProperty(obj, 'key', {
+  value: 'value',
+  writable: false,
+  configurable: false // 不可配置的
+  });
+
+  obj.key = 'new value'; // 无效
+  delete obj.key; // 无效
+
+  console.log(obj); // 输出: { key: 'value' }
+  ```
+
+## Object.seal()。
+
+- Object.seal() 可以让对象不能添加或删除属性，但允许修改现有属性的值。
+
+  ```ts
+  const obj = { key: 'value' };
+  Object.seal(obj);
+
+  obj.key = 'new value'; // 有效
+  obj.newKey = 'new value'; // 无效
+  delete obj.key; // 无效
+
+  console.log(obj);
+  ```
+
+## 判断是否为数组
+
+- Array.isArray()
+- instanceof Array
+- obj.**proto** === [].**proto**
+
+## 是否为 NaN
+
+- Number.isNaN()
+
+## obj 可迭代
+
+- 实现了迭代器协议（拥有 Symbol.iterator 方法）实现了迭代器协议（拥有 Symbol.iterator 方法）
+
+  ```ts
+  const iterable = {
+    *[Symbol.iterator]() {
+        yield 1;
+        yield 2;
+        yield 3;
+    }
+  }
+  ```
+
+## promise新的
+
+- Promise.race(iterable) 接受一个可迭代对象，返回第一个解决或拒绝的 Promise 的结果。
+- Promise.allSettled(iterable) 接受一个可迭代对象，返回一个 Promise，所有 Promise 无论解决或拒绝都会返回结果。
+- Promise.any(iterable) 接受一个可迭代对象，返回第一个成功解决的 Promise 的结果。如果所有 Promise 都被拒绝，则返回一个拒绝的 Promise。
+
+## deepReadonly
+
+```ts
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]
+}
+
+```
+
+## callable的对象
+
+```ts
+const callableObject = {
+  [Symbol('callable')](...args) {
+    console.log('Object called with args:', ...args);
+    // 执行一些操作并返回结果
+    return args.reduce((sum, val) => sum + val, 0);
+  }
+}
+```
+
+## 异步迭代
+
+```ts
+const asyncIterable = {
+  async *[Symbol.asyncIterator]() {
+    yield await new Promise(resolve => setTimeout(() => resolve(1), 1000));
+    yield await new Promise(resolve => setTimeout(() => resolve(2), 1000));
+    yield await new Promise(resolve => setTimeout(() => resolve(3), 1000));
+  }
+};
+
+(async function() {
+  for await (const value of asyncIterable) {
+    console.log(value); // 输出: 1, 2, 3，每个值之间间隔1秒
+  }
+})
+```
+
+
+---
+
+二进制/文件处理
+
+blob： 一种类文件对象，只能使用fileReader进行异步读取，读取为arrayBuffer
+
+arraybuffer： 一种通用的二进制数据缓冲区，需要通过视图（如uint8array）进行修改
+
+---
+
+关于闭包，有逻辑的回答： 
+
+闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计
+闭包有什么用？
+
+延伸变量作用域范围，读取函数内部的变量
+让这些变量的值始终保持在内存中
+
+简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
+
+---
+
+weakMap
+
+key必须为一个obj
+可以用于给一个obj附加一些生命周期相同的数据内容（如缓存）
+

aboutVUE3.md

@@ -4,7 +4,8 @@
 ---
 # 子子组件之间的通信可以通过事件总线（eventBus）实现
 ---
-# doucument.createElement出来的东西不及时销毁就会一直游离在外面不被释放，积累下来很不好。
+
+# doucument.createElement出来的东西不及时销毁就会一直游离在外面不被释放，积累下来很不好。(似乎是错误的)
 
 
 ---
@@ -12,7 +13,7 @@
 组件设计可以分成业务组件，展示组件，展示组件只负责以对应的形式展示对应的数据，对于业务的处理（如增删查改），则需要通过emit或其他方法交给业务组件处理
 
 ---
-# 路由返回拦截hook
+# 路由返回拦截hook（路由守卫）
 * 当点击返回键（浏览器或者是页面上的路由返回功能）时触发，形式如下：
 ```ts
 import { onBeforeRouteLeave } from 'vue-router'
@@ -27,7 +28,7 @@ onBeforeRouteLeave((to, from, next) => {
   next(true)
 })
 ```
-* 当next(false时，取消路由原有的返回功能)
+* 当next===false时，取消路由原有的返回功能
 ---
 ## 具名作用域插槽
 * 具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到
@@ -83,3 +84,55 @@ example:
   </template>
 </el-popover>
 ```
+
+# 路由相关：
+
+* 路由守卫
+
+- - beforeEach 全局前置守卫
+
+    作用：
+    主要用于在路由跳转前进行权限验证、页面加载状态的设置等操作。例如，判断用户是否已经登录，如果没有登录且要访问需要登录才能访问的页面，就可以将用户重定向到登录页面。
+    它可以对每一次路由跳转进行全局拦截，是控制路由访问权限的重要手段。
+
+- - afterEach全局后置守卫
+  
+    作用：
+    它在路由跳转完成后被调用，主要用于记录页面访问历史、修改页面标题或者进行一些不需要阻塞路由跳转的操作。
+    例如，根据不同的路由来更新文档的标题，或者发送页面访问统计数据到服务器。
+
+- - 全局解析守卫（beforeResolve）的触发时机
+
+    全局解析守卫beforeResolve在路由导航被触发后，在所有组件内守卫和异步路由组件被解析之前调用。它是在beforeEach之后，但是在组件实例创建和beforeRouteEnter等组件内守卫之前执行。这意味着它处于路由导航过程的一个中间阶段，此时路由已经被匹配，但组件还没有完全解析和进入。
+    主要作用
+    数据预获取：
+    可以用于获取组件渲染所需的数据。与beforeEach不同的是，beforeResolve更专注于确保在组件真正开始渲染之前，所有必要的数据都已经获取并准备好。例如，对于一个包含多个嵌套组件的复杂页面，其中每个组件都需要从服务器获取数据，beforeResolve可以协调这些数据获取操作，确保所有数据都准备好后再进行组件渲染。
+    处理异步操作的集中点：
+    它为处理整个路由导航过程中的异步操作提供了一个集中的位置。在大型应用中，可能会有多个异步操作需要在路由跳转时完成，如加载第三方脚本、初始化插件等。beforeResolve可以用于确保这些异步操作都顺利完成后再继续路由解析过程。
+
+- - 组件路由守卫
+```vue
+<script setup>
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { ref } from 'vue'
+
+// 与 beforeRouteLeave 相同，无法访问 `this`
+onBeforeRouteLeave((to, from) => {
+  const answer = window.confirm(
+    'Do you really want to leave? you have unsaved changes!'
+  )
+  // 取消导航并停留在同一页面上
+  if (!answer) return false
+})
+
+const userData = ref()
+
+// 与 beforeRouteUpdate 相同，无法访问 `this`
+onBeforeRouteUpdate(async (to, from) => {
+  //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
+  if (to.params.id !== from.params.id) {
+    userData.value = await fetchUser(to.params.id)
+  }
+})
+</script>
+```

杂项/ResizeObserverComponent.md

@@ -0,0 +1,86 @@
+```ts
+import {
+  defineComponent,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  h,
+  getCurrentInstance,
+  type PropType,
+} from 'vue-demi'
+import ResizeObserver from './ResizeObserver'
+import type { IOptions } from './types'
+
+
+// const component = {
+//   name: 'Home',
+//   props:{
+//     data: String,
+//   },
+//   setup（props, context）{
+//     // props.data
+//     // context.attrs    context.slots    context.emit 
+//   }
+// }
+
+export default defineComponent({
+  name: 'ResizeObserverComponent',
+  props: {
+    target: [String, Object] as PropType<string | HTMLElement>,
+    disabled: Boolean as PropType<boolean>,
+    immediate: Boolean as PropType<boolean>,
+    delay: {
+      type: Number as PropType<number>,
+      default: 150
+    }
+  },
+  setup(props, { slots }) {
+    let ro: ResizeObserver | null = null
+    watch(() => props.disabled, (val) => {
+      if (val) {
+        ro?.disconnect()
+      } else {
+        ro?.observe()
+      }
+    })
+    onMounted(() => {
+      // const { target, disabled, limiter, wait } = toRefs(props)
+      // 拿到当前组件的实例（注意已挂载）
+      const vm = getCurrentInstance()?.proxy
+
+      // 先用$el
+      let $el: HTMLElement = vm?.$el as HTMLElement
+
+      if (props.target) {
+        if (typeof props.target === 'string') {
+          $el = document.querySelector(props.target) as HTMLElement
+        } else if (props.target instanceof HTMLElement) {
+          $el = props.target
+        }
+      }
+      const options: IOptions = {
+        delay: props.delay,
+        immediate: props.immediate,
+        resize: (data, elem) => {
+          vm?.$emit('resize', data, elem)
+        }
+      }
+      ro = new ResizeObserver($el, options)
+    })
+    // 销毁 ResizeObserver实例
+    onBeforeUnmount(() => {
+      if (ro) {
+        ro.destroy()
+      }
+    })
+    
+    // 如果有单个子元素则直接渲染子元素
+    const defaultContent = slots.default?.()
+    return () => (
+      (defaultContent && defaultContent.length === 1)
+        ? defaultContent[0]
+        : h('div', defaultContent)
+    )
+  }
+})
+```