使用 Vue 完成 AJAX 的更新

這次個人網站的功能很簡單,就是在最下面加上網頁最近的更新時間。最近的更新時間自然是從 Github API 叫出 Last Commit。

...這是表面上來看啦,但其實很複雜:解決各種問題起來花上了大概四到五個小時吧。

如何從 Github API 叫出 Last Commit?

首先自然要從叫出 Last Commit 開始。從這個連結的問答可以看出,你可以用以下的 Github API 叫出 Last Commit: https://api.github.com/repos/作者/專案/git/refs/heads/分支

接著發現回傳的是 Commit 的 API,讓呼叫變得如同玩俄羅斯娃娃一般。

Floral matryoshka set 2 smallest doll nested, by BrokenSphere

接下來的開發的難度也因此倍增...

參考:

gulp-uglify

接著,開發功能到一半的時候,我發現網頁的功能竟然失效了,因此困頓了一段時間。

查了 Console 發現 jscompress 出了問題。追蹤以後,才發現是因為我用的 let 是 ES6 的標準,而 gulp-uglify 並不支援 ES6。

作用域

我一開始把 AJAX 的行為放在 method 裡面,再從 mounted 叫出來。但我因此踢到了大鐵板:如果 AJAX 在 method 裡面的話,它會在網頁渲染完畢之後才開始執行。就算函式放在 mounted 呼叫也是一樣。

問題的解法是把整個 AJAX 呼叫放入 mounted 裡面,讓 AJAX 載入的同時,一起完成呼叫。

這讓我學到了 Vue 各 instnce 是在哪些時候執行,以及 AJAX 執行的時機。該死的非同步。

P.S. Vue 裡面的第一層的每一塊,稱作 instnce。

層層呼叫

開發到一半發現不知為何,有些變數竟然是 undefined。到底發生了什麼事?

我追蹤了某些變數,發現 AJAX 回傳的 JSON 如果被註冊到 Vue 的 data 裡面,Firefox 會出現一個意義不明的鎖頭。而在 Chromium 裡面則看來沒什麼。

我不清楚會變成這樣子的原因,是因為它變成了Private 屬性嗎?但好像也不對。最後,我決定直接操作回傳 JSON 的結果,把它們註冊到各個需要的變數。

接下來呢?

我發現自己很不滿意開發環境:被壓縮的 JS 檔案把 debugger 除掉了,也使得除錯難度大大增加。我需要一個易於除錯,但不會被上傳的開發環境。

參考資料