前面我们把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/suite-vendor/test-party/modules/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