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

本文介紹了通過監(jiān)聽命令來實(shí)現(xiàn)簡(jiǎn)單的協(xié)同操作的內(nèi)容！

點(diǎn)擊下載SpreadJS正式版

新冠病毒的疫情使得在線辦公成為了一個(gè)常態(tài)，這使得在線文檔成為了時(shí)下的熱點(diǎn)。其中在線協(xié)同表格是在線文檔的重要一個(gè)組成部分，SpreadJS在在線協(xié)同表格上有著得天獨(dú)厚的優(yōu)勢(shì)：SpreadJS本身已經(jīng)實(shí)現(xiàn)了單人操作在線文檔的基本功能。并且身為控件，用戶只需引入就可以在項(xiàng)目工程中為特性的業(yè)務(wù)賦予在線表格的能力。這樣開發(fā)者在使用SpreadJS后，只需要在其基礎(chǔ)上自行實(shí)現(xiàn)對(duì)應(yīng)的協(xié)同功能，就可以將本身的單人操作變?yōu)閰f(xié)同操作。

誠(chéng)然SpreadJS雖然本身不具備協(xié)同的支持，但是利用好SpreadJS本身的命令機(jī)制可以對(duì)實(shí)現(xiàn)協(xié)同的操作上有很大的幫助。

何為命令機(jī)制：

命令就是將一步或多步的操作封裝成一個(gè)可以執(zhí)行的命令，執(zhí)行這樣的命令并傳入對(duì)應(yīng)的參數(shù)，就可以執(zhí)行相關(guān)的一連串操作。并且操作的對(duì)象或范圍均可以通過參數(shù)的調(diào)整來指定。命令的相關(guān)方法調(diào)用參考后面的API：！

命令究竟有什么實(shí)際的意義呢？

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

其次，命令本身可以設(shè)置是否可以被撤銷（undo），結(jié)合上一條就可以做到將用戶的操作進(jìn)行撤銷，但是程序執(zhí)行的代碼操作不會(huì)被進(jìn)行撤銷的操作。在實(shí)際應(yīng)用中有很重要的價(jià)值，舉個(gè)例子：

SpreadJS默認(rèn)初始化的電子表格是一個(gè)空表格，我們經(jīng)常遇到打開頁(yè)面后需要加載一個(gè)有數(shù)據(jù)的表格這樣的場(chǎng)景，我們往往會(huì)將表格初始化的操作通過代碼在js中運(yùn)行來實(shí)現(xiàn)這樣的效果。當(dāng)我們加載好表格之后，在頁(yè)面上按ctrl+z進(jìn)行撤銷，會(huì)發(fā)現(xiàn)設(shè)置的表格不會(huì)被撤銷。這就是因?yàn)槌绦驁?zhí)行的代碼操作不是命令所以不會(huì)被撤銷的結(jié)果。而用戶在表格上修改的任何操作均可以被撤銷，撤銷的同時(shí)不會(huì)影響之前代碼設(shè)置這部分的內(nèi)容。

命令對(duì)于在線協(xié)同的應(yīng)用：

命令的機(jī)制我們可以分清操作到底是代碼執(zhí)行的還是用戶UI去操作的，而在線協(xié)同的場(chǎng)景中需要同步的內(nèi)容就是用戶UI的相關(guān)操作。所以我們只需要有一個(gè)監(jiān)聽的機(jī)制，能監(jiān)聽到所有的命令，然后按照順序進(jìn)行同步，就可以做到一個(gè)簡(jiǎn)單的在線協(xié)同操作了。

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

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

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

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

相關(guān)內(nèi)容推薦：

試用下載>>>

demo下載>>>

想要購(gòu)買SpreadJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