Yang Yang

無論是說話或是設計程式，都需要注意邏輯不能馬上定義得太明白，往後需要變更或是維護的時候才會比較方便。 定義讓我們看一下原文的定義： 12High-level modules should not depend on low-level modules. Both should depend on abstractions (e.g. interfaces).Abstractions should not depend on details. Details (concrete implementations) should depend on abstractions. 翻譯蒟蒻 高階模組不可以依賴於低階模組，兩者必須依賴抽象概念上。 抽象不可以依賴細節上，而是反過來依賴抽象上。 看完之後，你可能還會覺得這在說什麼…其實這個概念跟我們日常生活很像，你跟別人約定好的事情不能講太細節的事情不然到時候有什麼狀況發生，其實很難去應變 日常舉例今天如果老師跟你說：下次考試會考課本的第一章全部和第二章的第三小節結果下次考試老師跟大家說：不好意思…我忘記把題目加在裡面了，今天就先只考第一章。 你 ...

在設計功能的時候，有時候要注意這個功能到底適不適合在這個元件擁有，以下就來看看簡單的範例。 定義簡單來說就是，把不同功能的功能從介面中分離出來。 範例這裡有一個形狀的介面： 1234interface Shape { area(): number; radius(): number;} 眼尖的你有沒有發現radius放在Shape是一件很奇怪的事情呢？為什麼形狀會有半徑？頂多只有邊長才對，半徑的特性應該是圓才對。所以這邊必須要抽離出來： 12345678interface Shape { render(): void; area(): number;}interface Circle extends Shape { radius(): number;} 結束了，沒錯，就是這樣而已，很簡單吧！ 應用於前端不管在開發網頁時，是使用OOP或是FP，其實都可以適用這個概念在建構網頁容器。你只需要保持注意，某些資訊是否是屬於這個元件，不該放的就不要放在這裡，抽離到其他元件去額外使用即可。

在設計元件的時候，有時候會遇到元件擴充或是退回版本等…問題，這個時候如果把原件的彈性變大，將會大大的增加工程效率，之前有大概介紹什麼是Liskov原則，這裡將會進一步舉例介紹。 定義Liskov替換原則的定義請看如下： 1Let Φ(x) be a property provable about objects x of type T. Then Φ(y) should be true for objects y of type S where S is a subtype of T. 很好，相信你看過之後，還是不知道他到底想表達什麼，讓我們白話一點詮釋他。 換句話說在設計物件的時候，你必須考量到彼此的共通性才會進一步的設計彼此的繼承關係。程式中的物件應該是可以在不改變程式正確性的前提下被它的子類所替換的。簡單來說就是：當子類別替換父類別時，功能不會受到影響。換句話也可以說是：子類別必須能取代它的父類別。繼承的特性使得類別具備高耦合的特性，子類別如果需要Overriding, Overloading 必須遵照父類別的規則，才能符合類別的設計原則。因為具備高耦合的關係，如果沒有特別注意 ...

