ES6模块化

一.什么是模块化

模块化就是把一个复杂的功能拆分成许多的小模块,通过特定接口,可以将成员公开和导入

好处: 提高了代码的复用性 ,提高 开发效率,提高了可维护性

1)nodejs怎么实现模块化

nodes遵循CommonJs模块化规范

导入其他模块用 require()方法

共享成员用 module.exports() 方法

2)前段模块化分类

适用于浏览器端的JavaScript模块化 AMD 和CMD

适用于服务器端的JavaScript模块化 CommonJs

3)Es6模块化

es6模块化是浏览器端和服务器端都通用的开发规范

定义规范:

每个js文件都是一个模块

导入其他模块成员用import

公开内部成员用exports

配置node环境

1.确保nodejs版本在v14.15.1以上

2.初始化包管理文件 在根节点中添加 "type":"module"

4)基础语法

1)默认导出

exports default 默认导出成员 , 每个人文件只允许默认导出一次

导出成员可以一个,可以多个,多个要以对象形式公开

// 定义一个变量
let a = 10;

// 定义一个常量
const b = "bb";

// 定义一个函数

function xx() {
  return "xxx";
}

// 导出
export default {
    a,
    b,
    xx
};

2)默认导入

语法: import 自定义变量名 from '文件地址'

import m from './01默认导出.js'
console.log(m); // { a: 10, b: 'bb', xx: [Function: xx] }

3)按需导出

语法 import  let  xx = xx

按需导出可以多次导出

默认导出可以和按需导出结合使用

export let a = 10
export const b = 20
export const cc = ()=>{
    console.log('cc');
}

const dd = 50
// 默认导出不能在导出时赋值
export default dd

4)按需导入

语法: import {a} from '模块地址'

重命名 *** 作:{a as aa}

默认导入需要在按需导入前面

// 默认导出在前
import dd,{a as aa,b,cc} from './03按需导出.js'
console.log(dd,aa,b,cc); // 50 10 20 [Function: cc]

5)按需导入全部

语法: import  *  as  变量名 from '模块地址'

//  所有 *  as重命名
import * as all from './03按需导出.js'
console.log(all); 
// {
//     a: 10,
//     b: 20,
//     cc: [Function: cc],
//     default: 50
//   }

6)只执行代码 

语法: import '模块地址'