背景

我在干啥

  • markdown渲染引擎的markdown-it的mermaid插件开发中
  • 开发中插件markdown-it-mermaid-x、插件依赖项目mermaid,测试项目testProject
  • 项目A最终是在浏览器环境下运行的所以用到了document、window等js的DOM对象
  • 为了优先验证B的代码正确与否(暂不考虑webpack打包等带来的bug),选择了个workaround的方案,在C中使用jsdom伪造一个DOM提供window和document

开发环境版本

  • node:v6.9.0
  • npm:3.10.8
  • jsdom:^11.6.2

开发中

具体表现

  • 通过document.createElement('div')新建一个div对象elt,给elt内容赋值部分:
const elt = document.createElement('div')
elt.className = 'mermaid'
elt.innerText = code
  • 取出值使用
const txt = elt.textContent;
  • 而经过验证,console.log(txt)输出的值为空
  • 使用对应的如下写法值能正常输出
const txt = elt.innerText;

分析

  • 这部分的代码基本上是参考了同样使用了mermaid作为扩展的StackEdit的mermaid扩展部分代码的写法,

  • 对比了一下我的代码部分与其区别应该只是使用了jsdom建了一个伪造的DOM

  • 同时根据浏览器console里运行的结果elt.innerTextelt.textContent都能输出正确的结果

  • 目前暂且记录下这个小bug,将来有机会深入研究再考虑提issue

  • 后来进一步踩坑,大致上可以确定这个bug本身没有什么特别的,基本上是jsdom、d3、svg支持之间的问题了

  • d3项目似乎要求必须在浏览器环境下执行,而jsdom所模拟的浏览器环境缺乏对svg的相关支持(见jsdom的issue部分),因此一切基于jsdom模拟浏览器环境的插件皆不可用
    ,不再深入研究**

吐槽

  • ╮(╯▽╰)╭找了半天才发现这里变空了,完全没想到
  • beyond compare都开了对比半天愣是没明白,一句一句对着改了半天才发现

Written with StackEdit.