作者：陳俊佑 / 臺灣大學計算機及資訊網路中心程式設計組行政組員
說到網頁的前端開源框架JavaScript Framework，大多數人都會想到的應該是最有名的御三家React、Angular、Vue，若是開發小型專案，使用React、Angular簡直是殺雞用牛刀。本文要介紹的Alpine羽量級前端框架，雖然框架比較小眾，不過語法跟Vue較為相似，易學易懂...
前言
大家好，我是富田町47番地的社畜工程師柚子哥，說到網頁的前端開源框架JavaScript Framework，大多數人都會想到的應該是最有名的御三家React、Angular、Vue，但由於我的工作性質都是開發小型專案，使用React、Angular簡直是殺雞用牛刀，反觀Vue是御三家中較為輕量化框架的首選。但由於開發者是比較敏感的大陸人，行政院有發文表示公家單位為避免機敏資訊遭不當竊取，有使用大陸品牌的資通訊產品都要盤點並汰換掉。當時有用Vue的公家單位就像熱鍋上的螞蟻一樣十分著急，畢竟要替換整個框架不是個簡單的事情，自行開發的單位要去學新的框架、委外開發系統的單位則是要花一筆錢請廠商換框架，實在是勞民傷財。還好民國110年7月13日行政院有發文解除Vue列管，大家可以自行上網搜尋院臺護長字第1100177483號文附件，這才讓一些行政機關鬆了口氣。雖然解除了列管但是上級機關來資安稽核時還是特別容易被盯上，會有一些奇怪的要求。為了避免夜長夢多，因此開發新系統時我就會選用別的框架，就是這次要介紹的Alpine羽量級前端框架，雖然框架比較小眾，不過語法跟Vue較為相似，易學易懂，希望大家會喜歡這篇，順道一提臺大官網也是用Alpine框架。
圖1.臺護長字第1100177483號文附件截圖
基礎環境建構
依照慣例，會把大家當作程式初學者來帶如果已經有底子可以略過這一段，這邊我開發環境使用的是用免費的Visual Studio Code開發平台(https://code.visualstudio.com/)，大家可以自行到官網去下載安裝。
Visual Studio Code裡面有2個延伸模組非常建議大家裝上去可以加快學習速度。
圖2.延伸模組
第一個是Alpine.js IntelliSense，這個模組是可以智慧感知alpine指令跳出補字選項。
圖3.Alpine.js IntelliSense
第二個是Live Server，學前端網頁開發的幾乎都會用這個模組，這個模組強大的地方是開啟一個即時動態刷新的網頁，你程式修改完存檔後就會即時顯示在網頁上。
圖4.Live Server
Live Server安裝完後重新啟動Visual Studio Code，就可在右下角看到一個Go Live的選項，點開啟動之後就是會及時刷新的網頁，用完記得再按一次關閉。
圖5.Go Live
接下來我們在左邊開新的檔案，建立一個副檔名為html的檔案。
圖6.建新檔案
接下來點新建的檔案，建立網頁基礎的設定，主要是告訴瀏覽器這是HTML的文件，網頁送出的編碼字集是utf-8格式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
圖7.基礎設定
再來要把今天的主題alpine引用近來，由於是教學範例所以我直接用CDN的方式引入，html中加入
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
這樣就完成初步設定。
圖8.完成設定
指令
Alpine還有很多指令跟修飾詞，這邊我大致上介紹幾個常用的指令入門教學，剩下更深入的指令與修飾詞用法還是要靠大家自行去摸索使用。
x-data:主要功能是宣告alpine作用的HTML區塊及裝載相關的數據、函數等。以下是簡單的簡單範例，在一個div標籤內定義了一個x-data，而x-data內部有一個名為Title的容器，這容器在這div的標籤內可以任意使用。
圖9. x-data指令
而這種寫法遇到有很多容器或很多函數時就會發現div標籤越來越長，因此接下來的範例我會改成呼叫function的方式去定義x-data，以下就是修改的方式，x-data="AlpineXdata()"，如此我們所定義的資料及函數就會看得比較清楚，當然還有內建Alpine.data()的Globals指令可以使用，不過初期我們先跳過。
圖10.修改後寫法
x-text:主要功能是將綁定的文字內容插入到innertext的節點內，以下範例是標題加內文的演示，我在h1跟h4的標籤內分別加入x-text標籤，並分別綁定不同的容器，網頁上就會如實呈現。
圖11.x-text指令
圖12.x-text指令結果
x-html:功能跟x-text很像，是將綁定的文字內容插入到innerhtml的節點內，以下範例是兩個Article跟Article2的標籤，內容都是用html的粗體標籤包覆著的內容，一個用x-text顯示一個用x-html顯示， x-html會把內容的標籤一起使用，而這其實就容易引發XSS (Cross-Site Scripting)攻擊，所以一般來說能避免使用x-html就避免掉。
圖13.x-html指令
圖14.x-html指令結果
x-on:主要是監聽動態事件，例如滑鼠點擊、畫面上下滾動、鍵盤輸入的動作就會觸發一段副程式，他的寫法就是x-on加冒號再加上要監聽動作事件的修飾詞，而x-on是非常常用的指令，所以他有快捷寫法x-on:可以改用@代替，以下範例是在h1的標籤內加入x-on監測滑鼠點擊(click)之後呼叫副程式然後跳出alert警告。
圖15.x-on指令
圖16.X-on指令結果
除常用的滑鼠Event (click、mousedown、mouseenter、mouseleave)、鍵盤Event(keydown、keypress、keyup )、視窗Event (scroll、resize)，官方還列出了下面這些修飾詞供大家參考。
|
Modifier修飾詞
|
Keyboard Key鍵盤按鍵
|
|
.shift
|
Shift
|
|
.enter
|
Enter
|
|
.space
|
Space
|
|
.ctrl
|
Ctrl
|
|
.cmd
|
Cmd
|
|
.meta
|
Cmd on Mac, Windows key on Windows
|
|
.alt
|
Alt
|
|
.up .down .left .right
|
Up/Down/Left/Right arrows
|
|
.escape
|
Escape
|
|
.tab
|
Tab
|
|
.caps-lock
|
Caps Lock
|
|
.equal
|
Equal, =
|
|
.period
|
Period, .
|
|
.slash
|
Forward Slash, /
|
表1.修飾詞對應表
x-bind:其主要功能是設定HTML標籤的屬性，他有簡寫就是(:)冒號，下面範例展示3個標籤，一個是文字輸入框的佔位符placeholder，輔助使用者填寫欄位，增加使用者體驗的標籤，第二個範例是用style控制文字顏色，第三個則是src圖片標籤控制圖片的網址。
圖17. x-bind指令
圖18. x-bind指令結果
x-show:主要是用布林函數去控制該段DOM元素的 display: none 來顯示或隱藏，我用一個div包住內文跟LOGO，並綁定x-show，再x-data中設定x-show初始直為false不顯示，最後在Title標題加個事件監聽，點擊標題就觸發副程式，轉換x-show的值。
圖19. x-show指令
圖20. x-show指令初始隱藏狀態
圖21.x-show指令點擊標題後顯示狀態
x-transition:主要功能是轉場效果，類似CSS 中transition的陽春版，可以跟x-show合併使用，由於大部分的轉場效果都是寫在CSS中，所以這算是一個過渡期的功能，下面列一些基本的指令供參考，就不演示，大家可以自己玩一下。
|
指令
|
效果
|
|
x-show.transition
|
預設淡入淡出加滑入滑出
|
|
x-show.transition.opacity
|
淡入淡出
|
|
x-show.transition.scale
|
滑入滑出
|
表2.show與transition結合使用
x-model:利用input輸入標籤對x-data中的資料進行雙向綁定，可以取得資料也可以設定資料，聽起來很難懂，就從範例下面來看，一開始我在Article的容器內裝入預設值(這是內文)，所以圖23一開始標籤及輸入框都會出現這是內文的文字，我們一但在輸入框內輸入test時(用x-model去設定資資料)，x-data內的Article內容就變成test如圖24，立即就顯示到網頁上，下面我又設計一個button是直接指定x-data的Article值變成Article，因此我們點一下按紐時，輸入框的內容又被雙向綁定(x-model去取得資料)成Article的文字如圖25。
圖22. x-model指令
圖23.初始狀態
圖24.輸入框控制x-data
圖25.x-data控制輸入框內容
而x-model可以支援以下這幾種html標籤
<input type="text">
<textarea>
<input type="checkbox">
<input type="radio">
<select>
x-if：使用上跟x-show很像，都是切換畫面上的元素，但本質上作法不一樣，x-show 是透過display: none 來顯示或隱藏，x-if則是直接刪除或添加DOM來呈現畫面的變化。因此官方建議x-if要放在<template>標籤內使用，不要直接放在真實元素上面，<template>元素是用戶端的暫存機制，不會顯示出來，但可以靠JavaScript去實體化，詳細可以到mozilla的開發者網站說明https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/template內有非常詳細的說明及範例。這次的範例是我用x-if把內文都包住，且預設是關閉，下面設立兩個按鈕分別是開與關，然後用F12模式觀看HTML變化。
圖26.x-if指令
圖27.x-if指令起始畫面
圖28.x-if指令起始HTML元素
圖29.按open=true
圖30.內文被實體化並顯示。
x-init：其功能是alpine的組件初始化時運作一個function，其範例會在後面小試身手一起合併使用展示功能。
x-ref：其功能必須要搭配魔法特性一起使用，類似getElementById，直接抓取dom元素來操作使用，下面的簡單範例是我在內文綁定一個x-ref="Article"，新增一個輸入框跟按鈕，按鈕呼叫副程式使用魔法屬性($ref)定位DOM，去把輸入框輸入的文字更新到Article標籤中。並且可以觀察一下console.log顯示ref抓到的DOM.魔法屬性下篇會講，這邊就先簡單帶過運用。
圖31. x-ref指令。
圖32.畫面
圖33.輸入test並變更文字
圖34.console.log內容。
x-for：他主要功能就像是把陣列中的資料一一建立成個別的dom元素，而依alpine使用慣例，凡會新增的或刪除dom元素的指令都要寫在<template>元素中，下面範例是x-for的使用實例，讓x-for產生list，把會重複的<li>放在<template>元素中，<template>內放入。
圖35.x-for指令。
圖36.x-for指令結果。
綜合練習-小試身手
上面幾個基本實用指令學會之後，現在就來綜合應用一下，假設實作情況是我要寫前端使用者腳踏車站查詢列表，用後端工程師給的api去串接，並且新增一個輸入框及按鈕作為查詢地址用，進入頁面預設顯示所有站點。
首先我們用政府資料開放平台(https://data.gov.tw/)的資料去玩，我採用的是youbike站點資訊，裡面的資訊非常多大家可以自行查看，我只選了站點編號、地址、X座標、Y座標的資料來當範例使用，(https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json)。
- Html頁面加入<input>輸入搜尋字串，並雙向綁定x-model="Searchkeyword"跟x-bind:placeholder="placeholder"。
- 加入<button>送出搜尋，綁定@click="loadArticleData()"，點擊按鈕就執行副程式去抓資料。
- <body x-data="AlpineXdata()" x-init="loadArticleData()"> 在body中加了x-data 設定相關資料，因為進頁面時就想要預載資料所以使用x-init指令使其進入時執行初始化loadArticleData()副程式，由副程式去抓資料。
- 加入表格<table>，用< template>加入x-for指令，產生<tr><td>表格欄位，每個<td>用x-text綁定不同資料欄。
- 副程式中用fetch()取得資料後用json()讀取並解析數據，再加一層filter()濾波器，比對搜尋欄內資料跟地址欄位有相同的字元就列出來。
- 再細膩一點用三元運算符，如果搜尋欄位是空的就不用浪費運算力做filter()，直接丟資料進去，(this.Searchkeyword === '') ? data : data.filter(item => item.ar.includes(this.Searchkeyword));。
- 加入catch，出錯誤就console.error顯示錯誤資訊，方便Debug。
如此一來就完成這次的小試身手作業與目標。
圖37.小試身手HTML段
圖38.小試身手JS段
圖39.小試身手實際畫面
圖40.小試身手搜尋畫面
結語
Alpine是個很不錯的羽量級框架，對於我們都是開發無數小專案的工作者來說真是一大福音，學過Vue的再轉到Alpine幾乎可以快速銜接，非常適合公部門的各式小型系統，甚至沒學過其他JS框架的程式小白應該都可以在1天內學會很多入門的功能進而開始使用。
感謝大家耐心的閱讀，如內容有誤請不吝指正，讓我知道最新最正確的資訊，也可以分享給大家少走冤枉路，謝謝。
參考資料