前面我们把Block区块的周边文件
和配置
均已准备就绪,接下来就可以进行Block区块主文件
的编码开发了。但是在正式开发之前,我们有必要先介绍一下主文件的加载机制
加载机制:CommonJS/AMD
前面我们提到Markdown内容
需要在不同的场景下进行输出和渲染,因此Block区块的主文件
也需要支持不同场景下的加载机制。比如,在CabloyJS后端输出需要支持CommonJS
加载机制,在CMS静态站点中需要支持AMD
加载机制
为了有更直观的认知,贴出部分源码如下:
1. CommonJS加载
src/module-vendor/a-markdown/backend/src/bean/bean.markdown.js
- 1...
- 2let block_js = path.join(_module.static.backend, `blocks/${blockName}/main`);
- 3if (ctx.app.meta.isProd) {
- 4 block_js += '.min';
- 5}
- 6block_js += '.js';
- 7const BlockClass = require3(block_js);
- 8// render
- 9const blockHost = this._getHost({ host, content, locale });
- 10// Block Instance
- 11const blockInstance = new BlockClass(blockHost);
- 12let blockHtml = '';
- 13if (blockInstance.render) {
- 14 blockHtml = await blockInstance.render();
- 15}
- 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 function _mountBlock($blockContainer) {
- 2 ...
- 3 // Block Class
- 4 _getBlockClass(blockParams).then(BlockClass => {
- 5 ...
- 6 // host
- 7 const host = _getHost($blockContainer, blockContent);
- 8 // Block Instance
- 9 const blockInstance = new BlockClass(host);
- 10 // mount
- 11 if (blockInstance.mount) {
- 12 blockInstance.mount();
- 13 }
- 14 });
- 15 }
- 16
- 17 function _getBlockClass(blockParams) {
- 18 ...
- 19 return new Promise(resolve => {
- 20 const ext = '<%=ctx.app.meta.isProd ? ".min" : ""%>';
- 21 const block_js = `api/static/${module.replace('-', '/')}/blocks/${blockName}/main${ext}`;
- 22 window.requirejs([block_js], BlockClass => {
- 23 BlockClasses[params] = BlockClass;
- 24 resolve(BlockClass);
- 25 });
- 26 });
- 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
评论: