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 
}); 
… 

를 찾고 있습니다

, 당신은 함수에서 그들을 포장해야합니다 당신이 만들고있는 함수가 호출 될 때). 당신은 그러나, 나는 당신의 코드가 정말 여러 모듈에 분산되는 이익을 생각하지 않습니다

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)]); 
} 

을 사용할 수 있도록

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 } 
    }); 
} 

를 찾을 것입니다. 이러한 기능을 재사용 할 수 없으면 인라인해야합니다. 매우 구체적입니다.

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 
}); 
// ...