第 05 天：Svelte 中的 HTML

15th鐵人賽 svelte html

ithomemhjao

2023-09-20 21:54:30

509 瀏覽

分享至

第 05 天：Svelte 中的 HTML

一天下午，我和湯姆搭火車進城，當我們停在中途的中繼站時，他突然跳了起來，拉住我的手肘，言下之意是要我跟他一起下車。
「我們要下車了」，他說道：「我想讓你見見寫在 HTML 當中的 Javascript。」

～節錄自《The Great Svelte：第二章》

第 05 天要講的事

在 HTML 的文字內容中使用 Javascript
在 HTML 的標籤屬性中使用 Javascript

　　昨天的文章內容中提到，Svelte 元件，也就是副檔名為 .svelte 的檔案，具有一個特色：可以同時將 Javascript、HTML、CSS 這 3 種撰寫前端專案不可或缺的語言整合進同一個檔案。但這可不僅僅是 Svelte 所提供的特色，除了能在 Svelte 元件當中同時撰寫這 3 種語言之外，Svelte 還賦予這些語言更多的能力。今天就讓我們來看看 Svelte 當中的 HTML 有什麼不同的地方。

在 HTML 的文字內容中使用 Javascript

　　為了做出互動式的使用者介面，通常的設計邏輯是使用 Javascript 儲存介面的狀態 (state)，而 HTML 則隨時根據Javascript 的狀態呈現出不同的內容。用純純的 Javascript 來寫，通常可以看到：

document.querySelector('someSelector').innerText = someState;

　　當只有少數的 HTML 元素需要根據 Javascript 的狀態做出改動時，這樣的撰寫方式可能還沒什麼問題。但是當需要變動的 HTML 元素越來越多時，寫起來就很費力了。為了改善這種狀況，Svelte 實現了可以直接在 HTML 當中放進 Javascript 的能力。怎麼做呢？我們一樣從昨天的 App.svelte 出發：

/src/App.svelte

<!-- 在 Javascript 當中宣告變數 someState -->
<script>
  let someState = 'TheGreatSvelte';
</script>

<!-- 在 HTML 當中使用變數 someState -->
<main>
  <p class='comment'>Check out <a href='https://ithelp.ithome.com.tw/users/20120178/ironman/7031'>Svelte Tutorial</a>, the awesome article powered by {someState}!</p>
</main>

　　因為主要更動的內容只有 Javascript 的段落 <script></script> 跟 HTML 的段落，我就不特別再重複解釋 CSS 的段落了。

第三行：let someState = 'TheGreatSvelte';
　　宣告變數 someState，並賦值'TheGreatSvelte'。
第八行：<p class='comment'>Check out <a href='https://ithelp.ithome.com.tw/users/20120178/ironman/7031'>Svelte Tutorial</a>, the awesome article powered by {someState}!</p>
　　在 HTML 段落當中以大括弧 {} 插入 Javascript 的程式碼。

　　要怎麼在 HTML 當中放進 Javascript 的狀態呢？首先，在 Javascript 當中宣告一個變數 someState，接著在 HTML 當中用大括弧 {} 展開一個 Javascript 的領域，並引入我們需要的 Javascript 變數 someState。來看看成果吧，是不是很簡單呢？

圖一、power by {someState}！

　　Javascript 可以做到的事情這麼多，只是簡簡單單放進一個一成不變的變數想必沒辦法讓大家滿足。那就讓我們放進一個閃閃發亮的變數吧：

/src/App.svelte

<!-- 在 Javascript 當中宣告變數 someState 並做出閃閃發亮的函式 sparkledText -->
<script>
  let someState = 'TheGreatSvelte';
  const sparkle = (text) => {
    const sparkles = ['★', '☆', '✧', '✪'];
    const randomSparkles = () => sparkles[Math.floor(Math.random() * sparkles.length)];
    const sparkledText = text.split('').reduce((a, c) => a + randomSparkles() + c, '');
    return sparkledText;
  }
</script>

<!-- 在 HTML 當中使用變數 someState 並利用函式 sparkledText 使其閃閃發亮 -->
<main>
  <p class='comment'>Check out <a href='https://ithelp.ithome.com.tw/users/20120178/ironman/7031'>Svelte Tutorial</a>, the awesome article powered by {sparkle(someState)}!</p>
</main>

圖二、★T☆h★e☆G✧r✧e☆a☆t☆S✪v✪e✧l✪t☆e!

在 HTML 的標籤屬性中使用 Javascript

　　明白了能夠在 HTML 利用大括弧 {} 做出可以使用 Javascript 的領域之後，接下來就簡單了。除了在文字內容 (innerText) 可以使用 Javascript 之外，在 HTML 標籤的屬性 (attribute) 也可以透過 Javascript 來控制。

/src/App.svelte

<!-- 在 Javascript 當中宣告變數 someState -->
<script>
  let someState = 'TheGreatSvelte';
  const sparkle = (text) => {
    const sparkles = ['★', '☆', '✧', '✪'];
    const randomSparkles = () => sparkles[Math.floor(Math.random() * sparkles.length)];
    const sparkledText = text.split('').reduce((a, c) => a + randomSparkles() + c, '');
    return sparkledText;
  }

  const href = 'https://ithelp.ithome.com.tw/users/20120178/ironman/7031';
</script>

<!-- 在 HTML 當中使用變數 someState -->
<main>
  <p class='comment'>Check out <a href={href}>Svelte Tutorial</a>, the awesome article powered by {sparkle(someState)}!</p>
</main>

第十一行：const href = 'https://ithelp.ithome.com.tw/users/20120178/ironman/7031';
　　宣告變數 href 並賦值 'https://ithelp.ithome.com.tw/users/20120178/ironman/7031'。
第十六行：<p class='comment'>Check out <a href={href}>Svelte Tutorial</a>, the awesome article powered by {sparkle(someState)}!</p>
　　在 HTML 的標籤當中，開啟一個 Javascript 的領域，並將網頁超連結的屬性 href 交給 Javascript 的變數 href。

圖三、<a href={href}>

　　如果恰巧 HTML 標籤的屬性跟 Javascript 變數同名的話，Svelte 還允許我們簡略寫成 <a {href}>，就像我們現在這個例子一樣。

/src/App.svelte

<!-- 在 Javascript 當中宣告變數 someState -->
<script>
  let someState = 'TheGreatSvelte';
  const sparkle = (text) => {
    const sparkles = ['★', '☆', '✧', '✪'];
    const randomSparkles = () => sparkles[Math.floor(Math.random() * sparkles.length)];
    const sparkledText = text.split('').reduce((a, c) => a + randomSparkles() + c, '');
    return sparkledText;
  }

  const href = 'https://ithelp.ithome.com.tw/users/20120178/ironman/7031';
</script>

<!-- 在 HTML 當中使用變數 someState -->
<main>
  <p class='comment'>Check out <a {href}>Svelte Tutorial</a>, the awesome article powered by {sparkle(someState)}!</p>
</main>

第十六行：<p class='comment'>Check out <a {href}>Svelte Tutorial</a>, the awesome article powered by {sparkle(someState)}!</p>
　　若 HTML 標籤屬性與 Javascript 變數同名，<a href={href}> 可以簡略寫成 <a {href}>。

　　今天 Svelte 當中的 HTML 就介紹到這邊，謝謝各位讀者支持！