模組化開發

為什麼需要模組化？對我而已，模組化開發的核心概念就是「化繁為簡」．什麼意思呢？以下舉幾個模組化開發的特點：

1. 重複使用性：我們可以將一個看似大而冗長的程式碼，找到其中可重復性的部分（常見的如：Header、Footer）將其打包成一個函式，需要的時候隨時都能呼叫這個函式使用，這樣的好處除了讓程式碼更容易維護，也可以減少撰寫重覆的程式碼，並讓程式碼以有意義的方式組織起來．甚至在遇到相同的流程下，也能藉由參數就去調整程式的行為．
2. 獨立性．每一個模組都是獨立的，模組內的變數不會被其他模組讀取

這兩個特點對於開發以及測試上都能節省不少時間，可以說是模組化開發的價值所在．

模組化指令

由於整個專案都會以Javascript來進行撰寫，所以我們需要來了解Javascript ES6的模組化指令

1. import指令：

   import moduleName from "module路徑"

   更多資訊可以看 import - JavaScript | MDN (mozilla.org)

2. export指令：

   基本上一個 JS 檔案就是一個模組，用 export 語法，將你想要輸出的變數、函式、物件、類別，都可以輸出。

   export const your_var = 'test';
export function your_func() { // … }

   更多資訊可以看 export - JavaScript | MDN (mozilla.org)

操作演練

1. 在src目錄下新增兩個folder：components以及pages

• components資料夾主要是負責放拆分過後的元件：
  如圖所示，我們可以先將一個頁面拆解成很多元件，像是號碼1就是Header，號碼2是Search bar
  號碼3跟4可以是PlaceList．
  

預想好了以後，就能在components底下新增不同的元件，目前先新增兩個components:
Header以及PlaceList

2. 再來我們要想想，這些components要出現在哪裡？因此我們可以先建立一個pages資料夾，並且在底下新增一個Home.jsx，代表我們的首頁
3. 在Home.jsx裡，我們可以把剛剛建立的兩個components 引入．由此一來，每次我們進到Home page，就能看到Header跟PlaceList兩個元件裡的內容了
   
4. 接著我們要到App.jsx中引入我們的Page，目前只有Home Page
   
5. 最後，我們再進到 http://localhost:5173 看看結果如何
   
   看得出來，目前的Home Page有順利的由下列兩個元件組成，Header跟PlaceList

最後複習一下今天做了什麼．首先，我們在src下新增兩個資料夾：components＆pages
在components中需要集中管理元件，而在pages下，則集中管理各個頁面．並依據各個頁面的需求，可以引入不同的元件．最後，則在App.jsx中將我們的Home.jsx import進去，未來專案的預設進入點就會是Home Page了．

今天的內容就到這邊了，謝謝大家今日的觀看，明天見！