javascript - 设置一次semantic-ui-calendar，以便在多个js文件中多次使用

Question

我有 Django 应用程序，它使用 webpack 来编译前端。作为前端库，我使用语义用户界面。最近我安装了单独的模块semantic-ui-calendar .

工作正常。在所需的js文件中我可以编写

  $('#event_starts_at_1').calendar({
      minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes()),
      monthFirst: false,
  });

它将初始化日历组件。

ui-calendar 组件使用了许多我将使用的选项。我还有多个页面将嵌入 ui-calendar。

我不想在每个 js 文件中重复相同的 ui-calendar 初始化代码，并寻找仅初始化组件一次的解决方案。

对我来说，问题看起来不是很复杂，但我不知道如何用 js 和 webpack 解决它。也许您可以提供一些片段，它可以子类化 ui-calendar 或执行其他操作来仅设置一次。谢谢!

Answer 1

我可以看到您已经在使用 JQuery，所以这里有一个建议。请注意，有多种不同的方法可以执行此操作，这只是一种方法。

如果您不希望在自己的 javascript 中初始化每个元素，正如您在问题示例中所写的那样，您始终可以将其抽象出来。

您可以考虑为所有日历元素指定一个类名，例如semantic-calendar。然后，在 javascript 文件中，使用文档就绪函数和 foreach 循环来初始化具有给定类的所有元素:

$( document ).ready(function() {
    $('.semantic-calendar').each(function(){ 
        $(this).calendar({
            minDate: new Date(today.getFullYear(), today.getMonth(), 
                today.getDate(), today.getHours(), today.getMinutes()),
            monthFirst: false
        });
    });
});

请注意，false 后面的最后一个逗号已被删除。它不应该在那里，因为它是最后一个元素。

现在，如果您可以控制的话，这个 javascript 片段可以包含在日历 js 本身中。它还可以作为单独的文件或现有的自定义 JavaScript 实用程序集合包含在内。

如果需要，您始终可以跳过文档就绪包装器，并将代码放入函数中。这样你就可以通过调用函数来决定初始化何时发生，而不是在加载 DOM 时自动发生。