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

【问题标题】：Difference between script filed and life cycle methods in Grapesjs?Grapesjs中脚本文件和生命周期方法之间的区别？
【发布时间】：2020-08-26 20:41:50
【问题描述】：

我是 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',
    }
  }
});

在文档网站上它说：

如果您现在检查由编辑器编码的生成 HTML（通过导出按钮或 editor.getHtml()），您可能会看到如下内容：

<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 的情况（特别是当我比较那些两个库。）？

【问题讨论】：

标签： javascript reactjs grapesjs

【解决方案1】：

你应该知道，Grapes 使用的是backbone.js，它的反应是完全不同的。

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

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

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

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

    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"
      }
    });

【讨论】：