时间戳

首页 > 解决方案 > 使用导入将单个文件显示模块模式 javascript 转换为多文件

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

问题描述

我是 JS 设计模式的新手，并没有使用过多的requireor 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 ');

标签： javascriptdesign-patternsimportrevealing-module-pattern

解决方案

你可以使用ES6 modules.

脚步：

  1. 创建模块文件，假设文件名为“someModule.js”，并在其中添加代码并使用 .export 导出方法ES6 export。
   //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 ');

或使用通配符 (*)

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
}

推荐阅读