- 为了解决底层适配的问题,历时近两个星期. 除了中间的宣讲会耽误了两天时间, 其他所有时间包括周末在内都在阅读源码, 改造测试源码. 此刻总算解决了,回顾起来,走了好多弯路,是该总结下.
2.在微前端方案下, 从另一个页面切换到vue-styleguidist页面,会出现样式丢失的问题.
a.丢失的原因是css是动态渲染出来的(坑1,要读懂源码是怎么渲染出css的,整个渲染体系是怎么样的),用的是jss那一套, 且用了lodash.memoize来做函数结果缓存. 理解到这一步就耗了近以一星期时间.
b.把动态渲染出来的css粘贴到了全局样式文件, 解决了样式丢失的问题(css靠两个参数的组合作为初始值来渲染, 这个值保持不变),但点击目录,不能正常打开页面. 原因是jss内部出现了dom结构丢失. 方案失败
c.既然静态样式方案走不通, 那只能每次切换回页面,就重新执行jss的初始化步骤.该如何做呢?或者说jss的初始化步骤是怎样的?
- lodash.memoize会生成缓存, name=>sheet, 对应的方案是删除缓存
- jss会把sheet文件放到内存,并渲染到dom上, 对应的方案是清除sheet文件
d. 微前端方案下,初始化页面时,会加载三次,第一次是加载真实页面&prefetch其他页面, 第二三次是在缓存中重复第一次做的事.且并不会有实质影响. 估计是js沙盒在作祟导致的.
- 下次再阅读源码时,遇到一些不认识的插件时,建议先停下来学一下其用法. 当遇到核心插件时,建议写个demo来全面掌握其特性, 看似花了额外时间,实际上这才是阅读源码最大的收获和乐趣. 也是效率最高的解决问题的方式. 这次的核心插件lodash.memorize和jss, 如果在不懂其特性的情况下,根根本本就无法解决样式丢失与重绘的问题. 现在问题解决了,不单单是解决了问题, 我的知识库也得到了更新.
网友评论