使用导入将单个文件模式javascript转换为多文件

我是JS设计模式的新手，没有使用过太多的

require

或

import

。我有一个包含多个函数和私有变量的单一模块，它被打包到一个模块中。目前，所有内容都在一个文件中，但将其拆分为多个文件将是一种良好的做法，并提供更好的清晰度。模块模式的简化视图如下所示：

let Module = () => {
  //some private variables
  let private1,
      private2;

  //some public functions
  function addDatatoPrivate1 (data) {
    private1 = processData(data);
  }

  function addDatatoPrivate2 (data) {
    private2 = processData(data);
  }

  //private function processData
  function processData(data) {
    return data.trim();
  }

  return {
    addDatatoPrivate1: addDatatoPrivate1,
    addDatatoPrivate2: addDatatoPrivate2,
  }
}

我想将函数拆分为多个文件，即

addDatatoPrivate1

、

addDatatoPrivate2

和

processData

的单独文件。此外，我希望模块中的其他方法可以使用变量

private1

和

private2

。如何将代码拆分为多个文件，然后如何使用

import

将模块的不同组件打包成一个文件

最终的目标是让用户能够将一些东西加载到自己的项目中，并使用类似d3js或jQuery的东西。例如，使用上述代码，任何人都可以简单地将模块分配给一个变量，并像这样使用它：

  let moduleInstance = Module();
  moduleInstance.addDatatoPrivate1(' some data here ');
  moduleInstance.addDatatoPrivate2(' some data here2 ');

---

您可以使用

ES6模块

步骤：

创建模块文件，假设文件名为'someModule.js'，在其中添加代码，并使用

ES6

export

导出方法

现在，模块的用户可以像下面这样导入模块

使用

ES6

对象分解

 import {addDatatoPrivate1, addDatatoPrivate2, processData} from './someModule'

  addDatatoPrivate1(' some data here ');
  addDatatoPrivate2(' some data here2 ');

或使用通配符（*）

不可能私下导出变量。默认情况下，从模块导出的任何内容都是公共的

如果要为每个模块创建单独的模块，可以执行以下操作。

我们可以使用

ES6

默认导出来避免对象的破坏

module1.js

 function processData(data) {
    return data.trim();
 }


 export default processData;

 import processData from './module1';
 //some private variables
 let private1;

//some public functions
function addDatatoPrivate1 (data) {
    private1 = processData(data);
}

export default addDatatoPrivate1;

import processData from './module1';

//some private variables
let private2;


function addDatatoPrivate2 (data) {
    private2 = processData(data);
}

export default addDatatoPrivate2;

import addDatatoPrivate1 from './module2';
import addDatatoPrivate2 from './module3';

export {
   addDatatoPrivate1,
   addDatatoPrivate2
}

module2.js

 function processData(data) {
    return data.trim();
 }


 export default processData;

 import processData from './module1';
 //some private variables
 let private1;

//some public functions
function addDatatoPrivate1 (data) {
    private1 = processData(data);
}

export default addDatatoPrivate1;

import processData from './module1';

//some private variables
let private2;


function addDatatoPrivate2 (data) {
    private2 = processData(data);
}

export default addDatatoPrivate2;

import addDatatoPrivate1 from './module2';
import addDatatoPrivate2 from './module3';

export {
   addDatatoPrivate1,
   addDatatoPrivate2
}

module3.js

 function processData(data) {
    return data.trim();
 }


 export default processData;

 import processData from './module1';
 //some private variables
 let private1;

//some public functions
function addDatatoPrivate1 (data) {
    private1 = processData(data);
}

export default addDatatoPrivate1;

import processData from './module1';

//some private variables
let private2;


function addDatatoPrivate2 (data) {
    private2 = processData(data);
}

export default addDatatoPrivate2;

import addDatatoPrivate1 from './module2';
import addDatatoPrivate2 from './module3';

export {
   addDatatoPrivate1,
   addDatatoPrivate2
}

然后你可以包括这些模块和其他一些文件

import addDatatoPrivate1 from './module2';
import addDatatoPrivate2 from './module3';

addDatatoPrivate1(' some data here ');
addDatatoPrivate2(' some data here2 ');

或者，您可以将所有方法导出到一个文件中，以便其他人可以导入并使用它

index.js

 function processData(data) {
    return data.trim();
 }


 export default processData;

 import processData from './module1';
 //some private variables
 let private1;

//some public functions
function addDatatoPrivate1 (data) {
    private1 = processData(data);
}

export default addDatatoPrivate1;

import processData from './module1';

//some private variables
let private2;


function addDatatoPrivate2 (data) {
    private2 = processData(data);
}

export default addDatatoPrivate2;

import addDatatoPrivate1 from './module2';
import addDatatoPrivate2 from './module3';

export {
   addDatatoPrivate1,
   addDatatoPrivate2
}

---

谢谢你的回答。如果必须将这两个函数放在单独的文件中，如何将其导入到一个主模块文件中？重点是将一些模块作为单独的文件。感谢这一帮助，但最后一部分是如何将所有函数打包到一个包中以便像jquery或d3js那样导出？