使用import将单文件显示模块模式javascript转换为多文件

Question

我是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 ');

Answer 1

您可以使用ES6 modules。

步骤：

1. 创建模块文件，假设文件名为"someModule.js"，并在其中添加代码，然后使用ES6export导出方法

//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,
}
export {
processData,
addDatatoPrivate1,
addDatatoPrivate2,
}

现在，模块的用户可以导入如下模块。

使用ES6对象销毁

import {addDatatoPrivate1, addDatatoPrivate2, processData} from './someModule'
addDatatoPrivate1(' some data here ');
addDatatoPrivate2(' some data here2 ');

OR使用通配符(*(

import * as moduleInstance from './someModule'
moduleInstance.addDatatoPrivate1(' some data here ');
moduleInstance.addDatatoPrivate2(' some data here2 ');

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

如果您想为每个模块创建单独的模块，那么您可以执行以下操作

我们可以使用ES6默认导出来避免对象破坏。

模块1.js

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

export default processData;

模块2.js

import processData from './module1';
//some private variables
let private1;
//some public functions
function addDatatoPrivate1 (data) {
private1 = processData(data);
}
export default addDatatoPrivate1;

模块3.js

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';
addDatatoPrivate1(' some data here ');
addDatatoPrivate2(' some data here2 ');

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

index.js

import addDatatoPrivate1 from './module2';
import addDatatoPrivate2 from './module3';
export {
addDatatoPrivate1,
addDatatoPrivate2
}