上一篇我們使用Node建立了基本的開發環境與安裝套件後，今天就來建立元件(Component)吧！前面有提到SPA render的原理，以及建立Component後的render，所以目標是建立頁面，然後在頁面裡面放置要產生的畫面，最後才是render畫面。

開始建立Component

首先建立主頁。這邊宣告一個Home常數，Home可以視為主頁名稱，值的部分放入HTML內容的字串。我們複習一下整個實現內容的過程，看看以下這段語法是怎麼呈現的：

const Home = `<h1>Home page</h1>`;
document.querySelector("#wrapper").innerHTML = Home;

仔細看賦予Home的值是HTML字串內容，其中有個反引號「`」，英文叫back-tick，這是樣板字面值，使用樣板字面值好處是遇到引號可以不用加跳脫字元，用${ … }將變數包起來就好，並支援直接enter斷行，不必加\n的換行代碼，呈現上很接近HTML版面結構。

例如以下的方式：

const txt = `<h1>Home page</h1>`
const Home = `<h1>${txt}</h1>`; //等同'<h1>'+ txt + '</h1>'

如此可以取代舊方式用「+」串接不同型別的語法，使用比較方便，閱讀也較為直覺。

使用物件建立Component

首先看MDN對物件的介紹：

在 JavaScript 裡面，從諸如字串與陣列的核心功能、到以 JavaScript 建構的瀏覽器 API，大部分的東西都可算是「物件 (Object)」。你甚至可建立自己的物件，將相關函式與變數封裝 (Encapsulate) 為有效封包，並可作為多樣的資料容器 (Data container)。如果你想更精進既有的程式語言知識，就必須了解 JavaScript 的「物件導向 (Object-Oriented；OO)」本質。為此，我們設計了相關文章來協助你更進一步。本文將先說明物件理論和語法的細節，再引導你建立自己的物件。

回到主題，再思考一下，Home的值如果是用物件型別作為Component，要如何呈現呢?看看以下例子：

const Home = {
  render: () => {
    return `<h1>Home page</h1>`;
  },
}

上面宣告一個名稱為Home的物件，裡面我們建立一個render屬性，值的部份賦予回呼函式(callback)，呼叫該callback便返回產出畫面的內容。調用方法像下面這樣：

document.querySelector('#wrapper').innerHTML = Home.render();

渲染時調用物件裡render屬性的內容，就可以輸出畫面囉!

至於為何要使用物件來建立呢?前面在[DAY04]淺談前端SPA框架-以React為例(下篇)
有示範過建立Component搭配React，React讓各自的元件實現生命週期的作用，這邊希望利用Javascript動態存取物件的特性，給予不同屬性值，來幫助我們將畫面與程式分離出來，並達成有效地管理邏輯與狀態。

模組化Component

以上完成建立後來試試把元件輸出成模組，在專案資料夾src/pages/裡另存成一隻Home.js如下：

src/pages/Home.js

//Named export(命名匯出)
export const Home = {
  render: () => {
    return `<h1>Home page</h1>`;
  },
}

之後只要引入Home，就可以在其他地方使用Home.render()的方法來輸出畫面了，為了讓大家更了解整個流程，這邊的觀念在之後也會重複提到。以上就是建立Component並作為模組輸出的過程，明天將會繼續探討，如何使用路由動態渲染頁面，以及實做出路由的方法。

參考資料：

1. Build a very basic SPA JavaScript router
2. JavaScript 物件基礎概念