Mar. 2023 ​

1 st ​

前端 ​

• Fine-Grained Reactivity

  Signal

  反應系統中最主要的部分。
  由 getter、setter 和 value 所組成。
  儘管在學術論文中經常被稱為 Signal，但它們也被稱為 Observables, Atoms, Subjects 或 Refs。

  Reactions

  被稱為 Effects, Autoruns, Watches 或 Computeds，它們觀察 Signal，每次其值更新時重新運行。
  每當 Signal 被執行（發送 Signal），wrapping function 就會偵測到並自動訂閱它。

  這就是所有我們需要實現 Fine-Grained Reactivity 的元件。
  Signal 和 Reaction（被觀察者和觀察者）。

  Derivations

  時常需要以不同的方式表示數據，並在多個 Reaction 中使用相同的 Signal。
  可以在 Reaction 中編寫這些邏輯，甚至提取一個輔助函式。
  但有時候計算衍生值的成本很高，重複做這些工作並不好。
  因此，我們有第三個基本原始元件，類似於函式備忘錄，可以將中間計算的結果存成它們自己的 Signal。
  這些被稱為 Derivations，但也被稱為 Memos, Computeds, Pure Computeds 等。

  ⋯ Reference

套件 ​

• chokidar

  封裝 Node.js 監控文件系統文件變化功能的套件。

2 nd ​

問題 ​

• 透過字串路徑取得物件資料

  javascript

  const data = {
    id: 1,
    detail: {
      img: "the-img",
      img2: "the-img2"
    }
  }
  
  const name = "detail.img"

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

  方法一：new Function()

  javascript

  new Function(`return data.${name}`)() // "the-img"

  1
  

  new Function() 實際上是透過運行時藉由參數傳遞過來的字串所創建，因此它允許我們將任意字串變為函式。

  方法二：Lodash 的 get

  javascript

  import _ from "lodash"
  
  const img = _.get(data, name) // "the-img"

  1
  2
  3
  

6 th ​

工具 ​

• Babel

  使用最新版本的 JavaScript 編寫程式碼的工具。
  當環境本身不支援某些特性時，Babel 會幫助將這些特性編譯成可支援的版本。

• gulp

  主要使用它構建自動化工作流程，Gulp 可以編譯 Sass、編譯 JavaScript 語法至相容性較高的 ES5、圖片優化壓縮、打包程式碼等等的事情。
  Gulp 是一個開源 Task runner，建構於 nodejs 與 npm 上，基於 Stream 方式自動化整合套件的方式從 Source 進行每一個 Task，最後到達 Destination。

• Broccoli

  用來快速構建項目的工具，可以用它對檔案進行混淆與壓縮，還可以透過其他的 Broccoli 相關套件完成許多功能。

7 th ​

套件 ​

• FZF

  是使用 Go 構建的基於命令行的模糊查找器。
  模糊查找器可以輸入要查找的字串中出現的幾個字符，並從字串列表（或物件）中快速獲取該字串（或物件）。

• esno

  基於 esbuild 的 TS / ESNext node 執行時，會針對不同的模組化標準，採用不同的方案。

• immer

  小型套件，可以以更方便的方式使用不可變（immutable）的狀態。
  透過對當前的狀態進行修改，創建下一個不可變的狀態。

• XState

  狀態管理（State Management）的 Library，負責儲存及描述各種狀態與各種狀態間的轉換，整個核心都源自於 Statecharts。
  需要定義好整個應用程式會有哪些狀態，和每個狀態下能轉換到哪些狀態（順序性）以及它們之間如何轉換。

  ⋯ Reference

9 th ​

Vue ​

• Computed Debugging

  當 reactive 屬性或 ref 作為依賴被當前的 computed 第一次追蹤時，將會觸發 onTrack。
  當依賴的變更觸發了 watcher 時，將會觸發 onTrigger。
  

10 th ​

JS ​

• 自動化腳本：更改檔名

前端 ​

• i18n（internationalization 國際化）

  透過設計和開發可適應多種語言和文化的軟體產品和服務的方法。
  i18n 通常涉及在網站或應用程式中使用多語言字串、日期、貨幣格式等，以及在使用者介面中提供多語言支援。
  常見的前端 i18n 套件包括 react-i18next、vue-i18n、Angular i18n 等。

12 nd ​

JS ​

