Blog

photo by Reed Mok 想像你是一位老師，要管理一個新班級的學生名單 人數少的時候，你可以直接用名字來記住每一位學生，但當學生人數一多，要快速找到某一位學生就變得困難 情境 A：變數分散管理 如果我們像這樣單獨宣告變數來存學生名字： string student1 = "Alice"; string student2 = "Bob"; string student3 = "Charlie"; // ... 如果有 50 個學生，變數會多到無法管理 這種方式的問題在於： 沒有順序性：變數之間沒有邏輯上的關聯 無法索引：不能用「第 3 個學生」這種方式來存取 難以自動化：無法用迴圈（Loop）來批次處理這群資料 情境 B：使用 Array 統一管理 這時候，如果替每位學生分配一個固定的「座號」，並依照座號的順序將學生資料排排站（存放起來），只要知道座號，就能直接找到對應的學生 struct Student { string name; }; // 學生名單 (Array) Student students[] = { {"Alice"}, // index 0 (座號 1) {"Bob"}, // index 1 (座號 2) {"Charlie"} // index 2 (座號 3) }; const int numStudents = 3; Student* findStudentBySeatNumber(int seatNumber) { // 檢查座號是否合法 if (seatNumber < 1 || seatNumber > numStudents) { return nullptr; } // 透過索引直接取得資料 (Array Index 從 0 開始) return &students[seatNumber - 1]; } 這就是 Array 的核心精神 ...

在專案中有個需求要產生 100+ 份報表，格式包含Word與PDF，這些報表有幾個共同特性： 都需要從 Word 樣板產生 樣板中使用 unique token（例如 [XXX]）作為預填欄位 產出前需要先組合資料、預填內容 有些最後還要轉成 PDF 很直覺的作法是：每新增一個報表， 就寫一份產生報表邏輯 短期內可以快速交付功能， 但是造成的問題是： 每產生一個報表就會新增一套九成像的程式碼邏輯並散落在專案各處 想改一個共通行為要改很多地方 接手維護的工程師不知道哪個是標準寫法 真正的問題不是報表數量變多，而是同一個產生流程，被複製成太多版本 Template Method Pattern 首先要釐清的兩件事情是： 哪些事情在報表中一定會做 哪些事情每份報表都不一樣 不會變的部分 讀取報表樣板 報表資料預填 輸出檔案 是否轉換成PDF檔案 會變的部分 報表的資料來源 預填欄位的內容與資料格式 輸出的檔案名稱 運用Template Method Patten的核心價值就在於： 把一定會做的流程固定下來 只把會變的部分交給子類別實作 避免每個報表各自定義一套自己的產生流程 實作 Template Method Patten 把報表產生流程抽象化，其實每份報表都在做同一件事： 取得產生報表所需的資料 讀取樣板文件， 填入預填資料 輸出文件 在沒有Template Method Patten情況下， 每一份報表都要實作這三個流程 Template Method Patten作法是這樣的： Base class定義產生流程的順序 子類別負責準備這份報表所需資料 classDiagram class BaseReport { +Generate() #Init() #LoadTemplate() #PrefillContent() #ExportFile() #ConvertToPdfIfNeeded() } class ConcreteReportA { +Init() } class ConcreteReportB { +Init() } BaseReport <|-- ConcreteReportA BaseReport <|-- ConcreteReportB 關鍵在於子類別不能決定流程， 只能提供資料 ...

setup Composition API 功能要寫在setup裡面 <script> export defalut { setup(){ //... } } </script> 也可以寫成 <script setup> </script> ref 定義響應性數據 參數名稱要+.value來修改資料 <template> <h1>{{ title }}</h1> </template> <script setup> import { ref } from 'vue'; const title = ref('title'); title.value = 'new title'; </script>

以下可能原因: ...

實作在右下角顯示多個提示框功能 修改index.html部分, 在body區域新增一個messages用來放置提示框的位置 //index.html <!doctype html> //... <body> <div id="app"></div> <div id="messages"></div> <script type="module" src="/src/main.js"></script> </body> //... ...

題目 https://leetcode.com/problems/next-permutation/description/ A permutation of an array of integers is an arrangement of its members into a sequence or linear order. For example, for arr = [1,2,3], the following are all the permutations of arr: [1,2,3], [1,3,2], [2, 1, 3], [2, 3, 1], [3,1,2], [3,2,1]. The next permutation of an array of integers is the next lexicographically greater permutation of its integer. More formally, if all the permutations of the array are sorted in one container according to their lexicographical order, then the next permutation of that array is the permutation that follows it in the sorted container. If such arrangement is not possible, the array must be rearranged as the lowest possible order (i.e., sorted in ascending order). For example, the next permutation of arr = [1,2,3] is [1,3,2]. Similarly, the next permutation of arr = [2,3,1] is [3,1,2]. While the next permutation of arr = [3,2,1] is [1,2,3] because [3,2,1] does not have a lexicographical larger rearrangement. Given an array of integers nums, find the next permutation of nums. The replacement must be in place and use only constant extra memory. ...

Traditional web applications 傳統的 Web 應用程式是指一個使用多個頁面的應用程式，每次使用者在網頁上進行操作時，都需要重新載入整個頁面或者轉到另一個頁面，從而刷新網頁的內容。每次發送請求時，伺服器都會重新生成一個 HTML 頁面，並將其傳送給客戶端。 Example page ...

了解Web 開發原則 Web 開發的第一原則: 第一步就是在瀏覽器上使用F12開啟開發者控制台，Network標籤可以看到Web與伺服器使用HTTP的所有通信, Console標籤可以看到所有在程式內Deubug用的訊息 HTTP GET HTTP GET 是一種 HTTP 請求方法，通常用於獲取網頁上的資源。在進行網路傳輸時，HTTP GET 方法可以向伺服器發送請求，以獲取伺服器上的資源。這些資源可以是網頁、影像、檔案等，而 HTTP GET 方法獲取資源的方式是透過 URL（Uniform Resource Locator，統一資源定位符）進行定位。 HTTP GET 方法是一種安全且幾乎無副作用的請求方法。使用 HTTP GET 方法，客戶端可以向伺服器發送請求，要求伺服器回應一個資源。當伺服器接收到 HTTP GET 請求後，會查找對應的資源，然後將其返回給客戶端。 HTTP GET 方法的請求是無副作用的，即不會對伺服器上的資源進行任何更改。這意味著使用 HTTP GET 方法，客戶端只能獲取伺服器上的資源，而不能修改或刪除它們。 HTTP GET 特色 ...

聲明式渲染 Declarative Rendering vue核心功能是聲明式渲染:不用關心渲染過程怎麼樣，只要告訴機器最終結果是甚麼就好 在template標籤內的語法用{{ }}渲染動態文字, 可以根據js當前狀態去改變現在HTML的樣子 <script> export default { data() { return { message: 'Hello World!' } } } </script> <template> <h1>{{ message }}</h1> </template> {{ }}內可以執行任何js表達式, ex: <h1>{{ message.split('').reverse().join('') }}</h1> ...

分層架構 大多為以下四層: Presentation Layer 表現層: 該層關注的是用戶看到或可以互動的任何內容，包含UI、圖形、表單、影像 Business Layer 業務層: 軟體本身特定的業務邏輯，blog網站會有發布文章、留言功能 Persistence Layer 持久層: 資料存取 Database Layer 資料層: 資料來源 ex:本地DB，雲端DB ...