預覽圖-JS 筆記#13 - JavaScript 與瀏覽器
#javascript#Eloquent JavaScript 學習筆記系列
預覽圖-JS 筆記#12 - 創造一個程式語言 Egg
#javascript#Eloquent JavaScript 學習筆記系列
預覽圖-JS 筆記#11 - 認識同步與非同步 | callback、Promise 和async/await
#javascript#Eloquent JavaScript 學習筆記系列
預覽圖-JavaScript Unicode 字串處理指南
#javascript
預覽圖-JS 筆記#10 - 模組 | Chapter 10 Modules
#javascript#Eloquent JavaScript 學習筆記系列
預覽圖-JS 筆記#09 - 正則表達式 | Chapter 9 Regular Expressions
#javascript#Eloquent JavaScript 學習筆記系列
預覽圖-JavaScript Date 日期與時間的基礎使用指南
#javascript
預覽圖-JS 筆記#08 - 程式錯誤 | Chapter 8 Bugs and Errors
#javascript#Eloquent JavaScript 學習筆記系列
預覽圖-JS 筆記#07 - 專案練習 | Chapter 7 Project - A Robot
#javascript#Eloquent JavaScript 學習筆記系列

關於我

瓜熊

你好，我是瓜熊，熱愛研究新鮮的東西。

最新文章

最新筆記

#javascript

簡單解釋 JavaScript Generator

JavaScript Generator 是一種特殊的函數，允許函數在執行過程中暫停並恢復。

  1. 定義方式：在 function 關鍵字後面加上星號 （function*）。
  2. 返回值：Generator 函數返回一個迭代器。
  3. 暫停與恢復：透過 yield 關鍵字，Generator 可以暫停執行，並返回一個值；後續可以透過迭代器的 next() 方法繼續執行。
javascript
function* powers(n) {
  for (let current = n;; current *= n) { // 從 n 開始，每次乘以 n
    yield current; // 暫停函數，並返回當前的值
  }
}

for (let power of powers(3)) { // 使用 for...of 迭代生成器
  if (power > 50) break; // 當值超過 50 時停止迴圈
  console.log(power); // 輸出當前的值
}
// → 3
// → 9
// → 27

參考資料：Generators - Eloquent JavaScript 4th edition (2024)

2025-02-26
展開全部
#javascript

try-catch-finally，如果執行 catch，還會執行 finally 嗎？

try-catch-finally 執行流程：

Try-Catch-Finally執行流程圖

文字版流程
javascript
function test(num) {
  // num === 1：return 101
  // num !== 1：return 202
  try {
    if (num === 1) {
      return (num += 100);
    } else {
      throw new Error('num is not 1');
    }
  } catch (e) {
    return (num += 200);
  }
  finally {
    console.log(num);  // 會先執行 try 或 catch 的 return 表達式，再執行 finally，最後 return
    //  → 101，if num === 1
    //  → 202，if num !== 1
  }
}

console.log(test(1));  // → 101
console.log(test(2));  // → 202

結論： finally 永遠會執行

2025-01-13
展開全部
#Nuxt#Nuxt Content

調整 Nuxt Content 渲染的標籤樣式

可以在專案目錄中建立一個同名元件，路徑預設為components/content/，如：components/content/ProseA.vue，用來修改以下語法：

markdowncontent/article.md
[Link](/components/prose)

然後參考 Source進行修改：

vue-htmlcomponents/content/ProseA.vue
<template>
  <NuxtLink :href="props.href" :target="props.target">
    <slot />
  </NuxtLink>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  href: {
    type: String,
    default: ''
  },
  target: {
    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
    default: undefined,
    required: false
  }
})
</script>

參考資料：Prose Components

2024-12-20
展開全部
#html#安全性

理解 noopener 與 noreferrer 的差異

設置 target="_blank" 時，點擊連結會在新視窗或分頁中打開連結，但這也會導致新窗口或分頁能夠通過 window.opener 訪問原本的頁面。

html
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<a href="https://example.com" target="_blank" rel="noreferrer">Example</a>

簡單對比

屬性阻止 window.opener不傳 HTTP 參照標頭
noopener✔︎✖︎
noreferrer✔︎✔︎
2024-12-16
展開全部
#git

簡易 Github 上傳流程

  1. 到 GitHub 上創建一個新的儲存庫（repository）
  2. 將現有專案連結到 GitHub： 如果你的專案已經存在本地，打開終端機，執行以下指令：
bash
  # 進入專案目錄
  cd path/to/your-project

  # 初始化 Git
  git init

  # 將本地專案與 GitHub 儲存庫連結
  git remote add origin https://github.com/your-github-account/your-project.git

  # 添加所有檔案
  git add .

  # 第一次提交
  git commit -m 'Initial commit'

  # 推送到 GitHub main 分支
  git branch -M main
  git push -u origin main
2024-12-16
展開全部