原创 如何優雅的使用react hooks來進行狀態管理

  在使用react和redux的過程中，一直有一個問題，哪些狀態需要放在redux中，狀態需要保存在組件內的local state中，此外不合理的使用redux可能會帶來狀態管理混亂的問題，此外對於local state局部狀態而言，r

2019-09-19 18:05:16 2

原创 在Typescript項目中，如何優雅的使用ESLint和Prettier

  對於Typescript項目的編碼規範而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規範js代碼，通過配置解析器，也能規範TS代碼。此外由於性能問題，TypeScript 官方決定全面採用ESLint，甚至把倉庫作

2019-07-04 10:15:09

原创 你真的懂switch嗎？聊聊switch語句中的塊級作用域

  最近在代碼中不小心不規範的，在switch裏面定義了塊級變量，導致頁面在某些瀏覽器中出錯，本文討論以下switch語句中的塊級作用域。 switch語句中的塊級作用域 switch語句中的塊級作用域可能存在的問題 規範和檢測 本

2019-02-28 10:14:56

原创 從Express到Nestjs，談談Nestjs的設計思想和使用方法

  最近已經使用過一段時間的nestjs,讓人寫着有一種java spring的感覺，nestjs可以使用express的所有中間件，此外完美的支持typescript,與數據庫關係映射typeorm配合使用可以快速的編寫一個接口網關。本文

2019-02-14 16:44:53 24

原创 React生態，dva源碼閱讀

  dva的思想還是很不錯的，大大提升了開發效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益於Redux的狀態管理,以及Redux-saga中通過Task和Effect來處理異

2019-01-24 18:04:39 1

原创 發佈一個npm包，用於監控頁面中的所有API請求的狀態和結果

  在前端監控系統中，或者其他場景下，如果我們需要監控當前頁面下所有請求狀態。可能通常請求下，我們會選擇在請求的回調中去處理。這種做法的缺點就是會侵入具體的業務代碼。在通常的監控中，監控部分的代碼和業務部分的代碼是分離的。此外，如果存在很多

2019-01-20 15:14:49 4

原创 在單頁應用中，如何優雅的上報前端性能數據

  最近在做一個較爲通用的前端性能監控平臺，區別於前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時間、每個頁面所有資源的加載時間以及每一個頁面中所以請求的響應時間等等。   本文的介紹的

2019-01-14 10:04:50

原创 在單頁應用中，如何優雅的監聽url的變化

  單頁應用的原理從早起的根據url的hash變化，到根據H5的history的變化，實現無刷新條件下的頁面重新渲染。那麼在單頁應用中是如何監聽url的變化呢，本文將總結一下，如何在單頁頁面中優雅的監聽url的變化。 單頁應用原理 監聽

2018-12-29 11:44:43

原创 golang學習筆記（二）—— 深入golang中的協程

小白一枚，最近在研究golang，記錄自己學習過程中的一些筆記，以及自己的理解。 go中協程的實現 go中協程的sync同步鎖 go中信道channel go中的range go中的select切換協程 go中帶緩存的channel g

2018-12-27 10:14:00

原创 golang學習筆記（一）——golang基礎和相關數據結構

小白前端一枚，最近在研究golang，記錄自己學習過程中的一些筆記，以及自己的理解。 go中包的依賴管理 go中的切片 byte 和 string go中的Map go中的struct結構體 go中的方法 go中的interface接口

2018-12-26 14:54:59

原创 聊聊Typescript中的設計模式——裝飾器篇(decorators)

  隨着Typescript的普及，在KOA2和nestjs等nodejs框架中經常看到類似於java spring中註解的寫法。本文從裝飾模式出發，聊聊Typescipt中的裝飾器和註解。 什麼是裝飾者模式 Typescript中的裝

2018-12-17 10:22:44 1

原创 在React項目中，如何優雅的優化長列表

  對於較長的列表，比如1000個數組的數據結構，如果想要同時渲染這1000個數據，生成相應的1000個原生dom，我們知道原生的dom元素是很複雜的，如果長列表通過生成如此多的dom元素來實現，很可能使網頁失去響應。   貫穿React

2018-12-03 13:24:51 37

原创 從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

  爲了實現分離業務邏輯代碼，實現組件內部相關業務邏輯的複用，在React的迭代中針對類組件中的代碼複用依次發佈了Mixin、HOC、Render props等幾個方案。此外，針對函數組件，在React v16.7.0-alpha 中提出

2018-11-01 16:14:27 5

原创 發佈一個react組件——react-read-pdf，用於在移動端展示PDF文件

PC端的瀏覽器對於PDF文件的展示沒有太大的問題，給定一個PDF的鏈接，就可以用瀏覽器默認的展示樣式來展示和渲染PDF文件的內容。比如一個"http://www.baidu.com/test/pdf"。 如何在移動端展示這個文件。爲了在移

2018-10-25 15:34:37 2

原创 從路由原理出發，深入閱讀理解react-router 4.0的源碼

  react-router等前端路由的原理大致相同，可以實現無刷新的條件下切換顯示不同的頁面。路由的本質就是頁面的URL發生改變時，頁面的顯示結果可以根據URL的變化而變化，但是頁面不會刷新。通過前端路由可以實現單頁(SPA)應用,本文

2018-09-18 18:40:58