如何将可重复使用的JavaScript代码移动到单独的文件中，而不是主文件并使用几次？

Question

我有一个具有许多属性的数据表。每次我想使用它时，我都必须复制它们。这使我的视图在巨大的混乱背后。因此，我决定创建一个单独的.js文件并在此处复制可重复使用的代码，但我无法在主文件中引用它。我的.js代码的某些部分就像Bellow：

      function loadDataTable() {

        $(".yadcf-filter-range-date").persianDatepicker();
        dataTable = $('#SP1').DataTable({
            serverSide: true,
            processing: true,
            pageLength: 10,
            infoFiltered: true,
            orderMulti: false,
            scrollX: true,
            scrollY: true,
            bStateSave: true,
            columnDefs: [{ orderable: false, targets: [15] }],
             .
             .
             .
       }

我在其他JS文件中创建一个函数：例如Bellow：

    function CommonPart(i) { 
            serverSide: true,
            processing: true,
            pageLength: 10,
            infoFiltered: true,
            orderMulti: false,
            scrollX: true,
            scrollY: true,
            bStateSave: true,
            columnDefs: [{ orderable: false, targets: [i] }]
           }

我不知道如何在主代码中使用Common Part，例如Bellow：

      function loadDataTable() {

        $(".yadcf-filter-range-date").persianDatepicker();
        dataTable = $('#SP1').DataTable({
        CommonPart(15);
        ...
         });

Answer 1

我首选的方法是用 ecmascript模块 。

您可以将每个功能都放入单独的文件中。您可以将文件命名为您喜欢的每个文件，但是我通常在包含的函数之后将它们命名。对于Web，我将给文件一个.js文件扩展名。在节点中，我会给它一个.mjs扩展名。

在每个文件中，prepend export export 这样的功能：

export function funcName()
{
}

然后从主代码文件中，您可以 import> import 您的函数您从这些独立文件中的函数

import { funcName } from "./fileName.mjs";

之后，您可以将函数像在主代码文件中声明一样（因为现在已导入）。

Answer 2

最好，最受信任的资源ID MDN WebDocs
链接： https：// https://developer.mozilla.org/en-en--en--en-------- US/DOCS/WEB/JAVASCRIPT/GUIDE/模块

如果您仍然感到困惑随时提出问题。