ES6导入导出 - zhuangjie

ES6导入导出

默认导入导出：

导出（定义“体”）：

　　对象：export default { ... }

　　函数：export default function fun() { ... }

　　变量：export default 12

对应的导入方式（定义“头”）： import <任意名> from '模块路径'

按需导入导出：

导出变量： export var a = 10 【按需导出】
导出函数： export function Fun() {...} 【按需导出】

导出对象： export var b= {...}
对应的导入方式（“克隆”）： 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>

posted on 2021-03-29 21:24 zhuangjie 阅读(178) 评论(0) 收藏举报