前端UI組件【免費下載鏈接】handsontableJavaScript Data Grid / Data Table with a Spreadsheet Look Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ?項目地址https://gitcode.com/gh_mirrors/ha/handsontable點擊查看免費下載Handsontable 10.0.0 于 2021 年 9 月 29 日發(fā)布本次版本升級帶來了一系列破壞性變更涉及渲染鉤子hooks的命名與語義、HyperFormula 公式引擎的依賴版本、多個配置選項的默認值以及默認字體樣式。本文以官方遷移文檔為主體結合當前倉庫源碼hooks 常量定義、CopyPaste 插件實現(xiàn)、metaSchema 選項默認值 等逐項拆解幫助你對照檢查自己的應用代碼完成從 9.0 到 10.0 的平滑遷移。本文適用的應用場景任何基于 Handsontable 9.x 構建、需要升級到 10.x 的 JavaScript / React / Angular / Vue 項目。讀完本文你將掌握渲染鉤子的新舊命名對應關系、controller參數(shù)的替換規(guī)則、HyperFormula 依賴的升級路徑以及受影響的默認值清單并能據(jù)此快速定位需要修改的代碼位置。遷移前的準備了解 10.0.0 破壞性變更總覽Handsontable 10.0.0 的全部變更細節(jié)記錄在 CHANGELOG.md 中本次遷移共涉及 6 項破壞性變更重命名beforeRender/afterRender鉤子為beforeViewRender/afterViewRender并賦予舊名稱全新的語義可選依賴 HyperFormula 從0.6.2升級到^1.1.0配置選項autoWrapCol/autoWrapRow的默認值從true改為falseCopyPaste 插件的rowsLimit/columnsLimit默認值從1000改為Infinity統(tǒng)一beforeOnCellMouseDown/beforeOnCellMouseOver鉤子的第四個參數(shù)controller的命名與結構為.handsontable類下的所有元素新增默認字體族、字號、字重和顏色。下面按照官方遷移指南的五步流程逐一說明每項變更的具體內容、影響范圍與應對方法。Step 1重命名你的 Handsontable 渲染鉤子10.0.0 對渲染流程做了重新梳理最直觀的體現(xiàn)就是鉤子名稱的變更。如果你在應用中使用過beforeRender或afterRender鉤子請按下表更新名稱升級前9.x升級后10.xbeforeRenderbeforeViewRenderafterRenderafterViewRender新名稱的觸發(fā)時機從源碼看新鉤子的觸發(fā)時機與舊鉤子基本對應beforeViewRender在 Handsontable 的視圖渲染引擎開始渲染之前觸發(fā)afterViewRender在視圖渲染引擎渲染完成之后、但尚未重繪選區(qū)邊框和同步滾動之前觸發(fā)。它們都會收到一個isForced布爾參數(shù)isForced true渲染由設置變更、數(shù)據(jù)變更或需要完整渲染周期的邏輯觸發(fā)isForced false渲染由滾動或移動選區(qū)等輕量操作觸發(fā)。這些語義在 hooks 常量定義 中有完整注釋說明。舊名稱現(xiàn)在做了什么「新事情」注意升級后仍然存在名為beforeRender和afterRender的鉤子但它們的含義完全不同了。新版語義如下見 hooks 常量定義beforeRender在 Handsontable 業(yè)務邏輯執(zhí)行完畢、渲染引擎開始調用 Core 邏輯、renderers、單元格 meta 等來更新視圖之前觸發(fā)。isForced false時仍會重繪新進入視口的行列但滾動本身不會觸發(fā)該鉤子afterRender在視圖渲染引擎更新視圖之后觸發(fā)參數(shù)規(guī)則與beforeRender相同。因此升級后請務必檢查你的鉤子注冊代碼原來監(jiān)聽“每次視圖繪制前后”的beforeRender/afterRender→ 改為beforeViewRender/afterViewRender確認你確實需要新版beforeRender/afterRender的語義后再注冊它們不要無意識地同時掛載新舊兩套鉤子導致邏輯重復。對應的鉤子測試beforeViewRender.spec.js驗證了beforeViewRender僅在慢渲染路徑draw()被調用上觸發(fā)且beforeViewRender一定先于afterViewRender執(zhí)行。渲染引擎層面Walkontable 的繪制循環(huán)也遵循“核心的beforeViewRender在首輪繪制前觸發(fā)一次、afterViewRender在末輪繪制后觸發(fā)一次”的順序見 drawCycle.ts 的注釋。Step 2適配 HyperFormula 依賴升級Handsontable 10.0.0 將可選的 HyperFormula 依賴從0.6.2升級到^1.1.0這會影響Formulas插件公式計算的使用者。你的依賴是否需要同步升級HyperFormula 是Formulas插件的可選依賴只有使用公式功能的項目才需要處理。當前倉庫中 handsontable/package.json 聲明的 hyperformula 版本為^3.0.0后續(xù)版本又做了多次升級而 10.0.0 時代的對應版本是^1.1.0。作為從 9.0 遷移上來的項目你需要將 package.json 中聲明的hyperformula版本升級到與你的 Handsontable 10.x 版本匹配的范圍10.0.x 對應^1.1.0閱讀 HyperFormula 官方 0.6.x → 1.0.x 遷移指南處理引擎 API 層面的破壞性變更。引擎注冊機制仍兼容從源碼結構看Formulas插件的引擎注冊邏輯register.ts支持三種配置方式直接傳入引擎類、傳入引擎實例、或傳入{ hyperformula: engineClass }形式。引擎實例通過engineClass.buildEmpty(engineSettings)創(chuàng)建并注冊自定義函數(shù)、語言包與命名表達式register.ts。也就是說升級 HyperFormula 后你仍然可以用相同的方式把新版本引擎接入Formulas插件主要成本集中在引擎自身 API 的適配上。Step 3適配配置選項的新默認值10.0.0 調整了四類配置項的默認值如果之前依賴舊默認值行為會發(fā)生變化需要顯式配置以恢復原有體驗。autoWrapCol / autoWrapRow從 true 改為 falseautoWrapCol和autoWrapRow控制鍵盤導航在到達表格邊緣時的「換行」行為默認值從true改為false詳見 CHANGELOG.md。JavaScript 寫法對比升級前9.x升級后10.xautoWrapCol: trueautoWrapCol: falseautoWrapRow: trueautoWrapRow: falseReact 寫法對比升級前9.x升級后10.xautoWrapCol{true}autoWrapCol{false}autoWrapRow{true}autoWrapRow{false}升級后當你選中表格最底部的單元格時按方向鍵 ? 不會再有反應autoWrapCol: false時不會跳到下一列頂部同樣選中行首單元格按 ? 或ShiftTab也不會跳轉到上一行末尾autoWrapRow: false時不會換行。如果你希望保留 9.x 的環(huán)繞導航體驗請顯式設置// 恢復 9.x 的鍵盤環(huán)繞導航行為 const hot new Handsontable(container, { autoWrapCol: true, autoWrapRow: true, // ... 其他配置 });這兩個選項的當前默認值false已在 metaSchema.ts 的default注釋與默認值聲明中得到確認對應的行為說明如autoWrapCol: false時按 ? 不做任何事、autoWrapCol: true時按 ? 跳到下一列最上方單元格也直接寫在源碼文檔注釋中。autoWrapRow還受tabNavigation、minSpareCols等其他選項的優(yōu)先級影響見 hooks 常量定義 中beforeRowWrap鉤子的說明。針對此默認值的回歸測試位于 autoWrapCol.spec.js。CopyPaste 的 rowsLimit / columnsLimit從 1000 改為 InfinityCopyPaste插件的rowsLimit和columnsLimit用于限制復制到剪貼板的最大行數(shù) / 列數(shù)默認值從1000改為Infinity意味著復制操作不再受默認數(shù)量上限約束。JavaScript 寫法對比升級前9.x升級后10.xrowsLimit: 1000rowsLimit: InfinitycolumnsLimit: 1000columnsLimit: InfinityReact 寫法對比升級前9.x升級后10.xrowsLimit{1000}rowsLimit{Infinity}columnsLimit{1000}columnsLimit{Infinity}從 CopyPaste 插件源碼 看DEFAULT_SETTINGS中rowsLimit與columnsLimit均聲明為Infinity類屬性默認值同樣是Infinity插件在初始化時通過isNaN判斷用戶是否顯式傳值未傳則保持默認copyPaste.ts。最終復制范圍會調用剪貼板尺寸計算邏輯將選區(qū)范圍與rowsLimit、columnsLimit一起參與裁剪copyPaste.ts。遷移建議如果你曾經(jīng)依賴1000行 / 列的隱性上限來防止大數(shù)據(jù)量復制卡頓升級后請顯式設置合理的rowsLimit/columnsLimit值如果項目一直希望復制不受限制則無需任何改動。Step 4適配鉤子參數(shù)的統(tǒng)一命名10.0 統(tǒng)一了beforeOnCellMouseDown和beforeOnCellMouseOver鉤子第四個參數(shù)的命名與結構Handsontable 鉤子升級前參數(shù)名升級后參數(shù)名beforeOnCellMouseDownblockCalculationscontrollerbeforeOnCellMouseOverblockCalculationscontrollercontroller 對象的結構變化兩個鉤子中的controller對象不僅改了名字內部結構也做了調整——cells屬性更名為cellblockCalculations升級前controller升級后rowcolumncellsrowcolumncell新結構下controller.row、controller.column、controller.cell各自包含一個布爾值用于允許或禁止對應區(qū)域的選區(qū)變更參見 hooks 常量定義 中兩個鉤子的 JSDoc 注釋。例如9.x 時代常見的「阻止特定單元格被選中」寫法// 9.x 寫法已廢棄 beforeOnCellMouseDown: (event, coords, TD, blockCalculations) { blockCalculations.cells true; }遷移后應改為// 10.x 寫法 beforeOnCellMouseDown: (event, coords, TD, controller) { controller.cell true; }受影響的插件參數(shù)重命名影響以下插件它們內部會通過該參數(shù)控制選區(qū)交互ColumnSortingcolumnSorting.tsMultiColumnSortingManualColumnMoveManualRowMoveNestedHeaders如果你在應用中直接調用這些插件并傳入了blockCalculations參數(shù)務必同步更新為controller及controller.cell。該變更同時收錄在 CHANGELOG.md 的破壞性變更列表中。Step 5適配默認字體樣式變更為了讓 Handsontable 開箱即用就有良好的外觀10.0 為.handsontableCSS 類下的所有元素新增了默認的font-family、font-size、font-weight和color屬性。源碼中的實現(xiàn)證據(jù)在 base.scss 中.handsontable類聲明了font-family通過mixins.font-family引入實際取值為var(--ht-font-family), -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif見 _mixins.scss優(yōu)先使用主題變量回退到系統(tǒng)字體棧font-sizevar(--ht-font-size)font-weightvar(--ht-font-weight)colorvar(--ht-foreground-color)。也就是說當前倉庫中字體樣式已經(jīng)變量化便于通過主題定制覆蓋。而在 10.0.0 剛引入默認字體時這項變更是破壞性的——如果你的應用沒有顯式覆蓋這些屬性升級后網(wǎng)格的字體外觀會直接改變。遷移建議升級后檢查應用的整體視覺效果確認網(wǎng)格字體是否符合預期若希望自定義字體可在自己的 CSS 中覆蓋.handsontable內的字體屬性當前倉庫推薦通過主題 CSS 變量覆蓋若你的應用全局重置了字體樣式如* { font-family: ... }需注意其與 Handsontable 默認樣式的優(yōu)先級關系。升級清單從 9.0 遷移到 10.0 的完整檢查表將上述五步整理為一份可勾選的檢查清單方便你在實際項目中逐項核對搜索代碼中的beforeRender/afterRender鉤子確認是否表示“視圖渲染前后”若是則重命名為beforeViewRender/afterViewRender確認新版beforeRender/afterRender鉤子的新語義是否是你需要的避免新舊鉤子邏輯混淆若使用Formulas插件將hyperformula依賴升級到與 Handsontable 10.x 匹配的版本10.0.x 對應^1.1.0并適配 HyperFormula 引擎 API檢查鍵盤導航體驗若依賴 9.x 的環(huán)繞導航顯式設置autoWrapCol: true和autoWrapRow: true若依賴復制數(shù)量上限顯式設置rowsLimit/columnsLimit默認已變?yōu)镮nfinity將beforeOnCellMouseDown/beforeOnCellMouseOver中的blockCalculations參數(shù)重命名為controller并把blockCalculations.cells改為controller.cell檢查受影響的插件ColumnSorting、MultiColumnSorting、ManualColumnMove、ManualRowMove、NestedHeaders中對該參數(shù)的使用升級后檢查網(wǎng)格字體外觀必要時顯式覆蓋字體樣式運行應用的完整測試套件包括鍵盤導航、復制粘貼、排序、移動、嵌套表頭等場景確認無回歸。參考資源10.0.0 完整變更日志CHANGELOG.md官方 Changelog 文檔docs/content/guides/upgrade-and-migration/changelog/changelog.md鉤子常量與 JSDoc 語義定義handsontable/src/core/hooks/constants.ts渲染鉤子測試用例handsontable/src/tests/hooks/beforeViewRender.spec.jsCopyPaste 插件默認值與裁剪邏輯handsontable/src/plugins/copyPaste/copyPaste.ts配置選項默認值autoWrapCol/autoWrapRowhandsontable/src/dataMap/metaManager/metaSchema.ts默認字體樣式實現(xiàn)handsontable/src/styles/base/_base.scss、handsontable/src/styles/utils/_mixins.scss按上述五個步驟完成改動后你的應用就運行在了 Handsontable 10.0 上可以繼續(xù)享受后續(xù)版本帶來的性能與一致性改進。贊分享前端UI組件【免費下載鏈接】handsontableJavaScript Data Grid / Data Table with a Spreadsheet Look Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ?項目地址https://gitcode.com/gh_mirrors/ha/handsontable點擊查看免費下載相關推薦3步掌握GenankiPython自動化創(chuàng)建Anki卡片的終極指南3步掌握GenankiPython自動化創(chuàng)建Anki卡片的終極指南 還在為手動制作Anki卡片而煩惱嗎Genanki這個強大的Python庫將徹底改變你的學教育leebaird/discover敏感信息檢測如何快速發(fā)現(xiàn)和防護數(shù)據(jù)泄露風險leebaird/discover敏感信息檢測如何快速發(fā)現(xiàn)和防護數(shù)據(jù)泄露風險 在數(shù)字化時代數(shù)據(jù)泄露已成為企業(yè)和個人面臨的重大安全威脅。leebaird/di網(wǎng)絡安全TRL v0 到 v1 遷移指南默認值變更、參數(shù)重命名與 None 值處理TRL v0 到 v1 遷移指南默認值變更、參數(shù)重命名與 None 值處理 本指南面向所有從 TRL v0 升級到 v1 的開發(fā)者系統(tǒng)梳理 v1 引入的破壞人工智能大模型強化學習RLHF預訓練微調LoRA上一篇【親測免費】 OpenAvatarChat模塊化的交互數(shù)字人對話實現(xiàn)下一篇ZML 項目使用與啟動教程創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考