模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处
模块化的优势有以下几点：1、防止命名冲突，2、代码复用，3、高维护性。
模块化规范产品，ES6 之前的模块化规范有：
1、CommonJS => NodeJS、Browserify
2、AMD => requireJS
3、CMD => seaJS
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能
代码案例
m1.js
//分别暴露
export let school = '小奋斗';
export function teach() {
console.log("IT,IT");
}
JavaScript，ES6，模块化，大程序文件拆分成小文件再组合起来
2022-01-28 23:29·古怪今人
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处
模块化的优势有以下几点：1、防止命名冲突，2、代码复用，3、高维护性。
模块化规范产品，ES6 之前的模块化规范有：
1、CommonJS => NodeJS、Browserify
2、AMD => requireJS
3、CMD => seaJS
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能
代码案例
m1.js
//分别暴露
export let school = '小奋斗';
export function teach() {
console.log("IT,IT");
}
m2.js
//统一暴露
let school = '小奋斗';
function findJob(){
console.log("IT小奋斗!!");
}
//
export {school, findJob};
m3.js
//默认暴露
export default {
school: '小奋斗',
change: function(){
console.log("IT小奋斗,IT小奋斗!!");
}
}
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 模块化</title>
</head>
<body>
<script type="module">
//1. 通用的导入方式
// 引入 m1.js 模块内容
import * as m1 from "./src/js/m1.js";
//引入 m2.js 模块内容
import * as m2 from "./src/js/m2.js";
//引入 m3.js
import * as 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 m32} from "./src/js/m3.js";
//3. 简便形式 针对默认暴露
import m33 from "./src/js/m3.js";
console.log(m33);
</script>
</body>
</html>