原创 前端性能優化：如何減少長列表的渲染時間
問題描述 列表 (list) 是瀏覽器端用戶交互的常見元素。一般的 select 由兩個部分組成：外層的容器和內層的 list，外層的大小固定，通過滑動來調整可視列表的範圍。 單頁面應用（SPA）的設計理念中有一句話，視圖是數據的映射。在實
2020-06-14 12:15:31
原创 D3數據可視化-餅圖-pie
Demo 餅圖／環形圖可以清晰地展示數據之間的比例關係。下面兩個環形圖分別展現了電子遊戲 GTAV 在各個遊戲硬件平臺上和在不同國家的銷售量。 我們的源數據是這樣的： 數據來自 vgcharts 可以看到相對於表格數據，餅圖可以更容
2020-06-14 12:15:31
原创 # 從 JavaScript 到 TypeScript，React 項目遷移幾點 tips
相對於 JavaScript，TypeScript 增加了類型系統。通過靜態檢查，開發者可以更早地發現語法錯誤，同時類型標註也帶來了清晰的文檔。這篇文章記錄了幾個關於 React 項目從 JavaScript 遷移到 TypeScript
2020-06-14 12:15:31
原创 D3數據可視化-stack_bar
案例 與餅圖相似的是，stack bar 圖也適合表現各個項目在總體中的比例。但同時 stack bar 還可以表現隨着時間的推移各個項目比例的變化情況，這是餅圖難以做到的。 下圖展現了從2017年2季度到2018年1季度全球手機市場中各廠
2020-06-14 12:15:31
原创 模塊打包器的實現（一）
什麼是打包器 一個完整的 JavaScript 項目（比如各種前端SPA）由各種各樣的資源模塊（module）組成，包括 JavaScript 代碼，CSS 樣式以及圖片等各種文件。打包器（module bundler）可以分析入口文件（e
2020-06-14 12:15:31
原创 D3數據可視化-General Update Pattern
D3 是 Data Driven Documents 的簡稱，意思是數據驅動文檔。D3 可以幫助我們自動化地操作 HTML、SVG 或 Canvas 等元素（element），對其進行添加、更新和刪除處理。一旦綁定了數據和元素的對應關係之後
2019-06-19 21:40:15
原创 D3數據可視化-柱狀圖-Bar
案例 柱形圖是最廣泛使用的圖表類型之一，同時也具有很多的展現形式。 比如：Y座標軸可以有一條，也可以有兩條分別代表不同的尺度。柱形可以是單個柱子，也可以是幾個柱子一組。可以垂直方向排列，也可以水平方向排列。 水平排列的柱形圖： 垂直排列
2019-06-19 21:40:15
原创 D3數據可視化-Area
案例 Area 圖形可以填充整塊的圖形，下面是同樣的數據（2017年2季度到2018年1季度手機品牌市場佔有情況）分別在 area 和在 stack bar 圖呈現的結果。 解析 d3.area 可以生成一個圖形生成器，輸入一個數組數據
2019-06-13 20:04:26
原创 D3數據可視化-折線-line
案例 折線圖適合展示隨着時間推進，數值的變化趨勢。下圖是幾家科技公司在2009年6月到2019年6月間的股票價格圖，數據來源於雅虎金融。 解析 SVG 有幾種元素都可以畫出線段。 line: 用於繪製直線，只需要起始和結束點的x軸和y軸
2019-06-11 20:02:49
原创 Stack bar chart
我們將會利用 D3.js 把數據轉化爲如下 stack bar 圖。 數據： [ { day: 1, apple: 10, tomato: 10, orange: 20, }, { day
2019-06-04 20:19:16
2
原创 如何創建一個前端 React 組件併發布到 NPM
“造輪子”是非常有效的學習方法。在熟練掌握API的搬運方法之後，我們可以通過自己“造輪子”來進一步掌握和理解更底層的知識。自己完成一個組件的開發之後，我們可以打包上傳到 NPM 來分享自己的成果。在後面的步驟中，將會實現以下幾個小目標：
2019-05-27 19:42:34
原创 D3.js, 數據可視化入門筆記
D3入門 D3（Data Driven Docuemtns）是一套非常優秀的數據可視化庫，它可以幫助開發者在瀏覽器中直觀地展現各種數據。 雖然這個工具本身非常強大，但是其學習門檻並不低。其中一個原因在於教程的不友好，新手學習起來很容易沒有頭
2019-05-27 19:42:34
原创 Viewport 和幾個相關問題
Viewport 和幾個相關問題 什麼是 Viewport Viewport 是當前瀏覽器的可視內容範圍，對於桌面端來說就是當前瀏覽器的窗口，多數時候並不需要考慮這個參數的影響。而當我們談 viewport 的時候，都是在討論移動端的情況。
2019-05-27 19:42:34
原创 React 實現簡易輪播圖
使用 ReactJS 實現一個簡易的輪播圖 (carousel) 組件。 Task 1：在相框中展示圖片，左右按鈕切換當前圖片 實現思路；把圖片橫向排列成組(image row),放置在相框(frame)中，隱藏超出相框的部分。利用圖片組
2019-05-27 19:42:34
原创 初級前端面試小記
2018 年初連續面試了十多家初級前端崗位，每次面試結束之後都會習慣性地記下來被問到的問題。最後歸納總結了一些題目和自己的經驗，公佈出來希望對入門新手有一點幫助。因爲個人水平有限，所以遇到的都是一些很初級的問題，公開發表權當拋磚引玉。 首先
2019-05-27 19:42:34
1