JavaScript核心功能之模块的导入导出
2023-09-14 08:57:35 时间
一、模块的概念
模块是将 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';
相关文章
- Android中WebView如何加载JavaScript脚本
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Coding interview problem: Scheduler functional way
- [Javascript] Multiply Two Arrays over a Function in JavaScript
- [Javascript] Object.freeze() vs Object.seal()
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] How to use JavaScript's String.replace
- [Javascript] Safely Access a Property on a JavaScript Array with Optional Chaining
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Understanding the .constructor property on JavaScript Objects
- [Javascript] Create scrollable DOM elements with Greensock
- [Javascript] Decorators in JavaScript
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] Redirect the browser using JavaScript
- [Javascript] What is JavaScript Function Currying?
- Javascript 学习记录
- Javascript引擎单线程机制及setTimeout执行原理说明
- Visual studio 2017 中的Javascript智能提示与调试
- SAP Commerce Cloud JavaScript Storefront
- 【华为OD机试 2023】最左侧冗余覆盖子串(C++ Java JavaScript Python)
- 【华为OD机试 2023】 优秀学员统计(C++ Java JavaScript Python)
- JavaScript学习总结(四)——this、原型链、javascript面向对象
- JavaScript--序列化以及转义
- JavaScript简介与快速体验