性能考量
那么前端如何渲染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
- 1export default {
- 2 meta: {
- 3 global: false,
- 4 },
- 5 props: {
- 6 layoutManager: {
- 7 type: Object,
- 8 },
- 9 layout: {
- 10 type: Object,
- 11 },
- 12 blockConfig: {
- 13 type: Object,
- 14 },
- 15 info: {
- 16 type: Object,
- 17 },
- 18 },
- 19 data() {
- 20 return {
- 21 moduleMarkdownRender: null,
- 22 };
- 23 },
- 24 created() {
- 25 this.__init();
- 26 },
- 27 methods: {
- 28 async __init() {
- 29 this.moduleMarkdownRender = await this.$meta.module.use('a-markdownrender');
- 30 },
- 31 _getMarkdownHost(item) {
- 32 const atom = item;
- 33 return {
- 34 atomId: atom.atomId,
- 35 atom,
- 36 };
- 37 },
- 38 _renderListItem(item) {
- 39 if (!this.moduleMarkdownRender) return <div></div>;
- 40 const domListItem = this.layoutManager.layout_renderBlock({
- 41 blockName: 'itemHeader',
- 42 key: item.atomId,
- 43 info: { item },
- 44 listItem: true,
- 45 });
- 46 // ok
- 47 return (
- 48 <f7-card key={item.atomId} class="test-note-list-card-item card-item col-100 medium-50 large-50">
- 49 <f7-card-header>
- 50 <f7-list>{domListItem}</f7-list>
- 51 </f7-card-header>
- 52 <f7-card-content padding>
- 53 <eb-markdown-render host={this._getMarkdownHost(item)} html={item.html}></eb-markdown-render>
- 54 </f7-card-content>
- 55 </f7-card>
- 56 );
- 57 },
- 58 },
- 59 render() {
- 60 const { item } = this.info;
- 61 return this._renderListItem(item);
- 62 },
- 63};
-
行29:异步加载模块
a-markdownrender
-
行53:使用
eb-markdown-render
渲染组件-
host:宿主信息。对于
原子类型
而言,一般需要传入atom
和atomId
-
html:需要渲染的HTML内容
-
评论: