ES6模块化语法

大橘为重¨

已于 2022-07-22 19:14:47 修改

阅读量736

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-01-15 00:23:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53068161/article/details/122504127

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

ES6模块化语法

一、默认导出与默认导入
二、按需导出与按需导入
三、直接导入
四、ES11 动态import

注：文中案例基于vue编写

一、默认导出与默认导入

导出语法：export default 默认导出的成员
导入语法：import 自定义名称 from ‘模块地址’

例子：

function fun1() {
    console.log("这是默认导出1");
}

function fun2() {
    console.log("这是默认导出2");
}

//默认导出
export default {
    fun1,
    fun2
}

<script>
//默认导入
import defaultFun from "./testFun/default"

export default {
  name: "App",
  data() {
    return {
      
    };
  },
  mounted() {
  	//调用测试
    defaultFun.fun1()     //控制台打印效果 “这是默认导出1”
    defaultFun.fun2()     //控制台打印效果 “这是默认导出2”
  },
};
</script>

注：每个模块只允许使用一次 “export default” ，若一个模块里出现多个 “export default” 则会报错

二、按需导出与按需导入

导出语法：export 按需导出的成员
导入语法：import { 按需导出时该成员的名称 } from ‘模块地址’

例子：

//按需导出
export function fun3() {
    console.log("这是按需导出1");
}
export function fun4() {
    console.log("这是按需导出2");
}

<script>
//按需导入
import {fun3,fun4} from "./testFun/asDemand"

export default {
  name: "App",
  data() {
    return {
     
      },
    };
  },
  mounted() {
    fun3()     //控制台打印效果 “这是按需导出1”
    fun4()     //控制台打印效果 “这是按需导出2”
  },
};
</script>

三、直接导入

导入语法：import ‘模块地址’

例子：

//directExport.js下
console.log("这是直接导出");

//main.js文件下
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
//直接导入
import './testFun/directExport'         //控制台打印 “这是直接导出”

createApp(App).use(store).mount('#app')

四、ES11 动态import

上面的 import 导入模块是在一开始的时候就全部导入了，这样在模块很多的时候，会影响性能显得网页速度加载很慢
在ES11中就提供了一种动态import，案例演示如下：

待导入文件moudle.js:

export function study() {
    console.log("动态导入测试");
}

测试文件index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

    <button id="btn">加载module.js模块</button>

    <script type="module">
        const btn = document.getElementById("btn");

        btn.onclick = function () {
            import("./module.js").then(module => {
                module.study();
            });
        };
    </script>
</body>

</html>