模块化加载_前端模块化概述

前端模块化开发

随着前端应用的不断复杂，我们不得不花大量的时间去管理。模块化呢，就是一种最主流的代码组织方式。它通过把我们的复杂代码，按照功能的不同，划分为不同的模块，单独维护。提高我们的开发效率，降低维护的成本。

模块化的演变过程

文件划分，建立不同模块的文件夹
缺点是污染全局作用域
命名冲突
早期模块化完全依靠约定
命名空间方式
可以解决命名冲突的问题，但是依然可以访问模块成员被修改
模块中的依赖关系也没有得到解决
IIFE(立即执行函数)
将模块中的成员放在一个私有函数里
实现了私有成员的概念
有清晰的依赖关系

早期在没有工具和规范的情况下，我们采用以上对模块化的落地方式

模块化规范的出现

模块化标准 + 模块加载器
CommomJS规范（早期前端没有使用这个规范）

-- 一个文件就是一个模块

-- 每个模块都有单独的作用域

-- 通过module.exports导出成员

-- 通过require函数加载模块

CommonJS是以同步的方式加载模块
AMD(Asynchronous Module Definition )

-- 异步的模块定义规范

-- Require.js 实现了这个规范，它是一个强大的模块加载器

AMD使用起来相对复杂

模块化标准规范

最佳实践：

在node.js中使用CommomJS规范

在浏览器中使用ES Modules规范

ES Modules基本特性：

自动采用严格模式，忽略“use strict”
每个ES Module 都是运行在单独的私有作用域中
它是通过CORS的方式请求外部js模块的
scrpt标签会延迟执行脚本，相当于添加了一个defer属性

1、导入和导出：

import {name,hello} from './module.js'export {name}export function hello(){console.log('hello')
}

-- 重命名：

import {name as username} from './modules'export {username as name}

--在使用中常遇的一些问题：

import {name, age} 并不是解构语法，而是一种固定的语法
export{name, age} 并不是字面量对象，而是一种固定的语法
export 导出的并不是值，而是内存地址
import导入的成员是只读的，并不能够修改
import 导入模块的用法和注意事项

（1）文件路径

-- 必须要有完整的文件名称

-- 相对路径中的 ./ 是不能省略的

-- 可以使用绝对路径，或者完整的url

（2）加载这个模块，但不提取它：

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

我们在导入一些不需要外界控制的子功能模块时会非常有用

（3）提取所有成员：

import * as mod from './module.js'

（4）动态的加载模块

-- import 只能出现在最顶层，不能嵌套在if或者函数当中

-- import函数可以帮助我们完成动态导入：

import('./module.js').then(function(module){console.log(module)
})

（5）同时导入命名成员和默认成员

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

直接导入导出成员

 import {Button} from './button.js'import {Avatar} from './avatar.js'   exprot {Button,Avatar}// 简化
export {Button} from './button.js'   export {Avatar} from './avatar.js'

ES Modules兼容性问题

ES Modules in Node.js -与 CommonJS 交互

-- ES Modules中可以导入CommonJS模块

-- CommonJS中不能导入ES Modules模块

-- CommonJS始终只会导出一个默认成员

-- 注意：import不是解构导出对象

ES Modules in Node.js 与 CommonJS 的差异

// CommonJS
// 加载模块函数console.log(require)// 模块对象console.log(module)// 导出对象别名console.log(exports)// 当前文件的绝对路径consoel.log(__filename)// 当前文件所在目录console.log(__dirname)
// ES Modules
// 加载模块函数import// 模块对象import module from './module.js'
console.log(module)// 导出对象别名export// 当前文件的绝对路径import {fileURLToPath} from 'url';
const __filename = fileURLToPath(import.meta.url)// 当前文件所在目录import {dirname} from 'path';
const __dirname = dirname(__filename)