原创 js過濾樹形結構數據並獲取新的樹形結構
工作中不時會遇見對樹形結構數據的處理，有時候只需要遍歷並獲取其中一個屬性值就行了（這部分內容請參考筆者的另一篇博客JS遍歷樹形結構方法），有時候我們則需要根據某些條件去過濾並得到新的樹形結構數據。 let nodeList
2020-07-05 19:16:48
原创 NavigationDuplicated 產生原因和解決方法
當你的Vue項目在當前的路由下企圖再次導航到當前路由時就會出現NavigationDuplicated的問題（通俗來講就是多次進入了同一個path，比如說當前你在/user/user-list頁面，這時候你通過點擊按鈕或其他的方
2020-07-05 19:16:48
原创 js遍歷樹形結構方法
let nodeList = [ {id: '1-1', children: [{id: '1-2-1'}, {id: '1-2-2'}]}, {id: '2-1'}, {id: '3-1', children:
2020-07-05 19:16:48
原创 js非標準樹狀結構數據的處理
之前筆者寫過兩篇博客來講如何處理標準的樹狀結構數據，分別是js遍歷樹形結構方法和過濾樹形結構數據並獲取新的樹形結構。這次就來聊一下如何處理非標準樹狀結構數據。標準的樹狀結構數據的下級節點存放的字段是統一的比如說我們常見的chi
2020-07-05 19:16:48
2
原创 JS腳本加載的幾個歷史階段和現代化處理方式
當你訪問一個網站的時候，相關的html，css,script，圖片等資源就開始了下載。一般情況下，你的html文檔解析過程中如果遇到script標籤，文檔解析就會暫停然後開始下載並執行你的script。這個時候你的文檔解析過程就被
2020-06-16 16:23:59
原创 走到原型鏈的盡頭
JS中到處是對象，對象之間往往會通過__proto__鏈接在了一起，這種鏈接的現象被稱爲原型鏈（極少數的對象會沒有原型,比如Object.create(null)產生的對象裏面沒有任何屬性，非常‘空’，我們稱它爲字典，這種字典對象
2020-06-10 09:12:48
原创 如何按照指定屬性排序對象數組
在工作場景中會出現對對象數組按照某一對象屬性排序的情況，例如對於下面的對象數組按照對象age從小到大排序。 let arr = [ {name: 'code', age: 18}, {name: 'jack'
2020-06-10 09:12:38
原创 帶全選項的多選下拉框封裝（基於element）
業務需求期望多選的下拉框帶有全部選擇選項，並且全部選擇選項和其他的選項爲互斥關係，而element中的下拉多選框是沒有這種全選功能的，所以需要自己實現。下面我們看一下完成的效果動圖： 實現的基本思路就是判斷選中項中是否有
2020-06-10 09:12:38
2
原创 一起捋捋BFC的特點和它解決的問題（Block Formatting Context）
BFC （Block Formatting Context）譯爲塊格式化上下文，是CSS渲染中的一塊獨立渲染區域， 計算高度的時候會算上內部的浮動元素。一個BFC區域內部的元素佈局排列不會影響外部區域元素的佈局排列。根據這些特點，
2020-05-14 03:28:57
原创 塊級元素水平垂直居中的5種技巧
元素居中分爲水平居中，垂直居中，還有水平垂直居中這三類。其中文本元素和塊元素的居中方式又有略微不同。平時工作中我們最常見的就是塊級元素的水平垂直居中和文字的水平居中了。下面是幾種塊級元素水平垂直居中的方式。 方式1：mar
2020-05-09 06:05:37
原创 廣播與派發原理(基於vue實現dispatch, broadcast)
廣播與派發適用於有祖先關係的組件間通信，原理是通過遍歷組件樹,用組件名（或者其它組件唯一標識）定位到對應的組件，並在找到的組件實例中調用$emit，從而觸發$on監聽的事件，這樣就完成了一次組件間的通信。廣播是父組件遍歷他下面的所
2020-04-23 21:39:59
原创 基於element的網站自適應方案（移動端適配）
一般而言，管理系統類的網站我們往往會按照PC的標準來設計，不會去考慮小屏幕的適配，甚至是移動端的適配，因爲這種系統網站往往涉及到大量的列表查詢頁（表格列往往很多，列內容長短不一），詳情頁（信息展示量大且分欄排布，例如一屏展示4
2020-04-20 11:39:32
45
原创 cli4 bundle分割（單獨打包第三方庫文件）
項目中的第三方庫默認會被打包到一個文件名含vendors的bundle中，如果你的項目裏面引用的第三方庫過多，那麼你的vendors就會很臃腫，文件也會變大，網站加載該文件的時候就越耗時，從而影響網站性能。這個時候我們可以考慮把一
2020-03-13 22:02:39
原创 vue cli4 配置資源CDN
出於對網站性能的要求，有時候我們不希望一些比較大的第三方庫直接打包到最後的bundle中，而會選擇在打包的時候忽略他們，並直接使用CDN上面的資源。腳手架經過升級，cli4的相關配置都需要在vue.config.js這個文件中進行
2020-03-13 22:02:39
原创 vue-router history模式前後端相應配置
vue路由有hash和history兩種模式。hash模式路由路徑如下http://localhost:8081/#/about, history模式路由路徑如下http://localhost:8081/about。 配
2020-03-08 01:25:36