白云苍狗
·
关于重写评论插件这件事
内容提要
文章讨论了对评论插件的重构，原插件存在许多问题，因此决定使用 Vue3 重新构建。新插件支持回复、插入表情、私密评论和邮件提醒等功能。在重构过程中，遇到样式处理、光标问题和数据共享等技术难题，但大部分问题都有解决方案。
关键要点
-
原评论插件存在许多 bug 和漏洞，决定使用 Vue3 进行重构。
-
新插件支持回复、插入表情、私密评论和邮件提醒等功能。
-
重构过程中遇到样式处理、光标问题和数据共享等技术难题。
-
样式问题需要手动处理子组件样式插入到 shadow-root。
-
光标问题涉及到 contenteditable 的兼容性，需存储光标信息。
-
跨 customElement 数据共享可以通过 Vue3 的 reactive 实现简易 store。
-
重构过程中发现许多问题，但大部分都有解决方案。
延伸解读
重构的必要性
原评论插件存在许多 bug 和漏洞，且使用原生 JS 编写的结构维护困难，因此重构是提升用户体验和功能的关键。使用 Vue3 不仅能解决现有问题，还能为未来的扩展打下基础。
技术挑战与解决方案
在重构过程中，开发者面临样式处理、光标兼容性和数据共享等技术难题。通过手动处理样式插入、存储光标信息以及利用 Vue3 的 reactive 实现数据共享，开发者成功克服了这些挑战，确保了插件的稳定性和功能性。
新功能的实用性
新插件支持多种实用功能，如私密评论、邮件提醒和自定义配置等。这些功能不仅提升了用户的互动体验，也增强了评论管理的灵活性，适应了不同用户的需求。
延伸问答
为什么要重构评论插件？
原评论插件存在许多 bug 和漏洞，维护起来费力，因此决定重构。
新评论插件有哪些新功能？
新插件支持回复、插入表情、私密评论和邮件提醒等功能。
重构过程中遇到了哪些技术难题？
遇到样式处理、光标问题和数据共享等技术难题。
如何解决样式处理问题？
样式问题需要手动处理子组件样式插入到 shadow-root。
光标问题是如何影响评论插件的？
光标问题涉及到 contenteditable 的兼容性，需存储光标信息。
如何实现跨 customElement 的数据共享？
可以通过 Vue3 的 reactive 实现简易 store 来共享数据。
