作者：陳俊佑 / 臺灣大學計算機及資訊網路中心程式設計組行政組員

本文接續【網站前端開發學習手札】Alpine-羽量級JS框架(上篇)介紹Alpine羽量級alpine基礎指令及魔法屬性...

大家好，我是富田町47番地的社畜工程師柚子哥，Alpine-羽量級JS框架(下篇)將會介紹剩下的alpine基礎指令及魔法屬性給大家知道。

基礎指令 ( 續 )

x-effect: 他主要功能是alpine的原件中的特定個生命週期會觸發副程式，一是第一次被渲染到DOM時觸發，第二個是數據更新時觸發。

以下範例內含兩個x-effect。

第一個是用input輸入去控制標題，內容進而觸發x-effect效果去呼叫LogTitle副程式，可以看到圖4輸入文字內容時圖5就會看到keyin每個數字時都呼叫一次副程式。

第二個範例則是用x-if去切換元件的開啟及關閉，由於x-if每次都會建置DOM跟刪除DOM，所以就可以看到圖7知道元件每次被渲染時都會呼叫一次setupEventListener副程式。

圖1. x-effect指令

$nextTick: 這個魔法屬性功能是在使用Alpine更動數值之後，他才會執行$nextTick所綁定的函式，用說的比較模糊，我們直接看範例，範例中我依樣用一個按鈕做計數器，計數器的副程式中我加入3個console.log去看執行狀態，其中一個console.log是用$nextTick去呼叫，實際點一次計數器，從主控台那邊則會看到程式一開始跑第一個console.log會顯示【起始狀態:0】，接下來計數+1，在來跑計數器後面的console.log顯示【clicks++後的狀態:1】，最後才執行$nextTick去呼叫的console.log顯示【nextTick抓到的狀態:1】，由此大家應該可以知道$nextTick順序。

$root: 他從呼叫去去尋找DOM tree元素中最靠近有設定x-data的資料，因此下面的範例中我設定3個x-data，每個x-data是一層包一層，並每層設置按鈕，每個按鈕按一次，他就去往上抓最靠近的x-data，並且console.log出HTML 中的 data-* 属性。

※新手小補充：HTML 中的data-* 属性是一個自定義的屬性，”data-“開頭後面接想要的名稱，用於嵌入額外的資料，這資料不會渲染到畫面上，可以用JS或CSS去呼叫數據，可以用先前說過的x-bind把資料塞進去。

Alpine.data(): 在上篇中X-data中有說過如果如果資料過於攏長就可以用Alpine.data()提取到專用元件中，這寫法跟我用function呼叫方法實際作用一樣，差別在於一個是用return把alpine元件資料返回，另一個則是將函數作為alpine的元件，但如果是是要用於全域的元件部分還是建議使用Alpine.data()。

用法是加入JS語法的事件監聽document.addEventListener(event, function, useCapture)，這邊簡單說一下語法，跟alpine無關但還是分享出來，event是觸發事件的類型(init、click、keyup等)，function是事件發生要執行的函數，useCapture這參數可以略過，輸入是布林值，主要是控制target element跟ancestor element的執行順序，true是capture(由外層往內層執行)、false是bubbling(由內層往外層執行)。詳細細節可以見W3官方網站(https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

而監聽語法中event加入alpine初始化'alpine:init'時執行，而執行的函式內就加入Alpine.data，Alpine.data(‘alpine綁定的名稱’,()=>({  })，如此就完成了。

document.addEventListener('alpine:init', () => {

Alpine.data(AlpineXdata,()=>({

由於用途跟x-data一模一樣，所以下面範例是改寫官方的範例寫了進階的複合用法，給大家參考。HTML中建立兩個alpine的x-data，分別是dropdown跟timer。

dropdown是控制button按下時觸發的副程式跟x-if控制template的渲染，button的x-bind="trigger"這邊用了複合語法，之前範例中有關button的觸發語法可能會寫成<button @click.prevent="this.enabled = ! this.enabled">Start</button>，用x-on去觸發，但這邊的語法是用x-bind把alpine的指令給封裝在trigger中，其好處就是可以重複使用。

政府資料開放平台： https://data.gov.tw/

Mozilla： https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

w3： https://www.w3.org/TR/DOM-Level-3-Events/#event-flow