[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 撞名了,函式呼叫時就會出現預期外的結果。)
這次的介紹就到這邊,有任何問題歡迎留言討論~
希望有幫助到你!