Javascript – 模块化导入导出import与export

简介

模块化，是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

好处：
* 1.防止命名冲突
* 2.代码复用
* 3.高维护性
*
* 模块化规范产品
* 1.CommonJS => NodeJS , Browserify
* 2.AMD => requireJS
* 3.CMD => seaJS

导出使用

1.分别暴露

在要暴露的数据前面加 export

export let i = '数据';
export function func() {}

2.统一暴露

在代码最后用 export{} 对象的方法把需要暴露的资源加进去

let x = '数据';
function func2() {}
export {x,func2}

3.默认暴露

使用 export default { } 方式暴露数据

export  default {
    y:"数据",
    func3(){}
}

导入使用

在 HTML 中导入

<script type="module">
    import * as js from "./src/xx.js"
</script>

解构赋值形式导入

import {x as x1,y} from 'xx.js'

引入 export default

import {default as module} from 'xx.js'
import module from 'xx.js' // 简便模式，针对默认暴露

动态导入import() [ECMA 11]

import() 是一个 promise 对象，当加载成功后，返回的则是加载文件的暴露方法和属性

import('./xx.js').then(module=>{
    // module 是一个 * as m 的 模块对象
})