样式优先级和样式污染

问题：SpreadJS样式优先级和样式污染

背景：

在SpreadJS中有着丰富的样式体系，例如Worksheet的全局样式、列样式、行样式、单元格样式以及条件格式。

之所以有这么丰富的样式体系，是为了能够灵活适配用户的样式需求，并且确保最大化的执行性能。

而SpreadJS的所有样式，包括边框、字体、对齐、背景色、字号，甚至单元格类型、单元格格式等，都包含在样式类Style中。那么这就牵扯到一个问题：

当不同层次的样式，发生了冲突时（比如在表单、列和单元格上都设置了背景色），最终呈现效果是如何？

解决方案：

默认样式：

当要给全局的单元格设置某个字体，希望通过一个固定接口，批量的为整个表格统一进行设置。

这时就可以利用表单默认样式来设置全局样式，例如将全局背景色设置为红色：

let defaultStyle = sheet.getDefaultStyle();
defaultStyle.backColor = "red";
sheet.setDefaultStyle(defaultStyle);

那么当设置了全局样式后，能否再对某个单元格或区域，单独设置backColor呢？

这个问题实际上涉及到SpreadJS的样式优先级的机制。

样式优先级：

前端性能有限，不能像Excel，可以调用近乎全部的系统资源来渲染表格，SpreadJS用Style对象来管理样式，Style又包含了大量的信息，为了尽可能减少Style对象的生成，降低内存的消耗，这才采用了多层样式的机制。

SpreadJS针对不同层次的样式，有不同的渲染优先级，如下：

条件格式 > 单元格 > 行 > 列 > 表单

但这里又涉及另一个问题，最终样式的渲染会按照样式优先级顺序进行叠加处理，那我们怎么才能获取最终渲染的样式？

SpreadJS提供了对应的接口：getActualStyle

样式污染：

Style的本质是JS对象，可以遵循JS语言的特性，比如，当你把一个Style对象通过sheet.setStyle()设置给两个不同单元格时，这两个单元格表面上看起来达到了样式一致的效果，但这时我们要更改其中的一个单元格样式，比如用sheet.getCell()这种方式，就会导致两个单元格的样式同时改变。这种情况就是“样式污染”。

常见方法可以通过创建新的样式(Style)对象去代替在原有Style对象中进行修改的操作来避免样式污染。

详情可以参考下面的demo

04_样式污染.zip

问题：使用Clone接口解决样式污染

背景：

Clone接口常用于解决样式污染的问题，在讲解前请大家先看一个例子：

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
sheet.setStyle(0, 0, style);
sheet.getCell(0, 0).backColor("yellow");
sheet.setStyle(1, 1, style);

看完之后，大家觉得(0,0)和(1,1)单元格的背景色分别是什么？

答案揭晓，两个单元格的背景色都是黄色。

解决方案：

为什么会出现这样的情况呢？原因在于使用setStyle后，在用sheet.getCell(x,x).backColor(),更改的背景色将会同步同一样式对象上。此时，我们再用style.backColor就会发现已经由原来的红色改为黄色了。

那么如何让B2单元格显示红色呢？只需要要使用我们标题的接口clone即可。修改代码如下，用clone来保持修改前的背景样式。

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
sheet.setStyle(0, 0, style.clone());
sheet.getCell(0, 0).backColor("yellow");
sheet.setStyle(1, 1, style);

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.09.22