默认导入导出:
导出(定义“体”):
对象:export default { ... }
函数:export default function fun() { ... }
变量:export default 12
对应的导入方式(定义“头”): import <任意名> from '模块路径'
按需导入导出:
导出变量: export var a = 10 【按需导出】
导出函数: export function Fun() {...} 【按需导出】
导出函数: export function Fun() {...} 【按需导出】
导出对象: export var b= {...}
对应的导入方式(“克隆”): import { a, Fun, b as c} from ‘模块路径’ 【按需导入】
对应的导入方式(“克隆”): import { a, Fun, b as c} from ‘模块路径’ 【按需导入】
注意:一个模块只能默认导出一个,而按需导出是多个。
示例:导出:
export var a= "按需导出变量"; export function Fun() { console.log("按需导出函数"); } export var obj = { name: '小庄', age: '男' } export default 12;
导入:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="module"> import {a,Fun,obj} from "./text.js" console.log(a); Fun(); console.log(obj.name) console.log("---------------默认导出---------------"); import xm from "./text.js" console.log(xm) </script> </head> <body> </body> </html>