• Object.assign(target, ...sources)

  將所有可枚舉（enumerable）屬性的值從一個或多個 source object 分配到 target object，並回傳 target object。

  1. source object 屬性與 target object 屬性不同，則會被拷貝到 target object 中。
  2. 如果 target object 和 source object 有相同的屬性，target object 的屬性值會被 source object 的屬性值覆蓋掉。
  3. 如果有多個 source object 有相同的屬性，那麼 target object 的屬性將會被最後一個 source object 屬性覆蓋。

  注意

  • 原本傳入的 target object 會被改動到！
  • 繼承屬性和不可枚舉屬性不能拷貝。

• 非破壞性 methods

  ！不會改變原陣列，而是回傳原陣列操作後的拷貝！

  1. toReversed().reverse() 的非破壞性版本。
  2. toSorted().sort() 的非破壞性版本。
  3. toSpliced().splice() 的非破壞性版本，回傳原陣列變更後的版本，因此無法取得被刪除的元素。
  4. with(index, value) 對應 splice(index, 1, value)，用來將指定位置的成員替換為新的值。

• at()

  可將一個整數作為參數，回傳對應位置的值，並且支援負的 index。

  js

  const arr = [5, 12, 8, 130, 44]
  arr.at(2) // 8
  arr.at(-2) // 130

  1
  2
  3
  

• Array.of()

  可將一組值轉換為陣列。

  js

  Array.of(1, 2, true, {}, [5, 6], 'a')
  // [1, 2, true, {}, [5, 6], 'a']

  1
  2
  

13 rd ​

JS ​

• Generator Function

  1. function*

  函式內部使用 yield 語句，定義不同的內部狀態。

  2. 執行 Generator 函式的方法和一般函式一樣，只需要在函式後面加上 () 括號。

  不同的是，呼叫 Generator 函式後，該函式並不執行，回傳的也不是函式運行結果，而是一個指向內部狀態的指針物件，這個指針物件實際上是一個 JavaScript 疊代器。

  3. 呼叫疊代器物件的 next()，使得指針移向下一個狀態。

  每次呼叫 next 方法，內部指針就從函式頭部或上一次停下來的地方開始執行，直到遇到下一個 yield 語句（或 return 語句）為止。
  換言之，Generator 函式是分段執行的，yield 語句是暫停執行的標記，而 next() 可以恢復執行。

  yield

  • 本身沒有回傳值，或者說總是回傳 undefined。
  • next() 可以帶一個參數，該參數就會被當作上一個在 generator 中 yield 語句的回傳值。 （由於 next 方法的參數表示上一個 yield 語句的返回值，所以第一次使用 next() 時不能帶有參數）
  • 如果用在一個表達式之中，必須放在括號裡面 e.g. (yield 123)。

  for...of

  • 自動疊代 Generator 函式時生成的 Iterator 物件，且此時不再需要特別呼叫 next()。
  • 一旦 next() 方法的回傳物件的 done 屬性為 true 時，for...of 就會中止，且不包含該回傳物件。

  ⋯ Reference

• as const

  將一個表達式的型別轉換為它的字面量型別（literal type）。
  對於由字面值構成的物件和陣列，可以將型別轉換為唯讀的物件型別（readonly object type）或唯讀的陣列型別（readonly array type）。
  

• Symbol.iterator

  可迭代物件（iterable object）具有 Symbol.iterator 的屬性，會回傳迭代器物件。

  javascript

  const arr = [1, 2, 3]
  const iterator = arr[Symbol.iterator]() // Array Iterator {}

  1
  2
  

  利用 next() 手動迭代。

  javascript

  iterator.next() // { value: 1, done: false }
  iterator.next() // { value: 2, done: false }
  iterator.next() // { value: 3, done: false }
  iterator.next() // {value: undefined, done: true}

  1
  2
  3
  4
  

  [...iterator] 會取得 value 組成的陣列。

  javascript

  iterator.next() // { value: 1, done: false }
  const a = [...iterator] // [2, 3]

  1
  2
  

14 th ​

套件 ​

• vue-chemistry

  純粹響應式的 reactified JavaScript 函式庫。

JS ​

• Optional Chaining ?.

  可用來訪問物件的屬性或 callback function。
  如果使用 ?. 訪問的物件或呼叫的函式是 undefined 或 null，表達式會短路並且評估為 undefined，而不是拋出錯誤。

15 th ​

JS ​

