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