性能考量

那么前端如何渲染HTML内容呢？

一种方式是仍然采用Markdown富文本编辑器，只需启动只读模式即可；但这种方式仍然需要下载Markdown富文本编辑组件的代码包，不够轻量

因此，CabloyJS在前端提供了一个HTML渲染组件eb-markdown-render，并且放到一个单独的模块a-markdownrender中，从而可以显著提升HTML渲染性能

Markdown渲染HTML

模块test-note中字段html在前端是通过如下方式渲染显示的：

src/module-vendor/test-note/front/src/components/atom/listLayoutCard/listLayoutBlockCardItem.jsx

  1. 1export default {
  2. 2  meta: {
  3. 3    global: false,
  4. 4  },
  5. 5  props: {
  6. 6    layoutManager: {
  7. 7      type: Object,
  8. 8    },
  9. 9    layout: {
  10. 10      type: Object,
  11. 11    },
  12. 12    blockConfig: {
  13. 13      type: Object,
  14. 14    },
  15. 15    info: {
  16. 16      type: Object,
  17. 17    },
  18. 18  },
  19. 19  data() {
  20. 20    return {
  21. 21      moduleMarkdownRender: null,
  22. 22    };
  23. 23  },
  24. 24  created() {
  25. 25    this.__init();
  26. 26  },
  27. 27  methods: {
  28. 28    async __init() {
  29. 29      this.moduleMarkdownRender = await this.$meta.module.use('a-markdownrender');
  30. 30    },
  31. 31    _getMarkdownHost(item) {
  32. 32      const atom = item;
  33. 33      return {
  34. 34        atomId: atom.atomId,
  35. 35        atom,
  36. 36      };
  37. 37    },
  38. 38    _renderListItem(item) {
  39. 39      if (!this.moduleMarkdownRender) return <div></div>;
  40. 40      const domListItem = this.layoutManager.layout_renderBlock({
  41. 41        blockName: 'itemHeader',
  42. 42        key: item.atomId,
  43. 43        info: { item },
  44. 44        listItem: true,
  45. 45      });
  46. 46      // ok
  47. 47      return (
  48. 48        <f7-card key={item.atomId} class="test-note-list-card-item card-item col-100 medium-50 large-50">
  49. 49          <f7-card-header>
  50. 50            <f7-list>{domListItem}</f7-list>
  51. 51          </f7-card-header>
  52. 52          <f7-card-content padding>
  53. 53            <eb-markdown-render host={this._getMarkdownHost(item)} html={item.html}></eb-markdown-render>
  54. 54          </f7-card-content>
  55. 55        </f7-card>
  56. 56      );
  57. 57    },
  58. 58  },
  59. 59  render() {
  60. 60    const { item } = this.info;
  61. 61    return this._renderListItem(item);
  62. 62  },
  63. 63};

  • 行29：异步加载模块a-markdownrender

  • 行53：使用eb-markdown-render渲染组件

    • host：宿主信息。对于原子类型而言，一般需要传入atom和atomId

    • html：需要渲染的HTML内容