iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 2

Day_02: 讓 Vite 來開啟你的Vue 微談模組化與演進(上)

Hi Da Gei Ho~ 我是 Winnie ,

今天是文章的第二篇,在開始進入主題 Vite之前,此篇文章將切分上下文 簡單說說 什麼是 模組與模組化JavaScript中的模組化規範 的發展過程

為何要從 模組化開始呢?

事情是這樣的,初期在接觸前端技術的時候,我們常常會聽到網站上線前需要做 打包 的動作, 於事為先求結果身為新手的我們往往都會先照著做, 但做著做著就忘記回頭了解打包主要原因,可能再深入一點探索的時候,也許又了解一點 打包工具 的主要目的 是將我們可能有用到的 Preprocess工具跟框架(如:Vue、React、Sass 等)編譯成 瀏覽器看得懂的 程式碼,但對於所要打包的東西 還是 似懂非懂。

而我也是到近期藉著深入了解 Vite 運作的背後原理,才了解到 打包工具 所編譯的內容是什麼 。

所以 為了能更仔細的紀錄 Vite 的運作 ,我將從 模組化的微歷史 切入來了解現有的 開發建構工具 與 Vite 實際的差別 。

什麼是 模組與 模組化?

如果我們先不將程式邏輯帶入來解釋,以物品來解釋的話,

維基百科是這樣說的:

模組 是指由數個『基礎功能元件』組成的『特定功能組件』,可用來組成具完整功能之系統、裝置或程式。通常會具有相同的製程或邏輯,更改其組成元件可調適其功能或用途。

如果覺得有點抽象,我們將 樂高積木 作為比喻:

在每個樂高的主題世界裡,每個物件的組成最基礎的元件就是『積木』,而這些積木可以組成各種有自己生存意義的物品,如: 房子、車子、樹、人物等...,其中以『車子』為例,不管是 怪奇物語裡的車子 還是 馬力歐的賽車,雖然他們樣式與出現情境會些許不一樣,但他們的組成邏輯都是車子。而這樣的概念就可以稱之為 『模組』

那模組化又是什麼?

再請 維基百科來解釋:
模組化是指 一種處理複雜系統且分解為更好管理模組的方式

簡單來說,就是當我們需解決一個複雜的問題時,將問題從最上層向下分割程多個模組的過程,然後依照 需求 來將每個模組 組成方便管理的物件,以利後續 方便維護增加重複使用的可能性

為何要模組化?

接著,前面解釋 模組與模組化 之後,我們再回到JS裡,到底在程式碼中使用 模組化 有什麼好處呢?
故事是這樣開始的,在早期的 Javascript 主要的目的是爲了讓網頁可以進行簡單的表單驗證及互動,所以在當時 還尚未有模組化的概念出現。
但隨著時間的增長,大家對網站的功能需求逐漸增加,使得前端技術日漸複雜,此時JS不僅只需要做驗證跟互動而已了,同時可能還需考慮到 效能及使用者體驗 等 (就像隨著年齡的增長,阿拉丁已經不能一次滿足你的三個願望XD,)

所以當網站功能變多時,當然地程式碼的規模也會變得龐大而複雜,一旦出現bug要找出問題也就會變得困難。

讓我們以 香蕉芭樂 的價格計算 為例 :


function banana(price , quantity) {
 const bananaPrice = price * quantity
 return bananaPrice;
}

function guava(price , quantity) {
 const guavaPrice = price * quantity
 return guavaPrice;
}

function priceTotal(price , quantity) {
 return guava(price , quantity) + banana(price , quantity) ;
}

priceTotal(25,4)

在程式碼中,我們可以看到 priceTotal()需要依賴 guava()banana() 中回傳的值 才能取得價格總額,可能到這邊,你可能會想「這樣我還是可以依照關聯找出問題的啊,為何要模組化?」先別急,如果今天因為全球農產業研發技術大突破,品種大增,店家引進了各國水果品種呢?


function japanApple(price , quantity) {
 const japanApplePrice = price * quantity
 return japanApplePrice;
}

function americanApple(price , quantity) {
 const americanApplePrice = price * quantity
 return americanApplePrice;
}

.....(略 )

function guava(price , quantity) {
 const guavaPrice = price * quantity
 return guavaPrice;
}

function priceTotal(price , quantity) {
 return apple(price , quantity) + .....(略) + banana(price , quantity) ;
}

priceTotal(25,4)

而此時剛好又出現錯誤你要找出bug時,你就會想...

所以基於上述問題,在程式碼中就有了 模組化的解決方案,我們可以透過 模組化 的方式,將 複雜的程式碼 依照 邏輯或功能 方式來抽取成模組,再根據 需求的情境進行套用,這樣不僅可以增加重複使用性,同時也可以增加程式碼的 維護性,更利於管理程式碼。

好的,以上就是 針對 模組與模組化 的解釋,如果文章有錯誤的地方,再麻煩不吝嗇的給予指教 謝謝 !!

ps.下篇文章 主要會 來看看 JavaScript模組化的規範 演進過程。


上一篇
Day_01: 讓 Vite 來開啟你的Vue 前言
下一篇
Day_03 : 讓 Vite 來開啟你的Vue 微談模組化與演進(下)
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言