模块化开发

2021-06-08 359 阅读2分钟

前言

模块化只是思想，不包括实现

common js 使用同步的方式进行模块规范
AMD 采用异步的模块定义规范

ES modules 特性

默认严格模式
每个 ESM 都有一个私有作用域
ESM 是通过CORE 去请求外部 JS 模块的（需要对应的CDN支持）
ESM 的script 标签会延迟执行脚本

<script type="module"></script>
<script type="https://unpkg.com/jequery.min.js"></script>

export

导出的不是对象字面量，而是一个固定形式： export {name, age }
导出的是一个引用地址，而不是对应的固定值
导入的成员是只读成员，不能修改

import

在原生的ES Module的模块中，不能省略扩展名，不能省略 index.js require中才能省略
可以在imoprt 中直接写 cdn 中的链接。例如：

import {name} from 'http:// locahost:3000/04-import/module.js'

只执行摸个模块，不导出对象, 加载模块并不提取

import {} from './module.js'
import './module.js'

可以通过* 的方式一次拿到所有的成员

improt * as mod from './modules.js'
console.log(mod.bar)

动态化模块加载

// 不能通过变量的形式引入
var modulePath = './module.js'
import { name } from modulePath
console.log(name)

// import只能出现在代码行，最上面
if (true) {
    import {name} form './module.js'
}

// 动态方式（函数）
import(./module.js).then(function(module) {
    console.log(module)
})

可以简写 default 导出

// 导出
export { name, age }
export default 'default export'

// 导入(二选一)， 写在左侧的title，为默认导出变量的重命名
import title, { name, age } from './module.js'

import { name, age, default as title } from './module.js'

import & export

可以通过修改import 为 export，直接导入即导出。这里提供一种场景：

在一个文件中引入的文件数量较多时，可以采取模块化，拆分出去，写一个index.js，囊括所有的引入。然后通过index.js的方式导入进行管理

// index.js 汇总
export {foo, bar} from './module.js'
export {hui, zce} from './common.js'
export {button, avatar} from './button.js'

// mini-page.vue 使用
import {foo,bar, hui, zce, button, avatar} from  './index.js'

Node环境下 ES Modules 和 CommonJS

ESModules 中可以导入 CommonJS 模块，反之 CommonJS 不能导 ES Modules
CommonJS 始终只会导出一个默认成员
注意 import 不是解构导出对象