JavaScript核心功能之模块的导入导出

一、模块的概念

模块是将 JavaScript 程序拆分为可按需导入的单独模块的机制。

 

二、如何创建模块

模块是定义在单独的.js文件中的。

 

三、export导出模块的两种方式

1、将export放到你想要导出的项前面

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return {
    length: length,
    x: x,
    y: y,
    color: color
  };
}

 

2、在模块文件的末尾使用一个 export 语句，语句是用花括号括起来的用逗号分割的列表。

export { name, draw, reportArea, reportPerimeter };

 

四、import导入模块到你的脚本文件中

使用 import 语句，然后你在花括号中用逗号分隔你想导入的功能列表，然后是关键字 from，然后是模块文件的路径。

1、绝对路径
import { name, draw, reportArea, reportPerimeter } from '/js-examples/modules/basic-modules/modules/square.js';

2、相对路径
import { name, draw, reportArea, reportPerimeter } from './modules/square.js

导入了这些功能到你的脚本文件，你可以像定义在相同的文件中的一样去使用它。
let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

 

五、默认导出功能 

1、使用export default ，不要大括号

export default randomSquare;

2、将export default 放到函数前面，定义它为一个匿名函数

export default function(ctx) {
  ...
}

3、导入默认函数

没有大括号，因为每个模块只允许有一个默认导出

import randomSquare from './modules/square.js';

有大括号，与上面等价

import {default as randomSquare} from './modules/square.js';