築夢角落

致力於用最生活化的例子讓所有人都能懂程式,也喜歡分享動漫、小說心得,以及自己的所見所聞、所思所想。

[js]模板字串(Template literals),不用框架也能利用Component開發

最後更新時間 : 2022-09-26 | viewed : 23

 

上次我們從頭做了一個自訂樣式的訊息提示框,雖然達成效果了,但是為了讓這個功能更容易使用及維護,現在我們要來改良上次的程式碼。

這次我們要利用模板字串(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 撞名了,函式呼叫時就會出現預期外的結果。)

 

這次的介紹就到這邊,有任何問題歡迎留言討論~

希望有幫助到你!

 

 
我要留言!
 

X
暱稱(選填)
email(選填,僅站長可見。)
留言 To:#