這樣要來介紹的是開關原則，其實以字面上來說會有點讓人誤解其中的意思，個人認為有點像是積木或是拼圖疊加的概念，但是概念上也是很簡單，只要熟悉觀念即可變成自己的設計心法，讓我們來看看吧。 開關原則在OOP的設計中，開關原則需要保持開放程式的擴充性質，並且關閉程式的修改。聽起來好像很奇怪？那麼我們來舉例吧！如果今天你是設計汽車的工程師，當有人拿車子要給你修理輪胎的時候，你一定只會把輪胎更換而已，並不會動到其他東西，例如：引擎, 座椅……。只需要把指定的元件更換，而不需要動到過多的東西。 換句話說以OOP的設計原則來說，開關原則可以讓程式保持DRY（Don’t Repeat Yourself） 實例展示讓我們來看以下的例子，我有一個訂單，裡面包含了飲品： 1234567891011App = () => { const drink = { name: 'milk', size: 1000, } return ( <div className="App"> <Order ...

不管是人還是程式，都避免不了做過多事情而造成的一些額外負擔，例如一次管太多事情會讓你忘記，日後不易記得，這裡就來介紹實用的概念吧。 Single responsibility principle - 單一職責原則這邊舉以下的範例程式作為例子： 123456789101112131415161718192021222324const onLoadUserList = (setUsers) => { axios .get("https://ex.tw/") .then(response => setUsers(response.data)) .catch(err => console.log(err));}const UserListPage = () => { const [users, setUsers] = useState([]); useEffect(() => { onLoadUserList(setUsers) ...

有時候在開發的時候，會聽到有些人說SOLID原則可以有助於提升後續維護與擴充，那麼以下就來帶大家一起了解吧。 認識SOLID原則SOLID分別代表五個專有名詞，以下先大概簡單介紹一下。在介紹之前，如果你已經對SOLID有初步的了解，可以直接到以下的範例查看：📌 S 前端開發的SOLID - 單一職責原則📌 O 前端開發的SOLID - 開關原則📌 L 前端開發的SOLID - Liskov替換原則📌 I 前端開發的SOLID - 介面隔離原則📌 D 前端開發的SOLID - 依賴反轉原則 Single responsibility principle - 單一功能原則每一個class或function都應該僅具有單一功能為主 Open–closed principle - 開關原則這裡指的開與關，事實上就是指我們常聽見的擴充與修改。 Open設計程式應該保持適當的開放性以便後續擴充。 Close設計程式需要注意耦合性的問題，每個class或是function之間，應該儘可能的獨立開來。 看完上面還不太懂的話，你可以想像一下你今天有一台汽車，你開著開著好幾天， ...

自從開始上班之後，開始會聽到很多認識的人或是同事開始談論自身的健康遇到什麼狀況，有些人感覺沒什麼異狀，有些人可能開始體力大不如前，甚至開始被醫生給予警訊要多補充一些營養，這邊就來分享自身經驗。 我的辦公室營養品菜單 魚油 補充魚油的好處多，除了可以改善與預防心血管疾病之外，也很常被健身的人拿來作用營養補充品。 可參考這篇 蝦紅素 蝦紅素的好處蠻多的，也因此市售價格通常會比較高一點。 主要被大家知道的是，可以改善身體的老化問題, 眼睛, 糖尿病, 血脂…… 可參考這篇 藍莓碇 相信很多人都知道DHC系列，很常在日本藥妝店看到，算是親民的視力保養品。 葉黃素/玉米黃質 改善年紀大的黃斑, 改善暗處的適應能力, 降低白內障, 視覺疲勞… 通常被視為眼睛的保養品 可參考 維他命D3 關於維他命D的介紹，統一寫在下面的大標題 我習慣每天補充2000UI，看個人的習慣與需求 綜合維他命 我反而不太會刻意補充維他命B，因為綜合維他命大部分都能補充到每日建議攝取的量了，除非真的需要補充，我才會另外再去吃維他命B，綜合維他命也算是懶人補充，也適合當天飲食不正常的人補充，當然也有人認 ...

相信有些人會很好奇網站的組成，但是可能又沒有學過程式開發，無法簡單判斷一個網站使用了什麼工具。或是開發者想要輕鬆的無痛分析一個網站，又懶得打開程式結構去分析。以下將教大家一個簡單的方式。 實用工具介紹這次要介紹的工具叫做 wappalyzer 下載連結 Google chrome extension載點 以下是官網的敘述： 123Technology driven lead generationSell and market more effectively with technographic insights. We track over a thousand technologies accross websites of millions of companies to help you to identify new prospects and increase your addressable market. 簡單來說，這個就是一個套件，只需要安裝在瀏覽器上，當你在瀏覽某網站的時候，即可分析這個網站有包含哪些技術。 套件特色入我們來看看套件的特色： Find out ...

我在參加六角學院舉辦的鼠年鐵人賽寫了一系列的SEO文章有需要的人可以多參考這些文章，不管你是有沒有寫過程式的人都歡迎多參考了解SEO的各種相關經驗哦如果有什麼建議或是想了解的部分，也歡迎提供： SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇

上一篇教各位如何將前端配合同構達成如SSR的效果，但是其實那種寫法是有一些資安隱憂需要注意的。原本是CSR變成SSR的話，就需要考量到Server注入的資料是否有問題，因此有可能會發生XSS的問題。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 認識Cross-Site ScriptingCross-Site Scripting又稱為XSS，中文稱作跨網站指令碼，透過程式碼注入的方式，將程式把注入到網頁上面並且執行，而影響到網站的正常運作，XSS變化的方式不少，時常搭配HTML的斷句或是大小寫等…避開一些程式規則。 什麼狀況會發生XSSXSS有很多案例，以下列出幾個比較重要且經典的 Reflected XSS - 即時反映的script有任何可輸入的欄位，都必須小心發生XSS通常惡意者會利用回吐的error，從中拿取資料 1234<form> <in ...