Sign in Subscribe

JavaScript

Firebase Storage 入門

關於 Firebase Firebase 是 google 的雲端資料庫平台，提供了很多 APP、WEB 所需要的後端功能，如果只是小專案完全可以用 Firebase 雲端來取代我們 local 安裝操作 DB 的需求。 其他介紹就不多闡述啦，因為這篇筆記不講 Cloud Firestore 和 Realtime Database ，而是單純以 Firebase Storage 為主 Firebase Storage 大小限制 免費方案的空間大小限制是 5GB 每日最多下載流量 1GB 一天下載次數最多5萬次 上傳次數最多2萬次 就一般的開發者寫寫 side project 是非常夠用的 新建專案 首先到 Firebase 官網新增專案 專案命名按自己喜好取名 這邊會問要不要啟用 GA 功能，因為不是此筆記重點，
SimonAllen

JavaScript Spread Operator 與 Array.concat 的比較

前言 在 JavaScript 開發中，陣列操作是不可或缺的一環，而「陣列合併」更是經常出現的需求。在幾年前我寫過筆記 https://tech.simonallen.app/es6-spread-operator-array/，但進入現職公司後，我反而看到的都是 concat()。 其實不論是在資料處理、狀態更新，還是函式參數傳遞時，我們都會面臨選擇：該用 concat() 方法，還是使用語法更簡潔的 ... Spread Operator？ 先說結論，以我目前觀看台灣的技術筆記和公司程式碼、社群朋友習慣，大家都偏好 Spread Operator，如果沒有特殊用途那我建議使用 Spread Operator。不過這篇文章還是會從語法可讀性、使用彈性、效能表現以及實務場景等面向來比較。 兩種合併方法介紹 Array.concat() const arr1 = [1, 2, 3]; const arr2 = [4,
SimonAllen

React v14 和 v16 Style 行內樣式的雷

昨天在公司遇到 React Style 行內樣式的雷，害我 dubug 了老半天。 是這樣的我們公司有兩個 B2C 的網站平台長得很像，差異只在顏色與風格不同，一個網站前端是 React v14，另一個相對新是用 React v16，而兩個網站很多功能都要一樣，所以一個前端元件寫好後要想辦法讓 React 的 14 版和 16 版共用，要到各自不同的專案複製貼上元件程式碼接著微調。 通常是舊的不支援新的，於是先改 React v14 的網站，按照該元件既有寫法，行內樣是這樣寫： <div style={{ width: "820", height: "360" }} ></div> 改完後將這個元件貼給 React
SimonAllen

IE 議題

前陣子與到各種 IE 問題真的有夠痛苦，實在不理解為什麼都 2019 年了還要支援到 IE9？IE11 就算了，IE9 欸？？IE 有多少使用量不就 GA 報表一看就知道了嗎？ 主事 PM 不理解 RD 處理 IE 9 的時間都能做其他新功能了，哀抱怨歸抱怨，這裡紀錄一下遇到的問題： 問題：HTML 5 的 input placeholder 這個 屬性 attribute，要在 IE10 才支援 解決：在與 PO 討論後、請資深 RD 與 PO 討論後，請 RD Leader 再和
SimonAllen

Vuex 存放狀態的State

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions  State內負責存放初始資料，裡面可以放任何東西：物件、陣列、數值、字串...etc 只要我們後續Vuex有用到，就應該先在State宣告其存在，就算是空值、空字串、空陣列也沒關係。 因為一但在之後的Mutations突然寫了一個未先宣告的State資料，Vuex不會當場動態產生這個變數資料出來，就會報錯。 (想像成寫程式，會用到什麼都要在編輯器最上方先宣告變數存在) 但還是有辦法的，如果要臨時在Mutations新建一個State資料，要這樣寫 Vue.set(state,’資料名稱’,’ ‘值'); 要讀取Vuex的值，我們會在(.Vue)組件的</script>的computed寫一些計算回傳的方法去讀值 export default { computed:{  //<————————寫在這裡 count(){   //<————————要讀取的Vuex對應值的方法 return this.$store.
SimonAllen

callback、promise 與 async/await

一般在ajax時，幾乎沒人會用ES5以前的xmlhttp方法去處理，因為太髒又難寫、瑣碎，我們可能會使用最常見的jQuery來寫，可能會是這樣 $.getJSON('https://randomuser.me/api/',function(data){ console.log(data) }) 或者是這樣 $.ajax({ url:'https://randomuser.me/api/', dataType:'json', success:function(data){ console.log(data) } }) 結果可說是一模一樣 在結構上也差不多，要給AJAX的目標對象(網址)與後續接收到資料處理的函式。 這個「函式」、「function」，就是我們所說的callback回呼函式 callback回呼函式 當我們執行非同步的呼叫時，我們不知道什麼時候執行完， 但我們可以傳入一個function給它，
SimonAllen

Vuex 變更狀態的 Mutations

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 每個 Mutations 都包含了兩個要素： * 函式名字 * 函式內的功能 而寫在Mutations內的函式，是唯一能直接改變State的值的Vuex方法。例如先前Vuex 引入與範例筆記的 store.js const store = new Vuex.Store({ state:{ count:0, }, mutations:{ addCount(state){ state.count += 1; } } }); 我們不該在mutations內突然使用個我們沒在state宣告的屬性(值)，想要這麼做要在mutations寫 Vue.set(state,’資料名稱’,’ ‘值'); 在mutations內動態用vuex的set去新增state的內容 如果是要新增state內物件的新屬性也可以用這種方式 const store = new Vuex.Store({ state:{ count:0, box:
SimonAllen