【ES6复习笔记】ES6的模块化（18）

模块化的概念

模块化是指将一个复杂的系统分解为多个模块，每个模块完成一个特定的功能，模块之间通过接口进行通信。模块化的目的是提高代码的可读性、可维护性和可重用性。

模块化规范产品， ES6 之前的模块化规范有：

• CommonJS ====> NodeJS、Browserify
• AMD ====> requireJS
• CMD ====> seaJS

模块化的基本语法

• 导出模块：使用 export 关键字导出模块中的变量、函数或类。
• 导入模块：使用 import 关键字导入其他模块中的变量、函数或类。

导出模块的方式

• 默认导出：使用 export default 关键字导出一个默认的模块。
• 命名导出：使用 export 关键字导出多个命名的模块。

分别导出

export let school = '星达网络'
export function teach(){
    console.log('教技能')
}

统一导出

//统一暴露
let school = '星达网络';
function findjob(){
    console.log('找工作吧');
}
export {school,findjob}

默认导出

//默认暴露
export default {
    school:'ATGUIGU',
    change:function(){
        console.log('我们可以改变你')
    }
}

导入模块的方式

• 默认导入：使用 import defaultName from 'module'; 导入默认模块。
• 命名导入：使用 import { name1, name2 } from 'module'; 导入多个命名模块。
• 全部导入：使用 import * as name from 'module'; 导入模块中的所有内容。

1. 默认导入（只针对默认暴露）

import m3 from "./src/js/m3.js"

2. 命名导入（ 解构赋值方式）

import {school,teach} from "./src/js/m1.js"
import {school as guigu,findJob} from "./src/js/m2.js"
import {default as m3 } from "./src/js/m3.js"

3. 全部导入

import * as m1 from "./src/js/m1.js"
import * as m2 from "./src/js/m2.js"
import * as m3 from "./src/js/m3.js"

4.HTML中引入

<script src="./src//js/app.js" type=modeule></script>

示例代码

// m1.js
export let school = '星达网络';

export function teach() {
  console.log("我们可以教给你开发技能");
}

// m2.js
let school = '星达网络';

function findJob() {
  console.log("我们可以帮助你找工作!!");
}

export { school, findJob };

// m3.js
export default {
  school: 'ATGUIGU',
  change: function() {
    console.log("我们可以改变你!!");
  }
}

// app.js
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';

console.log(m1);
console.log(m2);
console.log(m3);

m1.teach();
m2.findJob();
m3.default.change();