编程 网站建设网络推广公司经营范围
模块化的概念
模块化是指将一个复杂的系统分解为多个模块，每个模块完成一个特定的功能，模块之间通过接口进行通信。模块化的目的是提高代码的可读性、可维护性和可重用性。
模块化规范产品， 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();