SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、招商銀行、蘇寧易購、天弘基金等為代表的企業用戶青睞。在帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

本文介紹了通過監聽命令來實現簡單的協同操作的內容！

點擊下載SpreadJS正式版

新冠病毒的疫情使得在線辦公成為了一個常態，這使得在線文檔成為了時下的熱點。其中在線協同表格是在線文檔的重要一個組成部分，SpreadJS在在線協同表格上有著得天獨厚的優勢：SpreadJS本身已經實現了單人操作在線文檔的基本功能。并且身為控件，用戶只需引入就可以在項目工程中為特性的業務賦予在線表格的能力。這樣開發者在使用SpreadJS后，只需要在其基礎上自行實現對應的協同功能，就可以將本身的單人操作變為協同操作。

誠然SpreadJS雖然本身不具備協同的支持，但是利用好SpreadJS本身的命令機制可以對實現協同的操作上有很大的幫助。

何為命令機制：

命令就是將一步或多步的操作封裝成一個可以執行的命令，執行這樣的命令并傳入對應的參數，就可以執行相關的一連串操作。并且操作的對象或范圍均可以通過參數的調整來指定。命令的相關方法調用參考后面的API：！

命令究竟有什么實際的意義呢？

首先，SpreadJS默認會將所有的用戶UI操作封裝成命令去執行（內置命令），而我們通常的代碼設置并沒有通過命令來執行。這樣就可以用來區分一個操作到底是用戶UI操作（最終用戶使用時的操作），還是代碼邏輯進行的操作（程序員通過寫代碼完成，即程序內部的運行邏輯）。

其次，命令本身可以設置是否可以被撤銷（undo），結合上一條就可以做到將用戶的操作進行撤銷，但是程序執行的代碼操作不會被進行撤銷的操作。在實際應用中有很重要的價值，舉個例子：

SpreadJS默認初始化的電子表格是一個空表格，我們經常遇到打開頁面后需要加載一個有數據的表格這樣的場景，我們往往會將表格初始化的操作通過代碼在js中運行來實現這樣的效果。當我們加載好表格之后，在頁面上按ctrl+z進行撤銷，會發現設置的表格不會被撤銷。這就是因為程序執行的代碼操作不是命令所以不會被撤銷的結果。而用戶在表格上修改的任何操作均可以被撤銷，撤銷的同時不會影響之前代碼設置這部分的內容。

命令對于在線協同的應用：

命令的機制我們可以分清操作到底是代碼執行的還是用戶UI去操作的，而在線協同的場景中需要同步的內容就是用戶UI的相關操作。所以我們只需要有一個監聽的機制，能監聽到所有的命令，然后按照順序進行同步，就可以做到一個簡單的在線協同操作了。

而在命令command中是可以添加一個anyscLicenser用于收集用戶操作觸發的命令的：

spread.commandManager().addListener("anyscLicenser",function(){
    for(var i=0;i<arguments.length;i++){
        var cmd = arguments[i].command;
        console.log(cmd);
    }
                });

通過這樣的監聽，我們就可以實現一個簡單的多人同步的效果。而命令本身是可以自定義的，我們可以將提供給用戶操作的接口（input，按鈕，下拉等）的實現邏輯封裝成一個個自定義命令，就像附件的demo這樣。這樣就可以做到通過命令來收集用戶在表格上的操作，來完成一個簡單的協同。

這里要注意的是，SpreadJS雖然有命令這樣的機制，但其初衷并不是為了協同而設置的，所以有些情況下源生的命令并不能完全的符合協同的實現，需要根據實際情況自己進行改造來滿足。提供的demo以及命令實現的方式可當做思路可供參考。

相關內容推薦：

試用下載>>>

demo下載>>>

想要購買SpreadJS正版授權，或了解更多產品信息請點擊