content: add ts-fullstack note

package.json

@@ -19,7 +19,9 @@
     "@islands/headings": "^0.8.2",
     "@islands/images": "^0.8.2",
     "@islands/prism": "^0.8.0",
+    "@types/lodash": "^4.17.7",
     "@vueuse/core": "^10.4.1",
+    "lodash": "^4.17.21",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.0",
     "rehype-plugin-image-native-lazy-loading": "^1.2.0",

src/components/FunctionButtons.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import _ from 'lodash'
 
 function toTop() {
   window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -21,7 +22,7 @@ onMounted(() => {
       b.value?.addEventListener('click', () => {
         aside.classList.toggle('toc-slide-down')
       })
-      window.addEventListener('scroll', () => {
+      const scrollHandler = () => {
         if (!isElementInViewport(toc)) {
           a.value?.classList.add('btn-slide-up')
         }
@@ -31,7 +32,9 @@ onMounted(() => {
             aside.classList.remove('toc-slide-down')
           }, 1000)
         }
-      })
+      }
+      const debounced = _.debounce(scrollHandler, 80)
+      window.addEventListener('scroll', debounced)
     }
   }
 })

src/components/LikeButton.vue

@@ -10,8 +10,10 @@ const props = defineProps({
 const data: Ref<ContextDataType | null> = ref(null)
 const likes = ref(0)
 const liked = ref(-1)
+const isLoading = ref(false)
 
 async function handleLike() {
+  isLoading.value = true
   if (liked.value === 1) {
     // eslint-disable-next-line no-alert
     alert('You have already liked this post')
@@ -25,6 +27,7 @@ async function handleLike() {
     // eslint-disable-next-line no-alert
     alert('You have already liked this post')
   }
+  isLoading.value = false
 }
 
 onMounted(async () => {
@@ -39,12 +42,12 @@ onMounted(async () => {
 
 <template>
   <!-- https://codepen.io/aaroniker/pen/NWqRRLq -->
-  <div role="button" class="float-right mr-10 hover flex rounded-sm w-[80px] h-[35px] border-[1px] dark:border-white border-zinc-600 items-center px-1 hover:bg-red-200" @click="handleLike">
+  <button :disabled="isLoading" class="px-2 disabled:animate-pulse float-right mr-10 hover flex rounded-sm w-[80px] h-[35px] border-[1px] dark:border-white border-zinc-600 items-center px-1 hover:bg-red-200" @click="handleLike">
     <div class="w-3/4 text-center">
       Like
     </div>
     <div class="w-1/4">
       {{ likes }}
     </div>
-  </div>
+  </button>
 </template>

src/pages/post/full_stack_note.mdx

@@ -0,0 +1,80 @@
+---
+title: Typescript 全栈学习笔记
+date: 2024-08-10 15:39:07
+tags: ["note",]
+licensed: true
+isAIGenerated: false
+cover: ""
+draft: false
+---
+
+这里记一些容易忘掉的内容，之前都是放在 tg 上，但是存不了多久。
+
+<Excerpt />
+
+## Lodash 库之防抖和节流
+
+ref: https://css-tricks.com/debouncing-throttling-explained-examples/
+
+### 防抖
+
+
+防抖保证了函数在一段时间内不会连续地发生, (https://www.lodashjs.com/docs/lodash.debounce/)
+
+```ts
+import _ from "lodash";
+...
+// 返回一个防抖函数
+const debounced = _.debounce(eventHandler, 250, { 'maxWait': 1000 });
+// 调用防抖函数
+addEventListener('event', debounced);
+// 取消防抖
+debounced.cancel();
+```
+
+接受三个参数：
+1. 要防抖的函数
+2. 延迟时间 wait(ms)
+3. 
+
+```json
+{
+    leading: Boolean,
+    trailing: Boolean,
+    maxWait: number, // func 允许被延迟的最大值 (ms)
+}
+```
+
+1. leading
+
+![leading](~/images/full_stack_note/leading_debounce.png)
+
+2. trailing
+
+![trailing](~/images/full_stack_note/trailing_debounce.png)
+
+### 节流
+
+节流 throttle 函数是使用 _.debounce 和 maxWait 定义的。保证函数在一段时间内不会连续地发生，但延迟不超过 maxWait 毫秒。
+(https://www.lodashjs.com/docs/lodash.throttle)
+
+```ts
+import _ from "lodash";
+...
+// 返回一个节流函数
+const throttled = _.throttle(eventHandler, 250, {'leading': false, 'trailing': true});
+// 调用节流函数
+addEventListener('event', throttled);
+// 取消节流
+throttled.cancel();
+```
+
+### requestAnimationFrame
+
+它可以被认为是 `_.throttle(dosomething, 16)`, 在每次浏览器渲染时调用 dosomething 函数，使动画更加流畅。
+
+composale: https://vueuse.nodejs.cn/core/useRafFn/
+
+MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
+
+应用: https://github.com/antfu/antfu.me/blob/f7d66d0076677712f82022fe644135a0cb9eb926/src/components/ArtPlum.vue#L110

src/pages/search.vue

@@ -6,7 +6,7 @@ fetch('/fuse/data.json').then((fresponse) => {
   return fresponse.json()
 }).then((list) => {
   const fuse = new Fuse(list, fuseOptions)
-  document.getElementById('searchForm').addEventListener('submit', (event) => {
+  const searchHandler = (event) => {
     event.preventDefault()
     const searchPattern = document.getElementById('searchBox').value
     const consults = fuse.search(searchPattern)
@@ -31,26 +31,24 @@ fetch('/fuse/data.json').then((fresponse) => {
       if (!hasDiff)
         processedContent = ''
       else processedContent = `<div class="px-4 break-all h-[100px] overflow-hidden text-ellipsis">${processedContent}</div>`
-      injectHtml += `\n<li class="w-full text-minor-link px-3 py-1" role="button"><a href="/post/${consult.item.pathName.replace('.mdx', '')}" class="w-full">${counter} - <span class="underline">${processedTitle}</span></a></li>${processedContent}`
+      injectHtml += `\n<li class="w-full text-minor-link px-3 py-1" role="button"><a href="/post/${consult.item.pathName.replace('.mdx', '').toLowerCase()}" class="w-full">${counter} - <span class="underline">${processedTitle}</span></a></li>${processedContent}`
       counter++
     })
     container.innerHTML = injectHtml.trim() === '' ? '暂无内容' : injectHtml
-  })
+  }
+  document.getElementById('searchForm').addEventListener('submit', searchHandler)
 })
 </script>
 
 <template layout="base">
   <div class="holder w-full min-h-[500px] p-8">
     <form id="searchForm" class="w-full mx-auto">
-      <label
-        for="default-search"
-        class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
-      >Search</label>
+      <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
       <div class="relative">
         <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
           <svg
-            class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"
+            class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+            fill="none" viewBox="0 0 20 20"
           >
             <path stroke="currentColor" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
           </svg>
@@ -86,8 +84,6 @@ fetch('/fuse/data.json').then((fresponse) => {
   <!-- tailwind -->
   <div class="hidden px-4 break-all h-[100px] overflow-hidden text-ellipsis" />
   <li class="hidden w-full text-minor-link px-3 py-1" role="button">
-    <a class="w-full"><span
-      class="underline"
-    /></a>
+    <a class="w-full"><span class="underline" /></a>
   </li>
 </template>