前端之路:黑白棋二

link on JianShu

前端之路:黑白棋一里提到:包含悔棋功能时,下棋的落子状态没有显示出来。

因为是现场跟着老师一起做的,总感觉功能是OK的。使用BBEdit的对比文本对比功能逐行肉眼对比了两边,觉得也都没有问题。

因为没有任何报错信息,断点调试不知道断到哪里。暂时只能增加log进行判断了。

  • 所有的操作都没有报错,第一定位到点击动作的确触发了
  • 打印出落子后到数据后发现,数据的确已经按照规则进行了更新。

第一反应是这就诡异了,“相同”到代码,居然一个正常渲染,另外一个不进行渲染。

最终重新梳理了业务逻辑+逐行分析。关键点还是自己的问题:

为了实现悔棋效果,这里需要将变化后的对象存起来。昨天到今天这里忘记进行push实际的操作,导致不会进行渲染。push一个空值,js不会报错。log里看起来map中的值已经变化了,但依然没有render出来这是因为渲染时使用到数据还是老到数据

找到问题点时,整个逻辑也就梳理清楚了。悔棋到原理相当于保存了每一次操作到完整数据结构。

一开始没有渲染是因为:虽然对应到数据已经进行了更新,但没有将落子后到数据结构保存,导致渲染时还是使用的default开局时的数据。

完整代码参考这里。

 
comments powered by Disqus