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正版授权，或了解更多产品信息请点击【咨询在线客服】