面试-浏览器、Node环境下的导入导出

程序员文章站 2022-06-09 17:58:03

...

模块化导入导出

模块: 一个JS文件就是一个模块.

模块化: 将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

ES6阮一峰文档：模块化语法

本小节介绍的是ES6新增的模块化语法, 基于浏览器环境

导出有3种方式, 导入有2种方式, 有的导出和导入有限制, 以下根据使用讲述

使用方式一:(其中的使用方式可以混和使用)

导出:

// 文件demo-01.js
//1. 导出(写法一) ： 变量声明 与 导出 分开写
let userName = '卡卡西'
let age = 25
let sayHi = function(){
   return 666
}

export {userName,age,sayHi}

// 文件demo-01.js
// 2. 导出(写法二) ： 变量声明 与 导出 一起写
export let name = '张三'
export let n_age = 18
export let sayHello = function(){
    console.log(666);
}

导入:

<body>
    <!-- 
        type="module": 允许执行导入导出操作 
    -->
    <script type="module">
        // 导入 demo-01.js 模块内容
        import {userName, age, sayHi} from './demo-01.js'
        console.log(userName)   // -> 卡卡西
        console.log(age)        // -> 25
        console.log(sayHi())    // -> 666

        // 导入 demo-02.js 模块内容
        import {n_age as var1, name as var2} from './demo-02.js'
        console.log(var1)  // -> 张三
        console.log(var2)   // -> 18
    </script>
</body>

导出的内容, 在使用的时候不一定都要导入, 使用解构赋值语法时, 变量名必须和导出时一致
as 关键字作为别名使用

使用方式二(使用方式不能和其他方式混用)

export default

export let name = '张三'
export let age = 18
export let sayHi = function(){
    console.log(666);
} 

let sex = '男'
export default sex;

import {name as a,age as b,sayHi as c} from "./goods.js"
import sex from "./goods.js"

其他环境下的的导入导出

Node环境下:

导出: module.export { aa }

导入: let aa = require(“路径”)

浏览器环境下:

导出: export 、 export default

导入: import xxx from “路径”

上一篇：【图的dfs】—— 图的着色问题（二分图）

下一篇：图着色问题（超详细！！！）