JS模块化
作者:互联网
导入&导出模块
为了获得模块的功能要做的第一件事是把它们导出来。使用 export 语句来完成。
最简单的方法是把它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
};
}
你能够导出函数,var,let,const, function和类。export要放在最外层;比如不能够在函数内使用export。
export { name, draw, reportArea, reportPerimeter };
导入/导出模块:
import { name, draw, reportArea, reportPerimeter } from 'JS文件';
默认导出(export default)
在一个JS模块中,比如有一个名为randomSquare()的函数,将它作为默认导出:
export default randomSquare;
// 或者
export default function(ctx) {
...
}
导入时:
import randomSquare from '';
// 相当于
import {default as randomSquare} from './modules/square.mjs';
重命名导入与导出
export {
function1 as FunctionName1,
function2 as FunctionName2
};
import {
FunctionName1,
FunctionName2
} from '';
// 或者
export { function1, function2 };
import {
function1 as FunctionName1,
function2 as FunctionName2
} from '';
创建模块对象
导入每一个模块功能到一个模块功能对象上。
import * as Module from '';
// 这将获取所有可用的导出,并使它们可以作为对象模块的成员使用,从而有效地为其提供自己的命名空间。
Module.function1()
Module.function2()
模块与类(class)
导出和导入类; 这是避免代码冲突的另一种选择,如果您已经以面向对象的方式编写了模块代码,那么它尤其有用。
class Square {
constructor(ctx, listId, length, x, y, color) {
...
}
draw() {
...
}
...
}
// 导出
export { Square };
// 使用
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
合并模块
export * from 'x.mjs'
export { name } from 'x.mjs'
有如下文件目录:
modules/
canvas.mjs
shapes.mjs
shapes/
circle.mjs
square.mjs
triangle.mjs
在每个子模块中,输出具有相同的形式,例如,
export { Square };
在shapes.mjs里面,我们包括以下几行:
export { Square } from '/js-examples/modules/module-aggregation/modules/shapes/square.mjs';
export { Triangle } from '/js-examples/modules/module-aggregation/modules/shapes/triangle.mjs';
export { Circle } from '/js-examples/modules/module-aggregation/modules/shapes/circle.mjs';
main.mjs 文件中,我们可以通过替换来访问所有三个模块类。
import { Square, Circle, Triangle } from './modules/shapes.mjs';
动态加载模块
浏览器中可用的JavaScript模块功能的最新部分是动态模块加载。 这允许您仅在需要时动态加载模块,而不必预先加载所有模块。 这有一些明显的性能优势;
允许您将import()作为函数调用,将其作为参数传递给模块的路径。 它返回一个 promise,它用一个模块对象来实现(参见Creating a module object),让你可以访问该对象的导出,例如
import('/modules/myModule.mjs') .then((module) => { // Do something with the module. });
标签:模块化,modules,JS,导出,export,模块,mjs,import 来源: https://www.cnblogs.com/lvzl/p/14782995.html