Преобразование шаблона файла одного файла javascript в несколько файлов с помощью импорта - PullRequest
Новая
       18

Преобразование шаблона файла одного файла javascript в несколько файлов с помощью импорта

2 голосов
/ 20 февраля 2020

Я новичок в 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 были доступны для других методов в модуле в частном порядке. Как мне go разбить код на несколько файлов, а затем как использовать import, чтобы объединить различные компоненты модуля в один.

Конечная цель - получить что-то, что пользователь может загрузить в свой собственный проект, и использовать что-то вроде d3 js или jQuery. Например, с помощью кода, как указано выше, любой может просто назначить модуль переменной и использовать его следующим образом: 

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

1 Ответ

4 голосов
/ 23 февраля 2020

Вы можете использовать ES6 modules.

Шаги:

  1. Создать файл модуля, скажем, имя файла - someModule. js и добавить свой код в это и экспортировать методы, используя 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 ');

Невозможно экспортировать переменную в частном порядке. Все, что экспортируется из модуля, по умолчанию публикуется c.

Если вы хотите создать отдельный модуль для каждого из них, вы можете сделать что-то вроде ниже.

Мы могли бы использовать ES6 экспорт по умолчанию в избегать разрушения объектов.

module1. js


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


 export default processData;

module2. js

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

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

export default addDatatoPrivate1;

module3. 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
}
...