在Intercooler.JS删除事件和附加对象之前，它们如何从DOM元素中清除它们？

Question

我有一个在Laravel中生成的静态服务器端生成的表单，正在尝试将Intercooler.js添加到其中。在这种形式中，我使用javascript库将输入掩码应用于某些文本字段。如果没有Intercooler，则在提交表单后，页面将被重定向，并且该页面中的所有DOM对象都会被浏览器破坏，因此我不必担心清理。

使用Intercooler.js和其他框架，都不会重新加载页面。而是交换页面的内容，并从页面中删除DOM对象，但是由于它们仍可以附加到其他对象和事件，因此它们仍可以在内存中。

所以我的问题是：在Intercooler.js中，我的清洁代码应该放在哪里？我知道Intercooler.ready（function（elt））存在，但是根据文档，我仅收到添加的新元素，而不接收旧的元素。它没有给我机会清除与要删除的元素相关的任何内容。

我通读了文档，找不到任何可用于此目的的东西。

Answer 1

我在Gitter社区中问过这个问题。为了在删除元素之前清理代码，您应该侦听beforeSwap.ic事件。为了简化其使用，我创建了一个功能，该功能的灵感来自于turbolinks，刺激和unpoly如何处理这种情况。

const compiler = function(selector, fn) {
  Intercooler.ready(function(elt) {
    let cleanupFn;
    const $el = $(elt).find(selector);

    if ($el.length > 0) {
      cleanupFn = fn($el);
    }

    // Cleanup
    $(document).on("beforeSwap.ic", function(e) {
      const el = e.target;

      //Check if the element selected is inside the element being swapped
      if ($(el).find(selector).length > 0) {
        if (cleanupFn) cleanupFn();
      }
    });
  });
};

export default compiler;

这是使用它的示例：

compiler("form.userForm", elt => {
    const im = new Inputmask("999.999.999-99");
    const inputCpf = $("input[name=cpf]")[0];
    im.mask(inputCpf);

    return () => {
      if (inputCpf.inputmask) inputCpf.inputmask.remove();
    };
  });

当调用compiler函数时，从要监视的元素中传递CSS选择器。当该元素进入页面时，将通过jQuery选择他并将其传递给提供的回调。

为了清理，您从回调中返回了一个函数，该函数将在删除所选元素之前被调用。