前面介绍完主文件的加载机制,现在就可以进行Block区块主文件的编码开发了

main.js

src/module-vendor/test-party/backend/static/blocks/blockArticleCommentCount/main.js

  1. 1(function (global, factory) {
  2. 2 /* eslint-disable */
  3. 3 typeof exports === 'object' && typeof module !== 'undefined'
  4. 4 ? (module.exports = factory())
  5. 5 : typeof define === 'function' && define.amd
  6. 6 ? define(factory)
  7. 7 : null;
  8. 8 /* eslint-enable */
  9. 9})(this, function () {
  10. 10 class Block {
  11. 11 constructor(host) {
  12. 12 this.host = host;
  13. 13 this.timerId = 0;
  14. 14 }
  15. 15
  16. 16 async render() {
  17. 17 const { $util } = this.host;
  18. 18 const title = $util.text('Article Comment Count');
  19. 19 return `
  20. 20 <div class="article-comment-count">
  21. 21 <span class="title">${title}</span>
  22. 22 <span class="count"></span>
  23. 23 <span class="date"></span>
  24. 24 </div>`;
  25. 25 }
  26. 26
  27. 27 async mount() {
  28. 28 const { $content } = this.host;
  29. 29 // load css
  30. 30 await this._loadCSS();
  31. 31 // start timer
  32. 32 const interval = $content.interval;
  33. 33 this.timerId = window.setInterval(async () => {
  34. 34 await this._fetchAndShow();
  35. 35 }, interval);
  36. 36 }
  37. 37
  38. 38 async unmount() {
  39. 39 if (this.timerId) {
  40. 40 window.clearInterval(this.timerId);
  41. 41 this.timerId = 0;
  42. 42 }
  43. 43 }
  44. 44
  45. 45 ...
  46. 46 }
  47. 47 return Block;
  48. 48});
  • 行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指令,只需执行如下命令即可:

  1. 1$ npm run cli :tools:babel {blockPath}/main.js

举例:

  1. 1$ npm run cli :tools:babel src/module-vendor/test-party/backend/static/blocks/blockArticleCommentCount/main.js