iT邦幫忙

frontend相關文章
共有 368 則文章
鐵人賽 Software Development DAY 30
前端也想學設計模式 系列 第 30

技術 Day 30 - 結語

持續一個月的努力,終於來到了鐵人賽的最後一天。我大約在兩個月前萌生了參加鐵人賽的念頭,但當時其實猶豫了很久,一方面是擔心無法兼顧工作與寫作,另一方面也怕無法產出...

鐵人賽 Software Development DAY 29
前端也想學設計模式 系列 第 29

技術 Day 29 - Visitor 訪問者

訪問者模式允許在不修改物件類別的情況下,對物件集合中的元素施加新的操作。 生活範例 麥當勞的餐點有很多種點法,比如說一個麥香雞漢堡,可以單點、搭配薯條和可樂做成...

鐵人賽 Software Development DAY 27
前端也想學設計模式 系列 第 27

技術 Day 27 - Method Chaining 方法鏈

方法鏈可以透過一連串的方法呼叫來取得計算結果,而無需將中間結果存為變數。 生活範例 想像草莓果醬的生產線,上面包含幾個主要關卡:清洗、烹煮和裝瓶,經過一步步的處...

鐵人賽 Software Development DAY 26
前端也想學設計模式 系列 第 26

技術 Day 26 - Memento 備忘錄

備忘錄模式能讓物件在不破壞封裝的情況下儲存與回復狀態。 生活範例 備忘錄模式的一個經典應用場景是歷史紀錄。這類紀錄在我們的日常生活中隨處可見,例如 Word、P...

鐵人賽 Software Development DAY 25
前端也想學設計模式 系列 第 25

技術 Day 25 - State 狀態

狀態模式使用狀態物件來表示物件在不同狀態下的行為,並通過改變狀態物件來改變行為。 生活範例 街道中的紅綠燈非常適合用來說明狀態模式的概念。紅綠燈有三種狀態:紅燈...

鐵人賽 Software Development DAY 24
前端也想學設計模式 系列 第 24

技術 Day 24 - Bridge 橋接

橋接模式通過將物件的抽象部分與實現部分分離,使系統更具彈性。 生活範例 隨著行動支付方式日益多樣化,想像一間行動支付整合商的服務,支援像 Apple Pay、L...

鐵人賽 Software Development DAY 23
前端也想學設計模式 系列 第 23

技術 Day 23 - Flyweight 享元

享元模式透過重複使用物件來減少資料量並節省記憶體。 生活範例 圖書館有很多藏書,同一本書可能有多本館藏,以滿足讀者需求。假設每次購書都要將書本的基本資料輸入圖書...

鐵人賽 Software Development DAY 22
前端也想學設計模式 系列 第 22

技術 Day 22 - Mediator 中介者

中介者模式透過獨立的物件來協調物件之間的互動行為,避免它們相互依賴。 生活範例 想像你在一間公司,各部門都透過專案管理組來進行溝通。每當某個部門有需求時,都會聯...

鐵人賽 Software Development DAY 21
前端也想學設計模式 系列 第 21

技術 Day 21 - Proxy 代理

代理模式透過包裝物件來管理外部對物件的操作行為。 生活案例 每名偶像都有一位經紀人,負責管理其工作行程。廠商會透過經紀人洽談合作機會,並透過經紀人取得回覆。廠商...

鐵人賽 Software Development DAY 20
前端也想學設計模式 系列 第 20

技術 Day 20 - Null Object 空物件

空物件模式利用一個沒有實質行為的空物件來統一客戶端程式的操作行為。 生活範例 大家去日本旅遊時曾經注意過日本的販賣機嗎?日本的販賣機非常有趣,有些會用空的包裝來...

鐵人賽 Software Development DAY 19
前端也想學設計模式 系列 第 19

技術 Day 19 - Composite 合成

合成模式藉由統一樹狀結構中所有節點的介面,使不同類型的節點擁有相同的操作介面。 生活範例 一間企業由不同部門組成,部門下有組別,而每個組別還可能有不同的團隊。企...

鐵人賽 Software Development DAY 18
前端也想學設計模式 系列 第 18

技術 Day 18 - Iterator 反覆器

反覆器讓我們取得聚合中的所有元素而不必暴露內部的實作細節。 生活案例 假設你擁有很多電子書,但每本書的格式都不同,有些是 PDF,有些是 txt 檔,有些是網路...

鐵人賽 JavaScript DAY 18

技術 Day18:使用 TypeScript 為 React 元件定義 Props 型別

在 React 專案搭配 TypeScript 後續開發前,最重要的工作之一就是為元件定義 props 的型別。這不只可以讓程式碼更清晰易懂,也能幫助未來在開發...

鐵人賽 Software Development DAY 17
前端也想學設計模式 系列 第 17

技術 Day 17 - Template Method 樣板方法

樣板方法提供一個演算法模板,讓子類別在相同的步驟中實踐不同的實作細節。 生活範例 以料理為例,每道菜使用的食材、烹煮方式和擺盤風格各不相同,但都會經歷三個主要步...

鐵人賽 Software Development DAY 16
前端也想學設計模式 系列 第 16

技術 Day 16 - Chain of Responsibility 責任鏈

