仿Excel (React hook) 文章待續

Excel Editor 實現 (Virtual Table 部分)

該小項目已經初步完成，寫該文章是來練習寫文章的。 目前文章進度較慢。

技術棧

• react (hooks)
• typescript

項目及微軟ExcelOnline

喜歡就給上star吧

小項目演示地址

小項目Github地址

Microsoft Excel online

背景

面試須要作一個小項目，下面是該項目的題目：

使用 TypeScript 開發一個簡易版的 Excel WebApp，實現 column & row sort，cell edit，cell calculate 等，能夠定義該 MVP 功能集。能夠不借助框架或者使用主流框架

問題

• Typescript 之前有了解，可是是第一次使用，簡單的使用應該不成問題。
• Excel 是要實現到何種程度？
• 功能實現，排序，編輯好說，計算這一個是要實現與Excel相同的函數功能麼？
• 框架仍是要用的，畢竟時間有限這裏準備直接使用create react app來開始項目

思考

從上面總結的問題只有兩個地方比較不確認。

• 描述中提到了Excel， Excel只是表格，若是隻是作成簡單的表格恐怕不能獲得太多的關注，這裏決定作出與Excel同樣的VirtualTable功能
• 基於上面的virtualtable，實現排序編輯和計算的功能。

基本的方向定了後即是整個實現步驟

• 基本的virtualtable實現
• 選區功能的實現
• 基於選區功能的其它功能實現（設計成插件方式，各個功能獨立分隔）

Virtual Table 實現

如圖所示，咱們渲染的表格將以上圖所示進行動態計算 （橫向同理）

• 考慮到視口大小是不固定以及每一頁的大小是固定的，可能會出現當前視口遠遠大於固定的頁面大小，就會出現預加載的內容都沒法填充當前視口。咱們將引入一個動態的變量來加大Perload和Rearload頁面的數量以解決這個問題。具體處理即是 Math.ceil(offsetHeight / Page(水平或者垂直)Size)