前面介绍完主文件的`加载机制`,现在就可以进行Block区块`主文件`的编码开发了
## main.js
`src/suite-vendor/test-party/modules/test-party/backend/static/blocks/blockArticleCommentCount/main.js`
``` javascript
(function (global, factory) {
/* eslint-disable */
typeof exports === 'object' && typeof module !== 'undefined'
? (module.exports = factory())
: typeof define === 'function' && define.amd
? define(factory)
: null;
/* eslint-enable */
})(this, function () {
class Block {
constructor(host) {
this.host = host;
this.timerId = 0;
}
async render() {
const { $util } = this.host;
const title = $util.text('Article Comment Count');
return `
${title}
`;
}
async mount() {
const { $content } = this.host;
// load css
await this._loadCSS();
// start timer
const interval = $content.interval;
this.timerId = window.setInterval(async () => {
await this._fetchAndShow();
}, interval);
}
async unmount() {
if (this.timerId) {
window.clearInterval(this.timerId);
this.timerId = 0;
}
}
...
}
return Block;
});
```
* 行1-9:采用统一的规范同时支持`CommonJS/AMD`加载机制
* 行10:定义Block区块`Class`,并返回
Block区块`Class`可按需提供如下方法,在合适的场景调用
| 名称 | 可选 | 场景 | 说明 |
|----|----|----|----|
| constructor | false | all | 创建实例时,传递场景的`宿主对象` |
| render | true | 后端输出/可视化编辑 | 用于输出HTML内容,适用于区块的`静态功能` |
| mount | true | all(后端输出例外) | 当HTML内容显示时执行自定义逻辑,适用于区块的`动态功能` |
| unmount | true | all(后端输出例外) | 当显示的HTML内容销毁时执行清理逻辑 |
## main.min.js
当我们在开发阶段编辑完成`main.js`之后,就需要编译生成`main.min.js`,以便在生产环境使用
CabloyJS项目已经内置了`npm script`指令,只需执行如下命令即可:
``` bash
$ npm run cli :tools:babel {blockPath}/main.js
```
举例:
``` bash
$ npm run cli :tools:babel src/suite-vendor/test-party/modules/test-party/backend/static/blocks/blockArticleCommentCount/main.js
```