原创 使用類名，高效快捷的進行flex佈局
背景 如今前端開發，使用flex進行佈局已經非常普遍了。就我本身舉例，除了特別的定位，不論整體還是細節的佈局，基本上都使用flex來實現，不僅高效而且簡潔。 但是使用flex佈局，重複的場景非常多，都是常用的幾個屬性和屬性值： 定義f
2021-03-27 07:09:12
3
原创 element-ui 彈窗組件封裝 極簡方案
封裝el-dialog爲一個組件 我們在使用element-ui的時候，如果一個彈窗中的內容很多，那麼我們經常會把這個彈窗封裝成一個組件，如下： <!-- DetailDialog.vue html --> <template> <el
2021-01-23 17:03:29
4
原创 作爲一個CTO和技術leader，我學到的最重要的事情
作爲一個CTO可能會很艱辛和沮喪，但也充滿了樂趣和滿足感。 過去的七年，我在Walla!NEWS, Careerpage, 和 Appwrite擔任CTO、研發部經理、軟件架構師期間，積累了一些見解，可以幫助我完成我的工作並實現公司的目標。
2020-06-14 07:56:58
原创 理解javascript裝飾器
不久前，我開發了一個react應用，使用mobx做狀態管理。這是一個時而興奮時而困惑，但總體而言很享受的經歷，很快我將會把它寫出來。在使用mobx開發時，我發現了一個非常有趣的獨特之處，那就是它使用裝飾器來註釋類的屬性。我之前在寫java
2020-06-14 07:56:58
原创 活動倒計時實現方案、setInterview和setTimeout的對比
聊一下活動倒計時的一些實踐方案與思考。方案總體來說分爲兩種： 方案一：依賴本地時間 當然不能簡單粗暴的直接獲取本地時間來倒計時，結果可能是每個用戶的倒計時時間千差萬別，而且用戶可以惡意更改本地時間去繞過倒計時操作。 方案：接口獲取到
2020-06-14 07:56:48
原创 vue3的進步
剛剛看了Vue.js作者在VueConf 2019上海的演講視頻，學習到了很多的東西。瞭解了vue在全球的影響力、活躍的社區以及核心開發團隊，更主要的是vue2當前的一些問題和在vue3中的一些進步。下面我總結了從中學習到的幾點。 vd
2020-06-14 07:56:48
原创 CDN與DNS工作流程
CDN 1. 背景 數據在網絡中的傳輸距離直接影響着請求的響應速度，而如果服務器不能全覆蓋你的業務範圍，那麼你的應用響應速度就會變慢，體驗變差。所以縮短客戶端與服務器之間的物理距離，是很有必要的。 以前玩遊戲的時候，總會有一種經歷，需要你自
2020-06-14 07:56:48
原创 webpack中tapable原理詳解，一起學習任務流程管理
學習webpack源碼時，總是繞不開tapable，越看越覺得它晦澀難懂，但只要理解了它的功能，學習就會容易很多。 簡單來說，有一系列的同步、異步任務，我希望它們可以以多種流程執行，比如： 一個執行完再執行下一個，即串行執行； 一塊執
2020-06-14 07:56:48
原创 20個幫你更快搬磚的vscode快捷鍵
原文鏈接 這篇文章旨在幫助使用 VS Code 的人能夠更快速的開發，不是每個人都有時間去研究每一個提示和技巧，去發現幫助他們更快開發的那一個 - 因爲太多了。 所以我會列出我最喜歡用的可以使我快速開發的快捷鍵。 let's start
2020-06-14 07:56:48
原创 活動倒計時實踐與思考
聊一下活動倒計時的一些實踐方案與思考。方案總體來說分爲兩種： 方案一：依賴本地時間 當然不能簡單粗暴的直接獲取本地時間來倒計時，結果可能是每個用戶的倒計時時間千差萬別，而且用戶可以惡意更改本地時間去繞過倒計時操作。 方案：接口獲取到服務前
2019-11-05 15:35:33
原创 vue+elementUI 複雜表單的驗證、數據提交方案
背景 當我們在做後臺管理系統時，經常會遇到非常複雜的表單： 表單項非常多 在各種表單類型下，顯示不同的表單項 在某些條件下，某些表單項會關閉驗證 每個表單項還會有其他自定義邏輯，比如輸入框可以插入模板變量、輸入字符數量顯示、圖片上傳並顯
2019-06-25 15:09:56
1
原创 前端項目無獨立部署環境時，使用shell命令簡化依賴後臺部署的繁雜操作
背景 有一些前端項目，沒有獨立的的各環境部署流程，需要依附後臺項目的靜態服務來一同部署，這種情況下，前端同學提交一次代碼將會是很繁雜的操作 修改代碼 打包項目 前端項目git提交 拉取後臺項目最新代碼 刪除後臺項目的靜態服務目錄下，舊的
2019-06-25 15:09:56
2
原创 深入理解ES6 ---- 迭代器
迭代器 遍歷器（Iterator）是一種接口，爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。 (1) Iterator 的作用 爲各種數據結
2019-04-09 15:13:50
原创 深入理解ES6 --- 對象
對象字面量語法擴展 (1) 屬性初始值簡寫 爲對象字面量屬性賦值爲同名的局部變量時，不必再寫: 和值，只寫屬性名即可。這種寫法不僅簡潔，而且也有助於消除命名錯誤， let name = '漓漾li' let age = 18 // es5
2019-03-30 13:44:59
原创 new fn() 做了什麼
1. 函數的多重用途 函數可以搭配new使用，函數內部的this會指向一個新對象，最終函數會返回這個新對象 function fn(){ this.count = 1 } new fn() // {count: 1} fn()
2019-03-26 13:24:26