如何使用带有 Maquette.js 的外部库？

Question

问题：如何在 Maquette.js 中使用像 tether.js 这样的外部库？

我的主要问题是，如果我在渲染函数中的某个地方对其进行了初始化我不知道在哪里可以将其拆除，随着时间的推移，当元素重新渲染时会导致内存泄漏。 p>

我尝试使用 enterAnimation 和 exitAnimation 作为生命周期挂钩，但很快遇到了无法更改事件处理程序错误，因为我需要访问该项目独有的特定 Tether 实例。

想法？帮助？谢谢！

背景：

过去一周我开始使用 Maquette.js 非常开心。我有一个相当大的 AngularJS v1 应用程序，它在很多地方都使用了工具提示。

阻碍我创建更多 Maquette.js 渲染视图的主要因素是我对 Angular 工具提示指令的依赖。

所以，我开始使用tether.js 和drop.js 来利用它们的下拉定位功能，这样我就不必重写它们了。

Answer 1

最简单的解决方法是在 DOM 渲染后立即添加工具提示，maquette 提供了afterCreate 回调来执行此操作（您将获取元素作为其第一个参数）。

更具挑战性的是何时销毁工具提示。 Maquette 故意不告诉你 DOM 节点何时被移除，那样会严重影响性能。

Maquette 让您可以控制组件生命周期的管理，因此一个好的模式应该如下：

let createPage = () => {
  let tooltips = [];

  let initializeTooltip = (element) => {
    tooltips.push(createTooltip(element));
  }

  return {

    renderMaquette: () => {
      return h('div.page', [
        'some content', 
        h('div.with.tooltip', {afterCreate: initializeTooltip})
      ])
    },

    destroy: () => {
      tooltips.forEach((tooltip) => {tooltip.destroy()});
    }

  }
}

当您使用此模式时，您的组件需要将 destroy() 调用传播到子组件并最终清理使用的工具提示。

我们使用相同的模式来销毁 CKEditor 实例。