[js]模板字串(Template literals)，不用框架也能利用Component開發
上次我們從頭做了一個自訂樣式的訊息提示框，雖然達成效果了，但是為了讓這個功能更容易使用及維護，現在我們要來改良上次的程式碼。
這次我們要利用模板字串(Template literals)來製作可重複使用的元件(Component)。
當前流行的前端框架Vue、React、Angular，都有 Component 的概念，這和物件導向的 Class 很類似，他們的目的都是想設計一個可重複建構的樣板。
對前端框架有興趣的朋友，可以自行搜尋相關資料，因為我自己通常不使用前端框架進行開發，所以這裡就不多提了。
如果沒有模板字串(Template literals)
我們先來看看不使用模板字串的情境，這有助於我們理解模板字串的用處。
function sayHello (username) {
var htmlTemplate = "<div>Hello, " + username + ".</div>";
return htmlTemplate;
}我們寫了一個 function，它會回傳一個我們組合好的字串。
用這種方法，就可以動態產生 html，因為 html 在本質上只是字串，所以可以透過動態組合字串，隨時隨地在想要的地方插入一段 html 語法。
接著我們來看看函式外部要如何使用它。
<html>
<head></head>
<body></body>
<script>
var htmlHello = sayHello("Bob");
$("body").append(htmlHello);
</script>
</html>呼叫 sayHello 並傳入一個字串作為參數，同時宣告一個變數接收 sayHello 的回傳值，回傳值的內容會是<div>Hello, Bob.</div>。
隨後，把這個字串插入<body>之中，結果會變成：
<body>
<div>Hello, Bob.</div>
</body>
如此一來，我們就成功設計一個可以重複利用的模板了。
我們可以在任何時候動態建構模板，並把結果插入任何地方。
模板字串(Template literals)
因為上面的例子比較簡單，所以用字串來做也不會有什麼不便，但是如果是比較複雜的 html，或是想在<div>標籤內加入 class，用字串連接就會顯得不便，也會影響模板的可讀性。
這時候我們可以用模板字串，它寫起來比較省事，一眼看去也比較像在閱讀 html 格式。
稍微改一下 sayHello 函式：
function sayHello (username) {
return `<div class="blueColor">Hello, ${username}.</div>`;
}
模板字串的用法是用 ` ` 把 html 包起來，它跟 " " 一樣，回傳的資料類型都是字串(string)。
主要的差別是，它允許我們用 ${ 你的變數 } 的方式填入變數。除此之外，如果要加 class 也很方便，寫法跟原本寫 html 時沒有區別。
相比於用 + 連接字串，這種寫法的可讀性會高很多，後續也更容易修改。
製作可重複使用的訊息提示框(Dialog)
讓我們來改良一下上次寫的 Modal Dialog。
上次我們直接把視窗標題、內容、按鈕都寫死在 html 檔裡，這裡我們把它移植到 js 中，並把標題、內容、按鈕都改為參數，由函式外部傳入，如此便能重複使用這個視窗模板。
此外，我們也把 modal 改寫到 js 中，讓 modal 跟 dialog 一樣利用 jQuery 來動態生成與清除。
只在需要時動態生成 html 元素，並在使用完畢後將其清除，這麼做可以避免專案變大或多人開發的時候，因為在 html 檔裡重複設計了 modal 或 dialog，導致執行時期呈現的結果有 Bug。（畢竟 modal 跟 dialog 是很容易重複的名字，如果 id 或 class 撞名了，函式呼叫時就會出現預期外的結果。）
這次的介紹就到這邊，有任何問題歡迎留言討論～
希望有幫助到你！