表格是最重要的存儲(chǔ)和計(jì)算數(shù)據(jù)的格式之一猾骡，也是在線(xiàn)協(xié)同辦公中一個(gè)關(guān)鍵組成部分规阀。
本文介紹如何在10行代碼內(nèi)，使用React創(chuàng)建一個(gè)功能豐富的Excel表格绪妹。
快速上手
首先庆寺，開(kāi)始先建一個(gè)空的React項(xiàng)目create-react-app
(如果你已經(jīng)有了一個(gè)React項(xiàng)目，可以跳過(guò)這一步）
npx create-react-app my-spreadsheet
如果你用yarn的話(huà)
yarn create react-app my-spreadsheet
之后银择，進(jìn)入my-spreadsheet目錄中多糠，安裝表格庫(kù)
# using npm
npm install @fortune-sheet/react
# or using yarn
yarn add @fortune-sheet/react
將src/App.js替換為以下內(nèi)容
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"
function App() {
return <Workbook data={[{ name: "Sheet1" }]} />
}
export default App
并且，在src/index.css中增加一下代碼
html, body, #root {
height: 100%;
}
至此浩考，所有準(zhǔn)備工作做完了夹孔，可以直接啟動(dòng)項(xiàng)目了！使用以下命令
# using npm
npm start
# or using yarn
yarn start
可以盡情玩轉(zhuǎn)并嘗試各種功能了～
關(guān)于表格庫(kù)
本文中的表格庫(kù)FortuneSheet是一個(gè)用原生React實(shí)現(xiàn)的表格組件析孽，將來(lái)還會(huì)支持Vue搭伤，它是完全開(kāi)源的，沒(méi)有任何使用限制袜瞬。
Github地址: https://github.com/ruilisi/fortune-sheet
在線(xiàn)體驗(yàn)Demo：https://ruilisi.github.io/fortune-sheet-demo/
協(xié)同版Demo：https://xiemala.com/s/mkAyPu
官方文檔：FortuneSheet Document (ruilisi.github.io)
優(yōu)化點(diǎn)
本組件源于另一個(gè)開(kāi)源項(xiàng)目Luckysheet怜俐，它使用jQuery實(shí)現(xiàn)，但在團(tuán)隊(duì)的使用過(guò)程中吞滞，發(fā)現(xiàn)其在設(shè)計(jì)層面的諸多問(wèn)題佑菩，同時(shí)項(xiàng)目臃腫，難以維護(hù)裁赠，導(dǎo)致修改Bug和二次開(kāi)發(fā)非常困難殿漠。團(tuán)隊(duì)思考再三，毅然決定扎入這數(shù)十萬(wàn)行代碼的項(xiàng)目中佩捞，從中創(chuàng)建出一個(gè)全新的绞幌，設(shè)計(jì)合理，易于維護(hù)的表格組件一忱，并同樣完全開(kāi)源莲蜘。
FortuneSheet在Luckysheet的基礎(chǔ)上做了很多優(yōu)化谭确，其中解決的核心痛點(diǎn)：
- 使用 Typescript 編寫(xiě)
- 項(xiàng)目庫(kù)可以使用 import / require 導(dǎo)入了
- 同頁(yè)面支持多個(gè)實(shí)例
- 去掉了 jQuery 的依賴(lài), 用原生 React / Vue + immer 來(lái)管理Dom和狀態(tài)。
其余優(yōu)化包括：
- 重新設(shè)計(jì)了協(xié)同模塊票渠。
- 剝離出公式模塊逐哈，用一個(gè)修改過(guò)的 handsontable/formula-parser 來(lái)處理公式計(jì)算。
- 優(yōu)化dom結(jié)構(gòu)问顷。
- 用SVG代替iconfont的圖標(biāo)昂秃，因?yàn)閕confont的圖標(biāo)對(duì)其他開(kāi)發(fā)者而言很不方便改動(dòng)。
- 容器外面不創(chuàng)建可見(jiàn)的頁(yè)面元素杜窄。
- 避免在window對(duì)象上存儲(chǔ)數(shù)據(jù)肠骆。
特色功能介紹
協(xié)同編輯
“協(xié)同”是在線(xiàn)表格最為核心的功能。傳統(tǒng)表格軟件和網(wǎng)頁(yè)組件相比塞耕，最大的區(qū)別就是對(duì)協(xié)同編輯的支持和協(xié)同編輯的體驗(yàn)蚀腿。因此，我們?cè)陂_(kāi)發(fā)FortuneSheet時(shí)扫外，非常重視這一功能莉钙，在項(xiàng)目開(kāi)始之初的架構(gòu)階段就思考好了具體的方案，并在版本更新迭代中優(yōu)先加入畏浆。同時(shí)胆胰，提供了一個(gè)簡(jiǎn)單的后端demo來(lái)實(shí)現(xiàn)數(shù)據(jù)交互、存儲(chǔ)刻获。
支持多實(shí)例
API的Demo展示
一個(gè)優(yōu)秀的開(kāi)源項(xiàng)目蜀涨，詳細(xì)的文檔是必不可少的。我們?cè)诿恳淮伟姹靖聲r(shí)蝎毡，都會(huì)相應(yīng)地去更新Readme和API文檔厚柳。為了方便其他Developer更舒適地使用組件和貢獻(xiàn)代碼，我們?cè)诮o出詳細(xì)的API文檔之外沐兵，還在Online Demo 中暴露出了API别垮，并做了簡(jiǎn)單的演示，極大程度地方便開(kāi)發(fā)者定制和接入功能扎谎。
通過(guò)測(cè)試保證質(zhì)量
由于新上線(xiàn)的功能復(fù)雜度越來(lái)越高碳想，參與開(kāi)發(fā)的成員越來(lái)越多，在這樣龐大體量的項(xiàng)目中毁靶，Quality Assurance（質(zhì)量控制）就成了必不可少的一環(huán)胧奔。本項(xiàng)目的質(zhì)量控制流程包括嚴(yán)格的Pull Request代碼評(píng)審、CICD和針對(duì)功能的Jest覆蓋预吆。
截至撰寫(xiě)時(shí)龙填，已經(jīng)有了22個(gè)test suites和99個(gè)test，并且還在持續(xù)增加、補(bǔ)充當(dāng)中岩遗。越復(fù)雜的功能扇商，越需要嚴(yán)格的測(cè)試覆蓋。例如我們的核心功能—協(xié)同編輯宿礁，開(kāi)發(fā)者就寫(xiě)了多達(dá)十六個(gè)測(cè)試（jest）來(lái)保障其正確性案铺。
