前面我们把Block区块的周边文件配置均已准备就绪,接下来就可以进行Block区块主文件的编码开发了。但是在正式开发之前,我们有必要先介绍一下主文件的加载机制

加载机制:CommonJS/AMD

前面我们提到Markdown内容需要在不同的场景下进行输出和渲染,因此Block区块的主文件也需要支持不同场景下的加载机制。比如,在CabloyJS后端输出需要支持CommonJS加载机制,在CMS静态站点中需要支持AMD加载机制

为了有更直观的认知,贴出部分源码如下:

1. CommonJS加载

src/module-vendor/a-markdown/backend/src/bean/bean.markdown.js

  1. 1...
  2. 2let block_js = path.join(_module.static.backend, `blocks/${blockName}/main`);
  3. 3if (ctx.app.meta.isProd) {
  4. 4 block_js += '.min';
  5. 5}
  6. 6block_js += '.js';
  7. 7const BlockClass = require3(block_js);
  8. 8// render
  9. 9const blockHost = this._getHost({ host, content, locale });
  10. 10// Block Instance
  11. 11const blockInstance = new BlockClass(blockHost);
  12. 12let blockHtml = '';
  13. 13if (blockInstance.render) {
  14. 14 blockHtml = await blockInstance.render();
  15. 15}
  16. 16...
  • 行2-6:动态拼接Block区块的主文件路径

    • 如果是生产环境名称为:main.min.js,其他环境为:main.js
  • 行7:采用CommonJS方式加载主文件,返回Block Class

  • 行11:创建Block Class的实例

  • 行14:调用实例的render方法,完成Block区块的内容输出

2. AMD加载

src/module-system/cms-pluginarticle/backend/cms/plugin/assets/js/render.js.ejs

  1. 1 function _mountBlock($blockContainer) {
  2. 2 ...
  3. 3 // Block Class
  4. 4 _getBlockClass(blockParams).then(BlockClass => {
  5. 5 ...
  6. 6 // host
  7. 7 const host = _getHost($blockContainer, blockContent);
  8. 8 // Block Instance
  9. 9 const blockInstance = new BlockClass(host);
  10. 10 // mount
  11. 11 if (blockInstance.mount) {
  12. 12 blockInstance.mount();
  13. 13 }
  14. 14 });
  15. 15 }
  16. 16
  17. 17 function _getBlockClass(blockParams) {
  18. 18 ...
  19. 19 return new Promise(resolve => {
  20. 20 const ext = '<%=ctx.app.meta.isProd ? ".min" : ""%>';
  21. 21 const block_js = `api/static/${module.replace('-', '/')}/blocks/${blockName}/main${ext}`;
  22. 22 window.requirejs([block_js], BlockClass => {
  23. 23 BlockClasses[params] = BlockClass;
  24. 24 resolve(BlockClass);
  25. 25 });
  26. 26 });
  27. 27 }
  • 行21:动态拼接Block区块的主文件路径

    • 如果是生产环境名称为:main.min.js,其他环境为:main.js
  • 行22:采用AMD方式加载主文件,返回Block Class

  • 行9:创建Block Class的实例

  • 行12:调用实例的mount方法,完成Block区块的内容渲染

小结

通过前面的介绍,我们可以归纳出Block区块的主文件具备以下特征:

1)约定路径

主文件采用约定的路径和名称,并且作为后端静态资源提供。请参见,模块后端:Static静态资源

路径规则

  • 物理路径:{module path}/backend/static/blocks/{block name}/main.js

  • 访问路径:/api/static/{module path}/blocks/{block name}/main.js

路径举例

  • 物理路径:src/module-vendor/test-party/backend/static/blocks/blockArticleCommentCount/main.js

  • 访问路径:/api/static/test/party/blocks/blockArticleCommentCount/main.js

2)同时支持CommonJS/AMD两种加载机制

3)不同运行环境使用不同名称

名称 说明
生产环境 main.min.js
测试环境、开发环境 main.js

因此,我们在开发阶段直接编辑main.js,部署时则需要编译生成main.min.js