• Throttling（節流）

  限制一個函式在一段時間內只能被調用一次的行為。
  例如，如果我們透過 500 毫秒進行限流，這表示在 500ms 的時間框架內不能被調用超過一次，此時任何額外函式調用都會被忽略。
  參考套件：lodash.throttle、_.throttle。

  throttle 函式的常見用例：

  1. 任何視窗調整大小後的一致 UI 更新
  2. Server 或客戶端上的性能密集型操作

• Debouncing（防抖）

  最後一次被調用後經過 N 個時間單位後才會被調用。
  它對看似已經解決的狀態作出反應，並表示事件和處理程序函式調用之間存在延遲。
  參考套件：lodash.debounce、_.debounce 需要最終對頻繁事件做出反應時，就可以使用 debounce。不需要中間狀態並且希望對事件的最終狀態做出反應時，Debounce 是很有用的。
  儘管如此，在使用 debounce 時，仍需要考慮事件和對其作出反應之間的不可避免的延遲。

  debounce 函式的常見用例：

  1. 異步搜索建議
  2. Server 上的更新批次處理

⋯ Reference

17 th ​

• Next.js

  構建於 Node.js 之上的開源 Web 開發框架，支援基於 React 的 Web 應用程序功能，例如 Server 端渲染和生成靜態網站。

• Nuxt.js

  基於 Vue 的通用應用框架，預設了利用 Vue 開發 SSR 的應用所需要的各種配置，更加注重 SEO 和性能等方面，提供了許多額外的功能和工具。

• Nest.js

  用於構建高效、可擴展 Node.js 服務端應用程序的框架。
  使用 TypeScript 構建的並且完全支援 TypeScript（仍可以使用純 JavaScript 編寫），並結合了 OOP、FP、FRP 的元素。

⋯ Reference

18 th ​

函式庫 ​

• Underscore.js

  提供了許多有用的函式輔助工具，而且不會擴展任何內建的物件。

VSCode Extension ​

• vscode-better-folding

  提供了許多改良過的常見程式碼折疊相關功能。

後端框架 ​

• Laravel

  主要用於開發 Web 應用程序的後端。
  提供了豐富的功能和工具，例如路由、模型、資料庫遷移、樣板引擎等等，可以讓開發者更快速地建立強大且高效的 Web 應用程序。

  PHP 框架

  一種用 PHP 編寫的軟體框架，用於支援 Web 應用程式的開發。

20 th ​

套件 ​

• PortalVue

  可以在文件中的任何位置渲染組件的模板或部分內容，甚至可以在 Vue App 無法控制的部分外呈現。
  （有分成 Vue3 文件及 Vue2 文件）

  Teleport

  在 Vue3 中大多時候內建的 Teleport 即可完成。

語言服務器（Language Server） ​

通常包含語法分析、程式碼分析、檢查和修復錯誤、自動完成、重構和重命名、跳轉到定義、查找引用、程式碼格式化等等。
這些服務可以幫助開發人員提高效率，減少錯誤並改善程式設計體驗。

• Vetur

  專門為 Vue.js 開發人員設計的 VSCode 插件。
  作為 vue2.x 的配套，主要用於對 vue 檔案元件提供 Syntax highlighting、Syntax support 以及 Syntax checking。

• Volar

  取代 Vetur 的新版本。
  架構支援任何涉及嵌入式語言的檔案格式——不僅是 Vue，還包括 Astro、Svelte，甚至 Angular。
  能夠實現常規的單語言 LSP servers，例如 TypeScript、CSS 和 HTML。
  另外可以最大限度地減少實現原生嵌入式語言服務效能的開銷。

⋯ Reference
⋯ Reference

IDE ​

• WebStorm

  針對 JS 和相關技術的整合開發環境（IDE）。 幫助開發體驗更加舒適，自動化例行工作並輔助處理複雜任務。

21 st ​

套件 ​

• Zodios

  REST API 工具箱，提供了端到端的型別安全機制。
  可以透過一個簡潔、直覺、聲明式的語法來建立 REST API。

• Mitt

  輕量的事件發布（pub）與訂閱（sub）的函式庫，用於在 JavaScript 中處理事件。
  與原生的事件（event）相比，mitt 提供了更好的性能和更豐富的 API。
  可以使用它在應用程式中創建自定義事件，然後在各個地方進行發布和訂閱，這樣就可以實現更好的解耦和更簡潔的程式碼。

22 nd ​

Vueuse ​

• useTextareaAutosize

  創建一個可以根據內容自動更新輸入區域高度的 textarea。

25 th ​

套件 ​

• pinia-plugin-persistedstate

  用於 Pinia 狀態管理庫的 plugin，提供 Pinia 儲存的持久性，使得當前的 Pinia store 在頁面刷新或重新載入後不會丟失數據。
  可以在不同的儲存器（localStorage、sessionStorage、、cookie、server 端）中保存和恢復應用程式的狀態。

Nuxt3 ​

• useFetch

  使用 useFetch 或 useLazyFetch 預設會自動 watch body 的值，所以 body 一更動將會直接送 Request 出去。
  為了到前端再送 Request，可以加上 server: false（避免在後端先送過 request）和 immediate: false（避免在一開始就先送 request）。

  typescript

  const { pending, data, execute } = useLazyAsyncData(
    'requestKey',
    () => $fetch('/api', {
      body: { /* ... */ },
      header: [['key', value]],
      method: 'POST'
    }), {
      server: false,
      immediate: false,
    }
  )

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  

  可以使用 execute() 去決定何時要送 request。
  

  WARNING

  另外，requestKey 這項參數是用來預防前後端重複打 API 的問題。
  如果沒有指定 requestKey 這項參數的話，預設會用檔案名稱和行號作為 key，也可能會遇到同一隻 useAsyncData 送多個 request 造成回傳結果覆蓋的情況。

27 th ​

工具 ​

• Jest

  JavaScript 測試框架。

Vue ​

• defineProps

  1. Runtime Declaration

  typescript

  const props = defineProps({
    variable: {
      type: string,
      default: 'abc',
      required: true,
    }
  })

  1
  2
  3
  4
  5
  6
  7
  

  只能設定參數 type、default、required、validator。
  報錯為主控台 warn 警告。

  2. Type Declaration

  typescript

  const props = defineProps<{
    variable: string
    option?: 'abc' | 'def'
  }>()

  1
  2
  3
  4
  

  只能設定 required 和參數 type。
  報錯為主控台 warn 警告，還有編輯器報錯功能，並提供編輯器程式碼提示。

• withDefaults

  typescript

  interface Props {
    variable: 'string'
    option?: 'abc' | 'def'
    labels?: string[]
    obj?: { a: number }
  }
  
  const props = withDefaults(defineProps<Props>(), {
    option: 'abc',
    labels: () => ['one', 'two'],
    obj: () => { return { a: 2 } }
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  

  增加了設定 prop 預設值的功能。
  另外要注意的是，預設值為引用類型的需要寫成 getter 形式。

⋯ Reference

29 th ​

Hosting Service ​

• vercel

  類似於 GitHub Page，但速度快許多，而且將 Github 授權給 vercel 後，只需將程式碼輕輕一推，專案將會自動更新部署。
  除此之外，vercel 支援部署 serverless 介面，因此不僅可以部署靜態網站，部署動態網站也沒問題。

• netlify

  提供靜態網站 hosting 的服務。

Bass（Backend as Service） ​

• Firebase

  提供豐富的後端服務，讓 Web、APP 開發者能夠更專注在產品本身的開發上。

⋯ Reference

30 th ​

VueUse ​

• useIntersectionObserver

  偵測目標元件（target）的可見性。

• useShare

  響應式的 Web Share API，瀏覽器提供可以分享文字或文件內容的功能。

函式庫 ​

• Vue Macros

  實現 Vue 框架中尚未官方實現的建議或想法的庫。
  將探索並擴展更多功能和語法糖到 Vue 中。

31 st ​

VSCode Extension ​

• starter-vscode

  VS Code extension Template。

• vscode-extension-samples

  包含 VSCode extension API 的範例程式碼。
  每個範例都是一個獨立的 extension，解釋了 VSCode API 或 VS Code Contribution Points 中的主題。

Web APIs ​

• Web Share API

  允許網站將文字、連結、檔案和其他內容分享到使用者選擇的分享目標，利用底層操作系統的分享機制。
  這些分享目標通常包括：系統剪貼簿、電子郵件、聯絡人、訊息應用程式以及藍牙或 Wi-Fi。

  • navigator.canShare() 驗證數據是否可「分享」。
    回傳一個 boolean 值，表示指定的資料是否可以進行分享。
  • navigator.share() 進行發送。
    回傳一個 Promise 物件，如果傳遞的資料成功傳送到分享目標，則解析該 Promise。

  WARNING

  此函式必須在按鈕點擊或其他使用者啟動事件上被呼叫。