將請求的處理程序分成多個處理器,並讓每個處理器決定如何處理請求。 生活案例 想像蘋果工廠的流水線上有一系列工作站,分別負責清洗、選別和包裝。每個工作站會依序處理...

鐵人賽 JavaScript DAY 17

技術 Day17:在 React 中使用 TypeScript 的基本設置與應用

在前一篇文章中,學到了如何在一般的 JavaScript 專案中加入 TypeScript,今天就來分享在前端框架 React.js 如何使用吧!TypeScr...

鐵人賽 Software Development DAY 15
前端也想學設計模式 系列 第 15

技術 Day 15 - Builder 建造者

建造者模式藉由將物件的建構流程和目標對象分離,讓物件的建構過程更有彈性。 生活案例 一間汽車製造工廠生產著各式各樣的的汽車,每款汽車都由不同的零件組成,例如引擎...

鐵人賽 Software Development DAY 14
前端也想學設計模式 系列 第 14

技術 Day 14 - Prototype 原型

原型模式通過讓物件提供複製方法,讓使用者能夠輕鬆複製物件。 生活案例 假設你是世界名畫「蒙娜麗莎的微笑」的收藏家。你經常收到美術館的來信,邀請展出這幅畫作。由於...

鐵人賽 Software Development DAY 13
前端也想學設計模式 系列 第 13

技術 Day 13 - Adapter 轉接器

轉接器模式允許你在不修改現有程式碼的情況下轉換類別的介面,讓原本互不相容的兩個類別合作無間。 生活案例 出國旅遊時,當地的插座和電壓常常與台灣不同,因此經常需要...

鐵人賽 Software Development DAY 12
前端也想學設計模式 系列 第 12

技術 Day 12 - Facade 表象

表象模式將複雜的系統包裝成簡單的介面,使系統更容易使用。 生活案例 身為一個出遊靠朋友、吃飯跟著走的超級懶人,安排旅行是一件極為痛苦的事。比起花時間找景點,我更...

鐵人賽 Software Development DAY 11
前端也想學設計模式 系列 第 11

技術 Day 11 - Command 命令

命令模式將請求的行為封裝成物件,發送請求的物件只需要依賴於命令介面而不需要知道背後的實作細節。 生活案例 想像你在得來速點餐,櫃檯人員透過點餐機記下餐點,點餐機...

鐵人賽 Software Development DAY 10
前端也想學設計模式 系列 第 10

技術 Day 10 - Singleton 單例

單例模式可以建立一個獨一無二的類別實例,並讓整個應用程式存取內部的狀態和資源。 生活案例 現在很多網站都提供深色模式,來符合使用者的視覺習慣。通常這樣的設定只會...

鐵人賽 Software Development DAY 9
前端也想學設計模式 系列 第 9

技術 Day 09 - Abstract Factory 抽象工廠

我們在第五天的時候分享過工廠方法模式,今天的主題是它的進階版——抽象工廠模式。工廠方法模式每次只生成一種產品,而抽象工廠則用來生成整個產品家族。 生活案例 在日...

鐵人賽 自我挑戰組 DAY 8
前端系統設計 系列 第 8

技術 [Day 8] New feeds - Architecture

接著我們就來談到 RADIO framework 的 Architecture,也就是 決定關鍵的 component 與他們之間如何作用   Archit...

鐵人賽 Software Development DAY 8
前端也想學設計模式 系列 第 8

技術 Day 08 - Decorator 裝飾者

裝飾者模式可以讓你在不改變原有物件的情況下,動態地為物件新增行為或功能。 生活案例 想像你點了一杯咖啡,這就是一個基本物件。你可以在咖啡上加一些配料,像是鮮奶油...

鐵人賽 自我挑戰組 DAY 7
前端系統設計 系列 第 7

技術 [Day 7] 訊息流 (New Feeds) - 1 - 需求探索

前言 進入到正式的系統設計問題,我們首先就以 New Feeds (訊息流)做例子   所謂的訊息流 (New Feeds),就如上述 X(前 twitter...

鐵人賽 Software Development DAY 7
前端也想學設計模式 系列 第 7

技術 Day 07 - Observer 觀察者

觀察者模式讓物件可以被動地接收訊息,而不需要主動追蹤主題的變化。 生活案例 大家平時有收聽 Podcast 的習慣嗎?我時常在捷運上聽 Podcast,聽聽主持...

鐵人賽 自我挑戰組 DAY 6
前端系統設計 系列 第 6

技術 [Day 6] 系統設計指南懶人包

RADIO framework RADIO REQUIREMENT exploration:徹底的了解需求,藉由問題釐清題目的範圍 ARCHITECT...

鐵人賽 Software Development DAY 6
前端也想學設計模式 系列 第 6

技術 Day 06 - Strategy 策略

策略模式定義一個演算法介面,並讓客戶端在執行時期根據需求替換具體實作。 生活案例 不知道大家平常都怎麼上班呢?大多時候我會騎機車,想要放鬆一點的時候會改搭公車。...

鐵人賽 自我挑戰組 DAY 5
前端系統設計 系列 第 5

技術 [Day 5] BRIJIS - 系統設計常見錯誤

以下是 System design 時,常犯的錯誤 1. 馬上回答問題 Jumping into answering the question immedia...