impressjs 与 introjs 的整合(部分改进)

之前曾尝试对 impressjs 和 introjs 进行整合,不过很不幸,整合后存在很多问题。

一个主要的问题是两者都重度使用了 transform 属性,造成很多冲突。最近浏览了一下 introjs 的 github 主页,在它的 issue 页面上,我尝试搜索了一下 transform 相关的 issue,果然有不少相关的帖子在说这个问题。

其中还有一位 fork 了这个项目的人提了一个 PR,说修复了 transform 的冲突,我看了下他的描述,感觉挺符合我目前碰到的情况。

不过他也改动了不少代码,包括 css 方面,原作者暂时也没有接受他的 PR 的合并。

于是去到他 fork 的分支下下载了他那个版本的 introjs 下来,试了下,发现还是有问题,不过原页面至少没有移动了。

不过被遮罩元素的位置还是没有算准确,导致偏离了遮罩框,文字跑到左边去了。另外在发生缩放时位置也还会偏移。

总之还是算有一点点改进吧,以后再看看计算的问题。

另外,原来那些 tip 框中的 button 都是显示英文,也顺便改成了中文;最后还设置了 introjs 中的一个 scrollToElement 属性,也避免了在后面几条 step 中页面发生偏移的情况。

总之也还不算是很好,不过跟之前类似,既然弄了,就先这样了,以后再看看能否进一步改进。具体参见:

//exp.xiaogd.net/demo/tour/v2/impressjs_features_tour.html

impressjs 与 introjs 的一个初步整合尝试

把 impressjs 和 introjs 做了一个整合尝试,之前就预料可能无法轻易整合成功,果不其然,出来后的效果还是很糟糕,具体见:

//exp.xiaogd.net/demo/tour/impressjs_features_tour.html

虽然存在严重缺陷,不过考虑到尝试做了,还是把它放出来,以后看看能否进一步改进吧。

具体问题一是破坏了 impressjs 的布局,原因初步看来是两者在 transform 属性使用上的冲突,而且看起来不好解决,因为两者都重度依赖这些。

二者在 mask 上也存在问题,比如在遮罩时下面的文字都看不清了。

其它一些问题还有比如快捷键方面的冲突(暂时没有找到规避的方式,双方似乎都没有考虑过这个问题),动态显示的元素无法定位(暂时的解决方式是让其不要隐藏)等等。

可以说,introjs 在“无侵入性”方面还是有待提高。

怎么说好呢,过于 tricky 的东西往往就是这样,它们很精巧,可它们也很容易受到破坏,尤其你把它们弄到一块时,结局往往是互相伤害~

当你采用一些框架时,你的想法是不用重复发明轮子,很快就能得到某些东西。但是一旦整合出现问题,你会发现你马上陷入一种尴尬中,你不得不深入到那些实现的细节中,然后之前节省的功夫又全部赔进去了,而且糟糕的是你可能会发现冲突无法调和或者要费老大的劲才能解决。

最糟糕的结果就是“从入门到放弃”,然后还是不得不重复发明轮子,唯一的好处或许就是到时再造轮子时还有个参考……