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