原创 第 013 期 優化移動端輸入框佔位符的交互體驗 - CSS :placeholder-shown
在移動端，如果標籤和輸入框在一行中顯示，顯示的有點窄。 如果標籤和輸入框各佔一行顯示，又浪費空間。有沒有兩全其美的方案呢？ Material Design 提供了一個兩全其美的方案。輸入框沒有值時，標籤在輸入框中顯示。在輸入框中有值或獲
2021-05-11 20:32:30
原创 第 010 期 如何更有效的使用 google？
對開發者來說，google 是個不可或缺的工具，那麼如何更有效的使用 google 呢？這裏有幾個小 tip，可以更有效的過濾搜索結果： 雙引號操作符 進行精確匹配的搜索 AND 操作符 搜索結果包含所有內容：js AND HTML
2021-05-10 01:41:09
原创 第 011 期 用 Tailwind CSS 來快速寫樣式
Tailwind CSS 是最有名，最強大的 CSS 工具類框架。 工具類 CSS 是把常用的樣式封裝成類。如: .p-0 { padding: 0; } .text-xs { font-size: 12px; } 用工具類 C
2021-05-10 01:41:09
23
原创 第 012 期 易學易用的模板代碼生成神器 - Plop
我們在做新的頁面或組件時，會做很多重複的初始化的工作。如創建類似的文件: 組件文件，樣式文件等。文件中寫類似的初始化代碼: 引入樣式，定義組件，導出組件等。 Plop 能幫你搞定這些重複工作。 Plop 介紹 Plop 是一個易學，易用，且
2021-05-10 01:41:09
原创 第 017 期 8 個實用的 Lodash 方法介紹
Lodash 提供了很多很多的工具方法。本文介紹其中 8 個實用的方法。 1 對象的深度拷貝 對象的深度克隆是很困難的。 JSON.parse(JSON.stringify(obj)) 可以實現對象的深度克隆。但有如下缺點: 值類型是 u
2021-04-15 20:48:02
原创 第 018 期 鏈表在前端的應用
數組是常用的數據結構。數組順序是由下標決定的，因此訪問數組的元素速度很快。但是，往數組添加或刪除元素時，需要把數組中的其他元素向前或向後移動，速度比較慢。 在元素很多，經常要添加或刪除元素，但不經常訪問元素的場景下，用數組的性能比較低。這種
2021-04-15 20:48:02
原创 第 015 期 優化令人生畏的條件語句的 4 個技巧
嵌套太深，分支太多的條件語句令人生畏，難以維護。本文介紹減少嵌套深度和條件分支數量的一些技巧。 優化技巧 技巧1：儘早返回無效條件 function supply(fruit, quantity) { const redFruits =
2021-04-13 13:24:27
原创 第 016 期 前後端經常爭吵？ - BFF 瞭解一下
在開發中，前端希望根據 UI 來劃分接口，這樣用戶體驗好，前端實現也容易。後端希望根據業務模塊劃分接口，這樣有利於服務下沉和解耦。前端和後端間可能會有的對話: 後端: 你多調幾個接口不就行了麼~ 前端: 多好幾個 HTTP 請求呢。包成一
2021-04-13 13:24:27
原创 第 014 期 用適配器模式來降低耦合
耦合指模塊與模塊之間關聯的程度。兩個模塊的關聯性強，稱爲高耦合，反之稱爲低耦合。 強耦合的代碼是脆弱的，不容易複用的。改一處代碼，可能導致不得不改一堆與之耦合的代碼。因此，降低耦合，能讓代碼變得健壯，容易複用。 適配器模式介紹 適配器模式
2021-04-12 02:19:32
原创 第 13 期 優化移動端輸入框佔位符的交互體驗 - CSS :placeholder-shown
在移動端，如果標籤和輸入框在一行中顯示，顯示的有點窄。 如果標籤和輸入框各佔一行顯示，又浪費空間。有沒有兩全其美的方案呢？ Material Design 提供了一個兩全其美的方案。輸入框沒有值時，標籤在輸入框中顯示。在輸入框中有值或獲
2021-04-11 03:34:02
原创 第 009 期 點擊 UI 跳轉到編輯器中對應的組件源碼的工具 - React Dev Inspector
在成百上千個組件的大型項目中，找頁面上的 UI 對應的組件源碼很花時間。對於新加入項目的同學來說，找源碼就更花時間了。 如何快速找到源碼呢？寫文檔，詳細的記錄各業務模塊的組件對應的文件地址。這麼做，耗時耗力，還會出現文檔和組件的真實位置不一
2021-04-09 18:50:16
原创 第010期 如何更有效的使用 google？
對開發者來說，google 是個不可或缺的工具，那麼如何更有效的使用 google 呢？這裏有幾個小 tip，可以更有效的過濾搜索結果： 雙引號操作符 進行精確匹配的搜索 AND 操作符 搜索結果包含所有內容：js AND HTML
2021-04-09 18:50:16
原创 第 11 期 用 Tailwind CSS 來快速寫樣式
Tailwind CSS 是最有名，最強大的 CSS 工具類框架。 工具類 CSS 是把常用的樣式封裝成類。如: .p-0 { padding: 0; } .text-xs { font-size: 12px; } 用工具類 C
2021-04-09 18:50:16
原创 第 12 期 易學易用的模板代碼生成神器 - Plop
我們在做新的頁面或組件時，會做很多重複的初始化的工作。如創建類似的文件: 組件文件，樣式文件等。文件中寫類似的初始化代碼: 引入樣式，定義組件，導出組件等。 Plop 能幫你搞定這些重複工作。 Plop 介紹 Plop 是一個易學，易用，且
2021-04-09 18:50:06
原创 第 008 期 用 Composition API 重構 Mixins 代碼
在 Vue 中，Mixins 可以包含任意組件的選項。這使得用 Mixins 能很方便的抽象多個組件間的公共部分，但也會帶來一些問題: 命名衝突導致的運行結果的不確定性。組件 和 引入的 Mixins，引入的多個 Mixins 之間，都會
2021-04-08 11:51:30