發表文章

目前顯示的是 9月, 2025的文章

_ 占位符

 你問到了一個在現代 JavaScript 中非常常見且實用的語法習慣! 簡單的答案是: _ (底線) 在這裡是一個「佔位符」,用來告訴閱讀程式碼的人(以及程式碼檢查工具):「我在這裡需要一個參數,但我完全不會用到它,所以我就忽略它了。」 詳細解釋 讓我們來分解 Array.from({ length: 24 }, (_, i) => { ... }) 這段程式碼: Array.from(arrayLike, mapFn) : Array.from 是一個靜態方法,可以用來從一個「類陣列物件」(array-like object) 或「可迭代物件」(iterable object) 創建一個新的、真正的陣列。 它接受第二個可選參數 mapFn ,這是一個映射函式 (map function)。 Array.from 會對創建的新陣列中的 每一個元素 都執行一次這個函式,並用函式的回傳值來替換該元素。 { length: 24 } : 這是一個「類陣列物件」。它不是一個真正的陣列,但它有一個 length 屬性,所以 Array.from 知道要創建一個包含 24 個元素的陣列。 在這一刻,這個新創建的陣列是 [undefined, undefined, ..., undefined] (總共 24 個)。 (_, i) => ${String(i).padStart(2, '0')}:00`` : 這就是那個 mapFn 映射函式。 Array.from 在遍歷那個長度為 24 的新陣列時,會為每個位置呼叫這個函式。 這個映射函式會接收 兩個參數 : 第一個參數 :是陣列中 當前元素的值 。因為我們的陣列是 [undefined, undefined, ...] ,所以這個參數 永遠都是 undefined 。 第二個參數 :是陣列中 當前元素的索引 (index),從 0 到 23 。 這就是 _ 出場的地方: 我們在程式碼邏輯中, 只需要 用到第二個參數 i (索引),來產生 '00:00' , '01:00' , '02:00' ... 這樣的字串。 我們 完全不需要 用到第一個參數(那個永遠是 undefined 的值)。 為了讓程式碼更清晰,我們不使用像...

完全解析 JavaScript import、export

  https://www.casper.tw/development/2020/03/25/import-export/

blogger的代碼圍欄

  //在這裏輸入程式碼

JavaScript 模組 (ES Modules)

你問到了一個非常核心的現代 JavaScript 開發問題!將功能拆分成獨立的  .js  檔案,然後在需要的地方引入,這正是  JavaScript 模組 (ES Modules)  的標準作法。 是的,你完全可以這麼做,而且這是   強烈推薦   的最佳實踐。 步驟 1:準備你的專案檔案結構 首先,為了保持專案整潔,我們建議建立一個  lib   或  vendor   資料夾來存放像 Day.js 這樣的第三方函式庫。 下載 Day.js   : 前往  Day.js 官網   或直接從 CDN 連結下載  dayjs.min.js   檔案。 建立檔案結構   : 你的專案資料夾看起來應該像這樣: your - extension / ├── lib / │ └── dayjs.min.js < -- 把下載的檔案放在這裡 ├── popup.html ├── popup.js < -- 你的主要邏輯檔案 ├── date - formatter.js < -- 我們要創建的新模組檔案 └── manifest.json 步驟 2:創建你的模組檔案 (   date-formatter.js   ) 這個檔案的職責很單純:引入  dayjs   ,然後擴充  Date.prototype   。 date-formatter.js JavaScript // 1. 從你的本地檔案中引入 dayjs 模組 import dayjs from './lib/dayjs.min.js' ; // 2. 擴充 Date.prototype (你的原始程式碼) // 這個檔案不需要 "export" 任何東西,因為它的目的就是執行一次, // 產生一個「副作用 (side effect)」——也就是修改全域的 Date.prototype。 Date .prototype.toCustomFormatString = function ( templa...
  在CSS 中宣告變數(或稱為「自訂屬性」)的方法是在變數名稱前加上雙連字號 ( -- ),並將變數定義在選擇器中,通常會在全域樣式範圍中使用  :root  選擇器來定義。  您可以使用  var()  函式來讀取變數的值。   宣告CSS 變數 使用  --  前綴:  變數名稱必須以雙連字號 ( -- ) 開頭。   在選擇器中定義 :  變數可以定義在任何CSS 選擇器下,但最常見的做法是在  :root  偽類(pseudo-class)中定義,以便讓所有元素都能取用。   指定變數值 :  緊隨變數名稱之後的是要賦予的值,這個值可以是文字、數字(需帶單位)或色彩代碼等。   範例 程式碼 /* 在 :root 選擇器中宣告變數,讓全域都能取用 */ :root { --primary-color: #3498d b; /* 主要顏色變數 */ --background-color: #f0f0f0; /* 背景顏色變數 */ --font-size-base: 16px; /* 基本字體大小變數 */ } 使用CSS 變數 使用  var()  函式來套用已宣告的變數值。   範例 程式碼 body { background-color: var(--background-color); /* 套用背景顏色變數 */ font-size: va r(--font-size-base); /* 套用基本字體大小變數 */ } h1 { color: var(--primary-colo r); /* 套用主要顏色變數 */ } 其他用法   提供後備值 :  var()  函式可以接受第二個參數,作為當前變數不存在時的後備值。 程式碼 .element { margin: var(--custom-margin, 10px ); /* 如果 --custom-margin 不存在,則使用 10px */ } 響應式設計 :  可以透過Media Queries 來...