Grapesjs 中的脚本文件和生命周期方法之间的区别？

Question

我是 Grapesjs 的新手，我在 Grapesjs 文档网站上找到了介绍：

所以如果我们有这样的代码：

editor.BlockManager.add('test-block', {
  label: 'Test block',
  attributes: {class: 'fa fa-text'},
  content: {
    script: "alert('Hi'); console.log('the element', this)",
    // Add some style just to make the component visible
    style: {
      width: '100px',
      height: '100px',
      'background-color': 'red',
    }
  }
});

在文档网站上说：

If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:

<div id="c764"></div>
<script>
  var items = document.querySelectorAll('#c764');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      // START component code
      alert('Hi');
      console.log('the element', this)
      // END component code
    }.bind(items[i]))();
  }
</script>

貌似script标签里定义的东西都会在组件挂载后执行，反之，考虑到Grapesjs提供了view.init()和view.onRender()这样的生命周期方法，我在想使用这样的生命周期方法，我们或许可以达到完全相同的效果。

所以我的问题是：script 和组件自己的生命周期方法有什么区别？

顺便说一句，我以前用过 React，我在 componentDidMount() 这样的生命周期中完成了大部分状态初始化和数据获取，所以我个人无法理解 Grapesjs 中 script 的场景（尤其是当我比较这两个库时。）?

Answer 1

正如您应该知道的那样，Grapes 使用 backbone.js，反应非常不同。

现在，谈谈 grapesjs 的工作原理。

生命周期挂钩将允许您在网站构建过程中与模型和编辑器实例进行交互。
脚本将包含 javascript 您的组件需要在编辑器内外都有用（显然，对模型属性的访问权限有限（只读））。

Here 你可以看到一个非常基本的，可能是两种情况的虚拟例子。

在初始化时设置侦听器：您可能不需要在结果页面中提醒组件属性的更改...
添加动画class：脚本在编辑器中渲染时会运行，在发布页面也会运行，所以你可以在葡萄编辑器中看到动画。

    const editor = grapesjs.init({
      height: "100%",
      container: "#gjs",
      showOffsets: true,
      fromElement: true,
      noticeOnUnload: false,
      storageManager: false,
      canvas: {
        styles: [
          "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
        ]
      }
    });
    editor.DomComponents.addType("MagicBox", {
      model: {
        defaults: {
          tagName: "div",
          attributes: {
            alert: ""
          },
          traits: ["alert"]
        },
        init() {
          this.listenTo(this, "change:attributes:alert", this.handleChange);
        },
        handleChange(a) {
          alert(this.get("attributes").alert);
        }
      }
    });

    const blockManager = editor.BlockManager;
    blockManager.add("magic-box", {
      label: "MagicBox",
      content: {
        type: "MagicBox",
        tagName: "div",
        style: {
          width: "100px",
          height: "100px",
          background: "blue"
        },
        script: 'this.className+="animate__animated animate__bounce"'
      },
      category: "Basic",
      attributes: {
        title: "Magic Box"
      }
    });

Grapesjs 中的脚本文件和生命周期方法之间的区别？

Difference between script filed and life cycle methods in Grapesjs?

javascript

reactjs

grapesjs