JS: Функция разделения в виде частей модуля

Question

Я хотел бы структурировать этот код в лучшем виде, создав какие-то модули. Я использую ES6, поэтому я попытался использовать import/export.

Пример функции

function() { 
    var graph = new joint.dia.Graph; 

    var paper = new joint.dia.Paper({ 
     el: $('#canvas'), 
     width: 600, 
     height: 200, 
     model: graph, 
     gridSize: 1 
    }); 

    var rect = new joint.shapes.basic.Rect({ 
     position: { x: 100, y: 30 }, 
     size: { width: 100, height: 30 }, 
     attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } 
    }); 

    var rect2 = rect.clone(); 
    rect2.translate(300); 

    var link = new joint.dia.Link({ 
     source: { id: rect.id }, 
     target: { id: rect2.id } 
    }); 

    graph.addCells([rect, rect2, link]); 
} 

Так что я хотел бы получить что-то подобное, что было бы гораздо лучше читаемым:

script.js

import * from './config.js'; 

function() { 
    var graph = graph(); 
    var paper = paper(); 
    var rect = rect(); 
    var rect2 = rect.clone(); 
    rect2.translate(300); 
    var link = link(); 

    graph.addCells([rect, rect2, link]); 
} 

И все содержимое должно быть в другом файле:

config.js

export 
var graph = new joint.dia.Graph, 
var paper = new joint.dia.Paper({ 
    el: $('#canvas'), 
    width: 600, 
    height: 200, 
    model: graph, 
    gridSize: 1 
}); 
// ... 

Но эта попытка не имеет правильный синтаксис. Как это сделать?

Answer 1

Но эта попытка не имеет правильный синтаксис.

Вы ищете

export const graph = new joint.dia.Graph; 
export const paper = new joint.dia.Paper({ 
    el: $('#canvas'), 
    width: 600, 
    height: 200, 
    model: graph, 
    gridSize: 1 
}); 
… 

Однако, вам нужно обернуть их в функции таким образом, чтобы импортировать модуль не выполняет каких-либо побочных эффектов, и вы можете использовать их (назовем их несколько раз когда вы вызываете функцию, которую вы создаете). Вы бы искать

export function graph() { 
    return new joint.dia.Graph; 
} 
export function paper(graph) { 
    return new joint.dia.Paper({ 
     el: $('#canvas'), 
     width: 600, 
     height: 200, 
     model: graph, 
     gridSize: 1 
    }); 
} 
export function rect() { 
    return new joint.shapes.basic.Rect({ 
     position: { x: 100, y: 30 }, 
     size: { width: 100, height: 30 }, 
     attrs: { rect: { fill: 'blue' }, 
     text: { text: 'my box', fill: 'white' } } 
    }); 
} 
export function link(rect1, rect2) { 
    return new joint.dia.Link({ 
     source: { id: rect.id }, 
     target: { id: rect2.id } 
    }); 
} 

, так что вы можете использовать

import {graph, paper, rect, link} from "…" 

export default function() { 
    const g = graph(), 
      p = paper(g), 
      r1 = rect(), 
      r2 = r.clone(); 
    r2.translate(300); 

    g.addCells([r1, r2, link(r1, r2)]); 
} 

Однако, я не думаю, что ваш код действительно выгодно распространяется на несколько модулей. Пока вы не можете повторно использовать какую-либо из этих функций, вы должны просто встраивать их, они весьма специфичны.

Answer 2

Вы должны указать имя экспортированным методам и импортированный модуль.

Попробуйте этот код.

script.js

import * as config from './config.js'; 

function() { 
    var graph = config.graph(); 
    var paper = config.paper(); 
    var rect = config.rect(); 
    var rect2 = config.rect.clone(); 
    rect2 = rect2.translate(300); 
    var link = config.link(); 

    config.graph.addCells([rect, rect2, link]); 
} 

config.js

export {graph as graph, paper as paper} 
var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({ 
    el: $('#canvas'), 
    width: 600, 
    height: 200, 
    model: graph, 
    gridSize: 1 
}); 
// ...