JS 串接 FireBase V9 / Realtime Database 基本語法使用
Firebase 更新速度一直以來都是非常的快,每次大改版都會有部分語法更動,V8 升至 V9 主要是改成 ESM 方式引入,除此之外也有部分語法更改,雖然 Firebase 文件寫的滿詳細的,但這邊還是記錄一下 V9 版本的 Realtime Database 一些常用方法。
Firebase 更新速度一直以來都是非常的快,每次大改版都會有部分語法更動,V8 升至 V9 主要是改成 ESM 方式引入,除此之外也有部分語法更改,雖然 Firebase 文件寫的滿詳細的,但這邊還是記錄一下 V9 版本的 Realtime Database 一些常用方法。
製作網頁時圖片一直是不可少的元素,不過有時我們使用的圖片會因為圖庫網站掛掉、CORS、網址填錯 等等因素導致圖片無法正確顯示,而原生的 JavaScript 其實就有辦法做到,圖片如果無法正確顯示那麼使用替換圖片的功能。
之前在開發專案時,有發現 Chrome 的原型似乎被調整了,不過當時專案對原型使用量不大,因此沒特別注意調整什麼,而上個月開始寫鐵人賽時,有提到原型,有稍微深入瞭解一下 JavaScript 的原型發生什麼是了,這邊稍微說明一下。
這是本人第一次挑戰鐵人賽,雖然這篇幅水了不少文章,不過也終於讓我寫到完賽了 ✧*。 ٩(ˊᗜˋ*)و✧*
解構賦值是 ES6 新增語法糖,若要使用陣列、物件中的值,來見新的變數/常數,可以使用解構賦值的方法,來快速建立。
展開運算子與其餘參數是 ES6 新增的兩個特性,使用上都一樣是 ... 也就是三個點,不過實際上這兩個方法代表的意義會不太一樣,接下來一一介紹。
隨者前端需求越來越多,前端工程師在管理程式碼上的需求也越來越重,幸好 ES6 引入時 JavaScript 有引入的 ESM 的拆檔功能,以方便開發者管理程式碼,而目前大多數的 JavaScript 套件也有都使用到 ESM 的方法來做開發以及管理,算是前端工程師必學的方法之一了,而 ESM 他的全名是「ES6 Modules or JavaScript Modules」。
fetch 是 JavaScript ES6 新增的用來執行 Ajax 行為的方法,相比舊版的 XMLHttprequest 不論是閱讀程式碼、或是實際開發都方便不少,而 fetch 其實就是使用 Promise 開發的方法,因此 fetch 語法和 Promise 寫法非常類似,同時可以使用到上個章節提到的 async/await 。
async/await 是 Promise 的語法糖,最主要是提升了 Promise 在鏈式寫法的可讀性,而 async/await 能辦到的 Promise 本身都能辦到,所以不少教學都提到要先明白 Promise ,才會看懂 async/await 。
在過去 JS 要處理 Ajax 這個非同步語法,會很容易用到 Callback 寫法,而 Callback 不但不好管理,還容易寫成 CallbackHell,幸好 ES6 新增了 Promise ,對於 JS 這個單執行序的語言 Promise 非常實用。