DEV Community
·
通过实践学习TDD：在Umbraco富文本编辑器中标记成员
内容提要
作者在构建系统时，为了在网站文本中提及Umbraco成员，扩展了Umbraco的TinyMCE富文本编辑器。通过AngularJS装饰器和TinyMCE的'autoCompleters'功能，实现了成员提及功能。使用Jest进行测试，并创建了MentionsManager类来管理提及逻辑，包括从后端获取数据并插入编辑器。尽管代码简单易变，但作者对UI与业务逻辑的结合方式仍有疑虑。
关键要点
-
作者在构建系统时需要在网站文本中提及Umbraco成员。
-
为了实现成员提及功能，作者扩展了Umbraco的TinyMCE富文本编辑器。
-
使用AngularJS装饰器和TinyMCE的'autoCompleters'功能来实现提及功能。
-
提及的格式为<mention user-id="1324" class="mceNonEditable">@D_Inventor</mention>。
-
作者使用Jest进行测试，并创建了MentionsManager类来管理提及逻辑。
-
MentionsManager类负责从后端获取数据并插入编辑器。
-
作者对UI与业务逻辑的结合方式存在疑虑，认为代码简单易变。
-
在测试过程中，作者发现TypeScript编译器的严格性。
-
作者实现了fetch和pick方法来处理提及的获取和插入。
-
作者对Range接口的使用感到不确定，认为可能有更好的实现方式。
延伸解读
TDD实践的重要性
在构建复杂系统时，采用测试驱动开发（TDD）可以有效提高代码质量和可维护性。作者通过使用Jest进行单元测试，确保了提及功能的可靠性。这种方法不仅帮助发现潜在问题，还促进了对代码逻辑的深入理解。
UI与业务逻辑的结合
作者对UI与业务逻辑的结合方式表示疑虑，认为当前实现可能过于简单，缺乏灵活性。理想情况下，业务逻辑应驱动UI，而不是反之。开发者在设计时应考虑如何更好地封装UI，以增强系统的可扩展性和可维护性。
TypeScript的严格性
在使用TypeScript时，作者体验到了编译器的严格性，这促使他在开发过程中更加谨慎。严格的类型检查可以减少运行时错误，但也可能导致开发过程中的一些不便。开发者应权衡使用TypeScript的优缺点，以优化开发效率。
延伸问答
如何在Umbraco中实现成员提及功能？
通过扩展Umbraco的TinyMCE富文本编辑器，使用AngularJS装饰器和TinyMCE的'autoCompleters'功能来实现成员提及。
MentionsManager类的主要功能是什么？
MentionsManager类负责管理提及逻辑，包括从后端获取数据并插入编辑器。
在测试过程中，作者对TypeScript编译器有什么发现？
作者发现TypeScript编译器的严格性，要求在编译前使用所有添加的内容。
提及的格式是什么样的？
提及的格式为<mention user-id="1324" class="mceNonEditable">@D_Inventor</mention>。
作者对UI与业务逻辑的结合有什么疑虑？
作者认为代码简单易变，且UI与业务逻辑的结合方式不理想。
如何处理提及的获取和插入？
通过实现fetch和pick方法，fetch方法用于获取提及，pick方法用于将选定的成员插入编辑器。
